What is Progressive Web App? Is it an application or a website or a site similar to an application? Why should websites be made like applications? What are the features and advantages of progressive web apps and how are they developed? When there is a website, what is the need for a web application and its progressive type? In this article, you will read the answers to the proposed questions and you will be completely familiar with progressive web applications.
I have installed 14 applications on my mobile phone. If you pay attention, you will get a similar or even bigger number. Many of us prefer to install the Google app on our mobile phones and use it instead of opening Google in the browser. Because working with applications is easier than websites in many cases, and apps have capabilities and facilities that websites do not have. Applications are available to the user at any time and place, and many of them do not need to be connected to the Internet.
The user can easily save the information he wants in the application. For example, when you install an application like Apple Health on your phone, you can enter all your personal health information in it and have them in one place. It seems as if the apps are inseparable from our mobile and were there from the beginning and we didn’t install them.
Well, now think that with the help of technology, websites can be brought closer to the applications that we install on our mobile phones. Not good? Doesn’t our access to those sites become easier and faster? It can be done. It was precisely for this reason that progressive web apps opened their way to the world of website design and development.
Table of Contents
What is Progressive Web App?
Before it is possible to define the progressive web application, I need to mention two essential points: First, the discussion about progressive web apps started in 2015, and it must be said that There are still differences of opinion in its exact definition. Second, for a better understanding of this technology, a little explanation should be given about Web Applications & Native Applications and even what a website is.
- A website is software that is installed on an internet server (host) and is available to users through a domain. To access websites, you must have access to the Internet and be connected. The website is built on the Internet. Websites may be dynamic or static.
- Native Application, or the same apps that you and I install on our Android or IOS phones, is software that is installed once on the system and uses the system’s features, for example, it can send a notification to the user. The application does a specific task and is developed specifically for a platform (IOS or Android). You don’t need to be connected to the Internet to use all applications.
- A web Application is a type of application (software) that is not installed on the system but runs in the browser. Web apps are not installed on the phone and are not designed and developed for a specific platform. They are websites for doing something specific. Gmail is a web app.
A progressive Web Application is a website that is made very similar to an application and has the capabilities and facilities of applications and websites together.
Web applications use an important technology called AJAX to have better and faster performance and not need to delay the user for the page to load completely.
Why is PWA technology important, especially for businesses and e-commerce sites?
The number of internet and mobile users in the world is increasing every day. This is a growing trend that started a few years ago. When more users have access to the Internet, it means that their work and personal and social life are more tied to virtual space and the Internet. As a result, people find the goods and services they need on the Internet, and a part of their social life is formed in social networks.
That process is very, very important for businesses. A business that wants to have a place and stay in today’s market must offer its goods and services through the website and application. In today’s world, having a website or application has become a necessity for businesses. Of course, the important point here is that users do not associate with any website and do not accept it.
The website user must have a satisfactory experience and interaction with it. Otherwise, he will no longer visit that site (that is, he will not make a purchase) or delete the application. So, it is the users who determine for businesses and site designers what kind of site they prefer. Users want a website that is fast and displays well on different devices (especially mobile, as half of website traffic comes from mobile devices).
Users like apps because they are always available and can be used offline. They are fast and you don’t need to wait for the page to load; It is compatible with their phone’s operating system and feels like a part of it. So, it can be concluded that users like sites that behave like applications.
As a result, when the business site gives the user an experience similar to the experience of interacting with an application, it is more lovable and attractive to the user. Progressive web apps are websites whose interaction experience is like interacting with an application because they behave like apps.
Who invented leading web applications and where did they come from?
As the use of smartphones increased, the idea that websites should perform better for mobile users and on phones became more important. It was in 2015 that Alex Russell, who is one of the Google Chrome engineers, together with a designer named Frances Berriman used the term Progressive Web App for the first time in an article. After that, there were many discussions and disagreements between programmers and developers about this issue. Google also welcomed the discussions and that concept. Various browsers (Safari, Chrome, Microsoft Edge, etc.) made their versions after 2015 compatible with PWA.
Alex Russell himself defined Progressive Web App as follows:
A Progressive Web App is functionally defined by the technical properties that allow the browser to detect that the site meets certain criteria and is worthy of being added to the home screen.
What are the features of progressive web apps?
What makes a web app progressive? If web apps have what features, are they called progressive? Usually, a progressive web app has the following features (reactive design is also one of the features of these web apps that was mentioned earlier):
1. Installable
Web apps can be installed on smartphones, just like apps. So, the icon of progressive web apps will be added to the home screen of the phone.
2. Network Independent
Yes, most progressive web apps work even when the user is offline or has a poor internet connection. Please note that if the Progressive Web App belongs to a restaurant, the user may not be able to place an order offline; But definitely in offline mode Progressive Web App will open and its main page and menu will be displayed.
3. Linkable
The user can send the URL of the progressive web app installed on his mobile phone to others.
4. Discoverable
Search engines can index the content and pages of Progressive Web Apps and show them in search results. This feature is not in applications.
5. Re-engageable
Progressive web apps, unlike applications, do not need to be constantly updated and do not notify the user of the update. Every time the user connects to the Internet, new content is added to the web app, and the user is also informed about it.
6. Secure
Progressive web apps are secure and the communication between the user and the app and the server is protected from any third-party intervention.
7. Progressively enhanced
Progressive web apps run on any device and any browser and have a function that fits the features and capabilities of the same device and browser. It means that some features of the web app may not be implemented in old versions of the browser or mobile operating system, however, the web app has an acceptable performance for the user in that browser or mobile.
How do you know if a web app is progressive? (+ progressive web app example)
The user doesn’t know if the web app is running or not. Because this is not something that is announced somewhere on the site or the browser that opens the site informs the user. As mentioned before, when a web app has special features that make it very similar to a native app, it is called a progressive web app.
To install progressive web apps, it is not necessary to download them from the App Store or Google Play. Leading web apps don’t need to be released on those platforms. Users can add Progressive Web App to their mobile home screen.
Of course, businesses usually don’t limit themselves to Progressive Web App and also offer their app to users for download. It is users who choose which one they want to use.
The user will see an icon on the home screen and push notifications from the advanced web app. And when he interacts with it, he realizes an experience similar to the experience he has when working with applications on his mobile. The important factors that make progressiveness possible are not visible and understandable to the user. Because they are completely specialized concepts.
The developer develops the site with features but it is the browsers that have to do the rest to make the Progressive Web App possible. If browsers do not support Service Workers & Web App Manifest, there will be no Progressive Web App. So, without 2 things, progressive web apps will not be possible and practical:
Service Worker
A special file (codes) that is permanent and acts as an intermediary between the web application, the browser, and the network (Internet). What allows progressive web apps to work offline are service workers. That file is constantly running in the background and when the web app is connected to the net, it gets the new information and stores it. This is why progressive web apps, unlike applications, do not need updates.
Web App Manifest
The configuration and description file of the web app. In that file, the set of information that defines the main characteristics and identity of the web app (such as name, icon, manufacturer’s name, background color, etc.) is stored. This is the file that is installed on the phone and adds app information to the home screen.