Progressive web applications: what are they and what are they for?

In the world where we currently live, it is always more than advisable – not to say obligatory – to be up to date with the latest news that come onto the market. It is here where we can put into practice the famous phrase of the philosopher and writer Miguel de Unamuno, “ progress consists in renewing ourselves ”.

Technology is advancing by leaps and bounds and it is sometimes difficult to keep up. New technologies, new tools, new frameworks , new programming languages and the already known updates that always include improvements and new functionalities to the product or service.

Well, having said this, today we will discuss a new technology that may not be widely known about and is not yet widespread among all people belonging to the web world community. Accustomed to the fact that our clients’ assets are websites and APPs, a symbiosis between the two enters the scene: progressive web applications .

What are “Progressive Web Applications”?

Promoted by Google, progressive web applications appear , also commonly known as PWA (progressive web applications). They could be defined as websites that offer a mobile experience as similar to a native application, thus providing them with a greater user experience.

Where are you from? APPs vs Sites

Although at this point it may be very obvious to us, we are going to comment on the main differences between applications and web pages. This will help us better understand the world of progressive web applications.

The objective of PWAs is none other than to turn webs into applications. Therefore, we must bear in mind how each of them differ, what are their advantages, the characteristics they show and for what reasons we want our websites to become applications or have the characteristics of an application.

The main characteristics or advantages of a site or web are the following:

They work on any device . This means that they are accessible from any device that has a browser: mobile phones, tablets , computers, televisions, wereables , etc. They only need a browser to be executed, and this is thanks to the fact that HTML and JavaScript are multi-platform and multi-device languages.
They get new users more effectively than mobile applications due to their universality.
User access to websites is much easier thanks to advertising, social networks, email campaigns, etc.

By contrast, the applications show the following characteristics:

Applications are not universal and need to be created in a specific programming language depending on the device where they are to be executed, be it an iOS device, Android, SmartTV, SmartWatch, etc.
Greater user loyalty. The handicap of universality does not prevent users who have downloaded an application on a terminal from entering it again, which is more difficult to happen on a website. This is because the applications are installed on the device and it is not necessary to remember a URL, do a Google search or have the site saved in our favorite bookmarks. We will simply access the application with a single click on the logo.
Another of the greatest virtues of the applications is the sending of notifications. These types of warnings occur even when the user is not using the device and they make the user re-interested in accessing the application again.
Many of the applications work without the need for an Internet connection. This possibility is available for certain specific cases. However, it is impossible to access a web offline.

Based on these differences, the objective arises for a site to have those characteristics of the applications that make them so attractive and that allow users to reuse them over and over again and re-enter them more easily.

Next, we will see what characteristics the websites must meet to be considered progressive.

Characteristics of a PWA

They are webs. Therefore, they are universal and cross-platform. They can be accessed from anywhere and from any device.
They are installable. A web application, if it is progressive, will be able to be installed on a mobile device or tablet. Once installed, the user will not need to access the browser and enter the address to re-enter, but in his list of applications he will have one more with the logo and name of the web. This website will have the appearance of a native application on the device.
They send push notifications that can be interesting, so that the user opens the notification and accesses the installed application, in the same way that it happens in native apps.
They must be able to work without an internet connection. It has to be accessible, even if the user does not have a connection, either Wi-Fi or data.
Better charging time and higher performance than conventional applications.
Virtually instant content loading.

Once you have seen the characteristics that a website must have to be a PWA, it is necessary to know what type of technologies are necessary to be able to carry out this conversion process.

How to make our website a PWA?

It will be necessary to rely on the following techniques and technologies to make our website progressive.

Responsive Web Design . It is a set of techniques, specific frameworks to create interfaces that adapt, automatically, to the device on which they are being viewed.
Service Workers . It is a technology that allows running services in the background in browsers. The main advantage they offer is that they can be run independently of the application.
App Shell . The idea of this model is to separate functionality and content so that they are loaded separately. It is a pattern that many Single Page Applications often use. The objective to be achieved is that the user has the perception that the loading speed of this type of applications is higher.
Manifest file . Basically it is the standard way of informing the browser of our devices that the web is installable. It is a file in JSON format and it is widely supported in browsers. To include this file on the web, it would be enough to include the following code in the head of the HTML: