Thursday, 5 April, 2018 UTC
Summary
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. It looks and behaves as if it is a mobile app and can be kinda installed. In this post, we'll be looking at 4 things every progressive web apps must have.
Let’s start by listing each of them, then we’ll go over them one after the other:
- HTTPS
- Web app manifest
- Service worker
- Responsive design
Now let’s go over each of them.
HTTPS
A PWA must be safe and secure, hence the requirement to be served on HTTPS instead of HTTP. Gone are the days when getting an SSL certificate for a website is expensive and tedious. Folks like Let’s Encrypt and Cloudflare are a game changer as you can get an SSL certificate for your website in a matter of minutes and completely free.
Every modern website today should be running on HTTPS, you will be doing your app such a great good by serving it on HTTPS.
Web App Manifest
The web app manifest is simply a JSON (
manifest.json) file that is used to describe the application. The web app manifest provides information about an application (such as name, icon, and description etc.). The purpose of the manifest is to install web applications to the home screen of a device, providing users with quicker access and a richer experience such as theme, splash screen and the ability to run the app in full-screen mode and as a standalone application.A typical web app manifest can be as below:
// manifest.json
{
"name": "DemoPWA",
"short_name": "DemoPWA",
"display": "standalone",
"background_color": "#fff",
"description": "A demo progressive web app",
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "images/touch/homescreen72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "images/touch/homescreen96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "images/touch/homescreen144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/touch/homescreen168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "images/touch/homescreen192.png",
"sizes": "192x192",
"type": "image/png"
}]
}A service worker is vital to allow a PWA. So what is a service worker? A service worker is a script that runs in the background making the decision to serve network or cached content based on availability. Service worker provides offline support for applications through caching, which is essential for a PWA. In addition to the offline functionality, a service work also provides support for other features such as push notifications, and background sync.
It is important to mention that service workers can only be registered on pages served over HTTPS. Though it can be registered on
Responsive Design
localhost while in development, as soon as you deploy to a live server, it will require HTTPS and not HTTP.Since a PWA can be somewhat installed on a device (mobile phone or tablet etc.), it should be responsive enough so as to display properly irrespective of the devices it is being viewed on. With the numerous CSS frameworks out there that support responsive design, making your app responsive on major screen sizes should be easy.
Conclusion
There we go! We have seen the things every progressive web apps must have. For further reading, check out progressive web app checklist.
In my next post, we'll be looking at how to build a progressive web app with Nuxt.js. So stay tuned!