Basics of Progressive Web Applications

Original author: Shruti Kapoor
  • Transfer
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 on the phone, in the background, a certain application will be installed, the launch icon of which will go to the main screen. Now this application can be launched and operated on 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. And, 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 running 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 that we are publishing today will tell about such applications, about 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"

Now let's talk about what "progressiveness" as applied to web applications. I propose to get to know them better, find out how they differ from ordinary web applications, and, in addition, 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 underlies 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.

The PWA icon on the PWA main screen

gives the user new convenient 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 regular mobile applications.

  • Slow internet connection speed. Perhaps, where you live, with fast Internet everything is in order, 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 is waiting 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 as much. As a result, the majority of 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 in working with it .

  1. 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.
  2. 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 know how 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.
  3. 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.
  4. PWA's ability to engage the user in working with them 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 Manifesto is a file of manifest.jsonapproximately 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 information 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 to ensure the application works in offline mode. Service workers are JavaScript programs that intercept the processing of certain events and perform certain tasks.

Here is an example file serviceworker.js.

self.addEventListener('fetch', event => {
    // кэширование данных для работы без подключения к сети
    const {request} = event;
    const url = new URL(request.url);
    if(url.origin === location.origin) {
    } else {
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. The generated files are saved in a format .png.

▍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.


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 is, in fact, far from exhausted. Therefore, it is quite possible that we will come back to it.

Dear readers! How do you feel about progressive web applications?

Also popular now: