A different subject this week, as we are talking about PWAs: applications that combine web apps and mobile. Are they the future of web/mobile application development? Are they really a revolution? The answer is in this article.
Worth knowing: Progressive Web Apps are now available from the Google Play Store!
What is a progressive web app?
A progressive web app is the perfect blend of the web app and the mobile website: it is developed in web languages (HTML, CSS, JavaScript), is accessible on mobile and desktop, but for the time being can only be used in a browser.
Why use a PWA?
The main reason for using a PWA is the time saved. When you download an application from a store, you go through the following steps:
- Open the store
- Find the application in the store
- Install the application
- Wait for the download
- Open the application
With Progressive Web Apps, the only step to carry out is the last one — which saves a great deal of time. What’s more, a PWA loads quickly, and once open, navigation is smooth.
As its name suggests, a PWA is progressive, which means that it works on every device by making use of the components of the browser or device being used.
Another advantage of PWAs is organic search: since they are developed in HTML just like any other site, it is possible to include metadata in them and therefore to have them indexed.
Over the past several months, PWAs have become very popular: you will find applications developed by Google, Wikipedia and even Facebook!
So how does it work?
Using a service worker and handling push notifications
A service worker is a piece of code that runs alongside your site. It is therefore not executed at the same time as the JavaScript. This method makes it possible to carry out actions on the site even when the user is not in the application — push notifications, for example. Running certain actions through service workers rather than through JavaScript means less code is loaded, and therefore the application is reached faster.
Adding a service worker to your code could not be simpler: it is installed like a JS file. First, you declare your JS script in the HTML, then the service worker (in JS format).
Since service workers are active even while the user is away from the site, it is possible to create push notifications. For Chrome, for example, all you have to do is use the code templates provided by Google and then customise your pushes (for instance: subscribing the user to notifications, sending them if the user performs certain actions, and so on).
Example of a notification displaying “Yay it works” (source: developers.google.com) — CodePen “PWA” by Matthieu (@Matthieu87).
Cache storage and offline mode
Another advantage and important feature of a PWA: caching content. When the user is not connected to the internet, they will still be able to access the application thanks to the cached data. Depending on the browser used, you will be able to cache more or less data: this ranges from 50 MB in Safari to 10% of your hard drive’s free space in Firefox.
To set up offline mode on your PWA, all you have to do is use your browser’s cache API. It is generally accessible in the same place as service workers.
Enabling offline mode in Chrome. (source: developers.google.com)
How can I develop a Progressive Web App?
You do not need advanced programming skills to develop your PWA. You need to know web languages such as HTML/CSS/JavaScript and to understand the principle of an “app shell” page. According to several developer communities, skills in React.js or React Native are additional assets that will help you develop your application more easily.
If you are interested in mobile development, we have other articles on our blog dedicated to this subject.
