Minimum requirements for implementing Progressive Web Apps

Minimum requirements for implementing Progressive Web Apps

A Progressive Web App (PWA) allows users to continue browsing once they are offline. It does this by leveraging the pages they have already visited and another series of requirement listed in this article.

09 Jan. 2020

Progressive Web Apps combine the best of web and native applications. They require no installation, like the latter, and are becoming more and more powerful, as they load faster and send important notifications. This explains why PWAs are gaining increasing interest from companies in several different sectors.

Currently compatible with Google Chrome but not with iOS, PWAs must fulfill four technical requisites:

1.- A site must be visited twice within a five-minute interval to qualify.

In Google Chrome, users must have visited the site hosting the PWA twice before the browser shows the message to install it.

This is not the most reliable form of verification, but it is a simple way of determining the user's interest. This parameter will probably be replaced by another better one in the future, but for the time being Google's developers are satisfied with this measure.

2.- Valid secure HTTPS connection

As the Progressive Web App has a secure connection, users can feel relatively safe about allowing it permits. As network requests are routed via a service worker script, adding https to the server helps mitigate certain vulnerabilities. This makes it possible to run heavy code in the background and to communicate with them so that one or several long tasks do not block the user interface.

Although the main thrust of this requirement could be primarily to add security, having a secure connection also contributes to create trust among users. What's more, as PWA can be indexed by search engines, it also makes sense to serve through TLS, cryptographic protocols that provide secure Internet communications, as they add a small amount of SEO benefit.

3.-Valid installed JSON manifest

When you provide a data extract in JSON format, this information can be cached with the help of the service worker. The shell app (a model or pattern when creating apps) is then used to load the CSS rules and deliver an offline version with complete user interface capabilities.

Each time a visitor loads a new page, the service worker will cache the JSON extract and store it physically in the shell app. This shell is an autonomous container with all the style sheets, scripts, images, fonts and HTML outputs necessary to enable a user to represent a complete page without loading anything else.

4.- Installed service worker

As we have said, the service worker is responsible for caching all the files, push notifications, content updates, data handling and much more.

It is important to understand that this script functions independently of any app or website already on the web server, working with events listeners and commands such as "fetch", which is similar to the HTTP commands "Get / Post / Set".

As it listens to the network requests on the server, but it is located as a .js file in the user device, the service worker will handle these requests with appropriate responses depending on whether there is an Internet connection or not, allowing customized pages offline.

Once these four requirements have been correctly implemented, users of Android phones and other compatible devices will be asked to add the PWA to their home screen, where there will be an icon similar to a regular app, which will open in a browser.

In constant development

Developers must take into account that they need to ensure that the user interface is similar to the one on the site or application, although they may prefer to develop a completely new user interface for PWA users. This freedom of choice is what has caught the attention of some developers interested in this trend.

For the time being PWAs are not available for iOs and are only compatible with Chrome on Android (and only in recent versions of the browser). This is certainly one of their great drawbacks, but in view of the fact that Android represents 85% of the cellphone market, they will continue developing and reaching more people.

On the Google page for Progressive Web Apps there are several examples of real apps, and they come with abundant documentation.

Source: Site Point

Are you interested in financial APIs? Discover all the APIs we can offer you at BBVA

Sign up!

Sign up to the BBVAOPEN4U newsletter and receive tips, tools and the most innovative events directly in your inbox.