PWA: WHAT IS A PROGRESSIVE WEB APP?

Las PWA son aplicaciones webs que hacen uso de las tecnologías más novedosas y potentes de los navegadores.

They are called progressive because they increase their functionality based on the capabilities of the device on which they run. They are web because they are built using web development standards (some well known as HTML, CSS, JavaScript; and a new generation of JavaScript APIs), and finally, they are called app because Progressive Web Apps behave like native web applications, only that they use web technologies.

Progressive Web Apps are a set of new standards that have currently made PWA become a concept.

BRIEF HISTORY

The emergence of native apps (iOS, Android, among others), brought a series of advantages over traditional web pages such as local storage, offline execution, performance, etc. But the advantages of native apps over web pages have been reduced progressively.

The innovations and elements introduced by HTML5 managed to bring the experience of web interfaces closer to native applications. Subsequently, hybrid apps appeared combining web technologies such as HTML, CSS and JavaScript, but they are neither native mobile applications nor web based. Hybrid applications improved on terms of installation, access to hardware and push notifications, but did not provide optimal results in terms of performance, User Experience and offline access.

Currently, after the progress of standards and browsers, it is possible to create web applications that match the advantages of native applications. They are web applications, but for the user, using a PWA is (or should be) the same as using a native app.

MAIN OBJECTIVES OF A PWA

The objectives when creating a PWA are:

• Maximum mobile performance
• Instant loading page
• Interface equal to the native app interface
• Icon and access from the home page
• Execution and offline access
• Push Notifications

To achieve these objectives, the PWA are based on the following concepts:

Service Workers: Service workers are a complex technology that allows you to run background services in browsers Service Workers can run independently of the application (they can perform while the web application is closed). They offer advanced capabilities: communications interception, information cache, background downloading of content, offline work or the possibility of sending notifications (Push Notifications).

Service Workers provide remarkable functionality for off-line storage of information. It is not strictly necessary to use Service Workers to create a PWA, but it is most advisable if the web application you want to create requires advanced functionalities.

Shell App: The Shell App is a model or pattern for creating web applications. It consists of separating the content and functionality in the application. On one hand, the application is cached for off-line use optimizing the loading speed; and, on the other hand, the content can be loaded from an initial cache and then updated, or directly from the web if there is a connection. The goal is to make the user’s perception of the app’s loading speed greater. As the “shell” is initially downloaded from a cache, the user will access the app immediately.

Application Manifesto: It consists of creating an icon that users can pin to their home page to access the web application directly. To control the appearance of the icon it is possible to use various techniques depending on the browser and the operating system. In iOS, it is controlled through “meta” type headers that can be added to the main page of the web application. In Android and Chrome, the used file is called “Manifesto”. Additionally, when an application is added to the Android start menu, Google creates an installation banner, like in a Native App, all in order to make the experience more and more similar to native applications.

The greatest advantage of creating a progressive web app is that if you already have a web application, it is very simple to bring the experience of a native app.