Progressive Web App introduction

Progressive Web App introduction

Hello Everyone! Today we are going to start our new course … Yes! We are back to work and this time we want to teach one more step on web design and where we are evolving in the digital world. You already know that it is not the first web design course we do, but of course, this one is different. Specifically, we will talk about the evolution of new technologies and applications in the world of web design. Here we go!

The progressive web app (PWA) is a technology to make a new generation of applications. These applications increase their functionality according to the capacity of the device (progressive). They are built using web technology such as HTML, CSS and Javascript (web). And they behave like native applications (app).

So…what is the Progressive Web App?

It is a technology promoted by Google, using the latest technologies available in browsers to offer a mobile experience as close as a native application.

These applications use a set of new standards to get a web project to work as an application. These applications reduce the load time, thanks to its cache management, and can work without an Internet connection.

The benefits of using PWA:

  • Progressive: It works for all users.
  • Adaptable: Fits any format.
  • Independent: With this term we mean that, if the user is connected to a bad internet network or has disconnected from the internet, our PWA can continue to function.
  • APP style: The user seems an app.
  • Fresh: Always update thanks to service worker.
  • Secure: Works with SSL certificates, that is, the url starts with https.
  • Installable: the user can keep the app.
  • Linkable: easily share it.

Next, we will see a video of an interview with Alex Russell developer of this technology:

What is the App Shell?

When we talk about Shell in a progressive web app, we are referring to all the visual part, or front office of a project, that is, HTML, CSS and javascript. These applications are divided between the Shell and the content. The content is the information that is displayed inside the web.

The part of Shell of our project is going to be stored in cache to give loading speed to our  application and also that it can work without an internet connection. This part must have a very fast initial load and be automatically saved in the cache of the device, with this we get better upload speeds, since these elements would be loaded from our device and not from the network.

Next, we will see a video that compares the different types of applications:

Service worker

Services worker are commands that the browser executes in the background. With this technology we can incorporate functions such as notifications. The main function is the ability to intercept and handle network requests, including the management of the cache.

With a service worker it allows to support experiences without connection, so the developer will have total control over the experience.

The service worker uses the Javascript programming language, with this we can access the DOM directly. It is a programmable network proxy, with this we control the way in which the network requests of our project are carried out. When it is not being used it has been turned off and when it is needed it is restarted.

Manifest.json

Manifest.json is a file in JSON format. It is the only file that every Web Extension must contain. In this file we specify the metadata as the name and version.

This file allows you to save an access to our project on the device’s home screen. It has a unique icon and name. Displays content while resources are being downloaded or restored from the cache. Provides default viewing features to the browser to avoid a sudden transition.

To teach this course and deepen even more in the progressives web apps, we will be based on the best material, which is provided by its developers, ie Google. But be attentive to our social networks because we will tell you how we are evolving and above all, our students. Until next time!

Foto Francisco
Francisco Villén.
Desarrollador web de


Si te ha parecido interesante, compártelo

Leave a Reply

Your email address will not be published. Required fields are marked *


Request Information

close-link