The Basics of Progressive Web Applications
Have you ever seen the button “Add to the main screen”, which appeared on the screen of your Android smartphone, when you were browsing a website? If you click on this button, then a certain application will be installed on the phone in the background, the launch icon for which will go to the main screen. Now this application can be launched and operated with the site almost the same as before, but only in the usual telephone interface.
What we are talking about is a mobile application that was downloaded from a web application. Moreover, as you can see, to install such an application, you do not have to interact with the Play Market. As a result, the installation of such applications is simplified as much as possible. However, this is not the most interesting. By launching such programs, you get the opportunity to work with the data that they display, even without an Internet connection. They allow you to interact with web pages offline. Isn't it great?
The author of the material we are publishing today will tell about such applications, why they are needed, and how to create them.
')
Probably, you already understood that we just talked about the so-called progressive web applications (Progressive Web App, PWA). Such an application can be installed directly from the browser window, the icon for launching it will look like the icon of a regular mobile application, and it, like many mobile applications, will allow you to work with it without an Internet connection.
Button "Add to the main screen"
Let's talk now about what “progressiveness” as applied to web applications. I propose to get to know them better, to find out how they differ from ordinary web applications, and, moreover, I want to tell you about why I think PWA is better than traditional mobile applications.
The term “Progressive Web App” was coined by Alex Russell and Frances Berryman. According to Alex, progressive web applications are just websites that have taken the right vitamins. What is the basis of PWA is not a new framework or a new technology. This is, in fact, a set of advanced development methods that allow you to make the behavior of a web application look very similar to the behavior of classic desktop or mobile applications.
PWA icon on the main screen
PWA gives the user new convenience features through progressive application improvements. In general, this means that PWA, on mobile devices of different generations, will work approximately the same. Of course, some features of ordinary telephone applications may not be available to them, but such applications usually work on different devices as they should work on them.
Before we figure out why PWA is needed at all, let's talk about the problems we face when designing web applications and ordinary mobile applications.
Progressive web applications help solve these problems.
PWA in action
There are many reasons to use PWA, here I would like to highlight the main features that they provide. If you describe these features in one word, then the abbreviation FIRE (Fast, Integrated, Reliable, Engaging) is suitable, that is, a progressive web application must be fast, integrated into the device’s work environment, reliable, and have the means of engaging users with it. .
Google has published a checklist for developing progressive web applications. Consider the minimum requirements for an application whose compliance allows you to call it PWA.
The PWA manifest is a
Before us is a regular JSON file that contains meta information about the web application. There is data about the application icons (one of them is seen by the user on the main screen after installing the application), the background color of the application, its full and abbreviated name, and so on. You can write this manifest yourself, or you can use a special tool that automates the creation of such files.
Website facilitating the creation of the file manifest.json
Service workers are event-driven workers who run in the background of an application and act as intermediaries between the application and network resources. They can intercept network requests and cache information for the application. They can be used to download data that is planned to be used for the application to work offline. Service workers are JavaScript programs that intercept the processing of certain events and perform certain tasks.
Here is an example
Badges are used to start installed on the PWA device. The aforementioned site, which helps to create manifest files, allows you to automatically generate a set of application icons based on the only 512x512 pixel image file uploaded to this site. Generated files are saved in
In order for a certain application to be called PWA, it, among other things, must support the exchange of data over a secure communication channel using HTTPS. SSL-certificate for the organization of such a connection is easy to obtain, using the capabilities of services like Cloudflare and LetsEncrypt. Application protection is not only what is really necessary these days, it is also a way to demonstrate the reliability of the application to the user and build trust with him.
In this material we talked about progressive web applications, talked about why they are needed, what problems they solve, what requirements are placed on them. Also here we touched on the topic of their development, in particular, we talked about the PWA manifest, about service workers, about application icons, and about how to protect them using HTTPS. PWA technology is often perceived as something that relates exclusively to Android-based smartphones, and until recently such a point of view had the right to life. However, given the events that took place this year, we can say that PWA has a very interesting future on many platforms. The PWA theme, in fact, is far from exhausted by all of this. Therefore, it is quite possible that we will come back to it.
Dear readers! How do you feel about progressive web applications?
What we are talking about is a mobile application that was downloaded from a web application. Moreover, as you can see, to install such an application, you do not have to interact with the Play Market. As a result, the installation of such applications is simplified as much as possible. However, this is not the most interesting. By launching such programs, you get the opportunity to work with the data that they display, even without an Internet connection. They allow you to interact with web pages offline. Isn't it great?
The author of the material we are publishing today will tell about such applications, why they are needed, and how to create them.
')
Probably, you already understood that we just talked about the so-called progressive web applications (Progressive Web App, PWA). Such an application can be installed directly from the browser window, the icon for launching it will look like the icon of a regular mobile application, and it, like many mobile applications, will allow you to work with it without an Internet connection.
Button "Add to the main screen"
Let's talk now about what “progressiveness” as applied to web applications. I propose to get to know them better, to find out how they differ from ordinary web applications, and, moreover, I want to tell you about why I think PWA is better than traditional mobile applications.
What is a progressive web application?
The term “Progressive Web App” was coined by Alex Russell and Frances Berryman. According to Alex, progressive web applications are just websites that have taken the right vitamins. What is the basis of PWA is not a new framework or a new technology. This is, in fact, a set of advanced development methods that allow you to make the behavior of a web application look very similar to the behavior of classic desktop or mobile applications.
PWA icon on the main screen
PWA gives the user new convenience features through progressive application improvements. In general, this means that PWA, on mobile devices of different generations, will work approximately the same. Of course, some features of ordinary telephone applications may not be available to them, but such applications usually work on different devices as they should work on them.
Why do we need progressive web applications?
Before we figure out why PWA is needed at all, let's talk about the problems we face when designing web applications and ordinary mobile applications.
- Slow internet connection speed. Perhaps where you live, with fast internet is okay, so this problem does not affect you. But 60% of the world's population still uses 2G-Internet. Even in the US, some users have access to only speeds comparable to those of ordinary modems using simple telephone lines.
- Slow loading website. If the site loads very slowly, do you know how long the user waits before clicking on the close button of the window? Three seconds! 53% of users leave too slow sites.
- The complexity of installing applications. Users do not want to install regular mobile apps. The average user installs 0 applications per month.
- Involving users in the work with the application. Users spend most of their time in regular mobile applications, but the coverage of users with mobile web applications is about three times more. As a result, most users are not particularly actively involved in working with applications, although these users spend 80% of their time in the three mobile applications that they use most often.
Progressive web applications help solve these problems.
PWA in action
There are many reasons to use PWA, here I would like to highlight the main features that they provide. If you describe these features in one word, then the abbreviation FIRE (Fast, Integrated, Reliable, Engaging) is suitable, that is, a progressive web application must be fast, integrated into the device’s work environment, reliable, and have the means of engaging users with it. .
- If we talk about speed, then PWA, at all stages of user interaction with them, work quickly. They are quickly installed, run quickly, work quickly. Since PWA allows data to be cached, the re-launch of such applications is very fast, even without accessing network resources.
- The integration of PWA into the device environment is reflected in the fact that such applications behave like normal applications. The icon for launching them is on the main screen, they are able to work with push-notifications, they can use the same device functions as regular applications. As a result, while working with progressive web applications, the user does not feel that he is leaving the familiar environment.
- The reliability of integrated web applications is based on the fact that they can work normally without a network connection, due to the data caching capabilities of service workers.
- PWA’s ability to engage the user is based on the fact that they can send notifications to users. This allows the user to keep up with interesting events related to the application and attracts him to work with this application.
How to create a progressive web application?
Google has published a checklist for developing progressive web applications. Consider the minimum requirements for an application whose compliance allows you to call it PWA.
▍1. Application manifest
The PWA manifest is a
manifest.json file of approximately the following content: { "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null } Before us is a regular JSON file that contains meta information about the web application. There is data about the application icons (one of them is seen by the user on the main screen after installing the application), the background color of the application, its full and abbreviated name, and so on. You can write this manifest yourself, or you can use a special tool that automates the creation of such files.
Website facilitating the creation of the file manifest.json
▍2. Service workers
Service workers are event-driven workers who run in the background of an application and act as intermediaries between the application and network resources. They can intercept network requests and cache information for the application. They can be used to download data that is planned to be used for the application to work offline. Service workers are JavaScript programs that intercept the processing of certain events and perform certain tasks.
Here is an example
serviceworker.js file. self.addEventListener('fetch', event => { // const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request); } ▍3. Badges
Badges are used to start installed on the PWA device. The aforementioned site, which helps to create manifest files, allows you to automatically generate a set of application icons based on the only 512x512 pixel image file uploaded to this site. Generated files are saved in
.png format.▍4. Security
In order for a certain application to be called PWA, it, among other things, must support the exchange of data over a secure communication channel using HTTPS. SSL-certificate for the organization of such a connection is easy to obtain, using the capabilities of services like Cloudflare and LetsEncrypt. Application protection is not only what is really necessary these days, it is also a way to demonstrate the reliability of the application to the user and build trust with him.
Results
In this material we talked about progressive web applications, talked about why they are needed, what problems they solve, what requirements are placed on them. Also here we touched on the topic of their development, in particular, we talked about the PWA manifest, about service workers, about application icons, and about how to protect them using HTTPS. PWA technology is often perceived as something that relates exclusively to Android-based smartphones, and until recently such a point of view had the right to life. However, given the events that took place this year, we can say that PWA has a very interesting future on many platforms. The PWA theme, in fact, is far from exhausted by all of this. Therefore, it is quite possible that we will come back to it.
Dear readers! How do you feel about progressive web applications?
Source: https://habr.com/ru/post/418439/
All Articles