Progressive Web App (PWA)

Progressive Web App banner

What is a Progressive Web App?

Progressive web apps are mobile websites that are built using web technology, but it acts and looks like a mobile application. Recent improvements to the browser and the availability of service workers, as well as the Cache and Push APIs, have allowed web developers to allow users to install web applications on their home screen, receive push notifications, and even work offline.

Why use PWA?

Developing a basic PWA

*Progressive Web Apps must be served from a secure origin (https).

To begin with, this will be file structure:

PWA file structure

Generating the icons and manifest file

The icons to match all devices and the manifest can be created on

Generated PWA files

Creating the App

Generated code added to the site head
PWA sample manifest file
Manifest showed in Chrome Dev Tools

Adding the Service worker

You can download a sample service worker code from

Registering service worker
Sample service worker code
Service worker defined in Chrome Dev tools

Here’s a lighthouse generated report on your mini-project of progressive web apps.

Chrome progressive web apps scores
Next Go Back