Progressive Web App Development – facilities & technology

Progressive Web Apps provide an installable, app-like experience on desktop and mobile that are built and delivered directly via the web. They’re web apps that are fast and reliable. And most importantly, they’re web apps that work in any browser.

Progressive Web App (PWA), from the word progressive we can understand that this app will only load elements needed for the user and will be ready to view again without internet. Thus this will work efficiently and smoothly.

Key features of progressive web applications:
responsiveness – suitable for devices of any form factor: desktop PC, smartphone, tablet, etc .;
independent of network connection – can be adapted to work offline or in networks with a low connection speed;
installation flexibility – allows the user to add the application to the home screen / desktop without fussing with the markets;
makes it possible to share links to applications without the need for a full installation.

Technologies
Briefly consider the main engines of PWA.

Service worker
The heart of the PWA is Service Worker. This is the proxy layer between the frontend and backend, located in the browser. All browser requests go through it. This division into two independent layers allowed us to make the transition of a regular website to PWA as simple as possible.

From storage, Service Worker has access to Cache Storage for web resources, and IndexDB for data. But, most importantly, complete freedom to implement business logic.

You can, for example, accept a request from a browser, check the network status, take data from the storage, perform operations with them and return a certain result back to the browser – which will think that the answer came from the server. Or it won’t – as the developer wants, he will. Two browser layers (client frontend and Service Worker) allow you to write full-fledged applications.

At the same time, for most sites, the caching functionality of the Service Worker will be enough to turn into a PWA.

PWA does not depend on any frameworks, it is pure javascript, although even Google’s specialists on Habré for some reason advise using library code generators. Service Worker is beautifully written by hand, and this is necessary to understand and control the logic of your application.

From a programmer’s point of view, Service Worker is a javascript file that is included in the html code of the page. In it, the developer defines the logic for working with requests coming from the front-end and other functionality.

Https
PWA requires all site resources to be transmitted over the HTTPS protocol. You can get an SSL certificate for free; some hosters do this for you. But it is critical that the site does not have links to insecure resources – some browsers simply will not display the site in this case.

The main problem encountered in such cases is pictures. Often editors or commentators put links to pictures from the Internet in the material, sometimes they automatically get there (in the material). It is necessary to save images either to yourself or to a service with access via HTTPS.

Application shell
App shell is just a skeleton of a graphical interface, a template. For example, take an average site with a header, two columns and more. Roughly speaking, we cut out the contents of the current page and all the dynamic information from it, the remaining static is the app shell.

The bottom line is that the app shell is stored on the client and loaded when the application starts, and then dynamic information is loaded into it from the network. And while it is loading, the app shell should look beautiful (“loaders” on the ground, etc.)

This site architecture – loading content and other dynamic information through ajax calls – can be thought out and implemented on the site in advance, then the transition to PWA will be completely uncomplicated.

An app shell is like a native program shell. Look at your PWA as a native program, and much will become easier.

Web app manifest
A JSON file that declaratively defines the name of the application for the browser, an icon, what PWA (fullscreen, standalone, etc.) and some other parameters will look like. Allows you to “install” PWA as a separate application on the home screen of your smartphone.

Push notifications
If you surf the Internet with Chrome DevTools, open on the Application tab, you can see how few sites use PWA technology. And 90% of those who use do it only for the sake of Push Notifications.

So far, this is the most popular and most abused PWA technology – over the past few months, the number of sites that you first go to and look for the “Block” button with the mouse to get the latest news has grown, the feeling has increased many times, and the desire to impose your own Push is like Spam.

But you can also offer a subscription to the second or third visit of the user to the site, when it is already clear that he is not here by chance.