Progressive Web Apps (PWA) What are they?

[tongfkymm44]

What are the main components of a PWA?
Application JSON Manifest
One of the most important elements is the app manifest. It is a very simple file (JSON format) that allows you to control how your app will look in areas where users typically have native apps. An example, in this case, from the French sports newspaper L'Équipe:

Manifest JSON Example for Progressive Web Apps


Service Workers
The Service Worker is the most complex concept associated with lawyer email marketing database Progressive Web Apps: It is one or more scripts that run in the background and allow you to:

Generate an offline experience, downloading the essential content for the application to work
Generate push notifications, even if the user does not have the application open (a bit like native applications)
For mobile use, this feature is really important, as it allows us to optimize user retention by reminding them that we exist. Until now, this feature was only available in native apps, and it is one of the most important features to improve user return to our app. Although it should be noted that, with the increase in notifications from all apps, this feature is becoming increasingly hidden.

It is worth mentioning that this feature is not suitable for all devices. For example, Safari will not work on iOS, and you should keep in mind that this search engine represents a very significant market share in some countries.

Check service workers with Chrome

In the “Cache Storage” section, we can see the files that have been downloaded and cached by the Service Worker:

cache storage chrome for pwa

It is important to note that the possibility of using the portal offline implies that we must develop a system so that offline browsing data (page views, etc.) is sent to Google Analytics or any other measurement program you are using, when the user has reconnected to the network.

This caching system also has a very important advantage for returning users, as the content will not be downloaded again, similar to the classic caching system.

What are the important elements of a PWA DOM?
As Google explains on its developer page , a PWA is made up of two main parts:

The App-Shell, for application shell, which corresponds to the structure that is shared between all pages. For example: the header, the navigation, the footer, etc.
The content, which obviously varies between the different pages of our application
Elements of a PWA DOM


PWA page example

If we look at the source code of the page, the text we see is not embedded. In fact, in our example, the content is loaded via JSON. We must pay special attention because this technique can cause indexing problems if implemented poorly, among other things if the content injection is done after the page loads. This is a very important detail to take into account for SEO, for example.

In the case of L'Équipe that I mentioned at the beginning of the article, they used a pre-rendering service (prerender.io) to avoid this problem, since they developed everything with Angular JS 1.6, which does not have an integrated pre-rendering engine (Angular Universal – available from Angular 2). For those who understand French, I recommend the following article that explains the whole project (written by the IT team of L'Équipe) https://medium.com/lequipe-tech/the-gen ... bf9e35981a