4 Things Every Progressive Web App Must Have

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:

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Nice!

Check your email to confirm your subscription.

HTTPS

Web app manifest

Service worker

Responsive design

Table of Contents

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.

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 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 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.