Beginners Guide to Creating a Progressive Web App (PWA)
Progressive Web Apps (PWA) offer the best of both worlds: they can act and function as well as a native app while still behaving like a responsive website.
Progressive Web Apps provide an installable, app-like experience on desktop and mobile devices that are built and delivered directly via the web.
If you’re building a web app today, you’re already on the right path to building a Progressive Web App.
There are a couple of prerequisites and requirements you need to have when setting up a PWA.
- Secure your website
- Check your website for errors
- Create your favicons
- Configure a site manifest
- Introduction to service workers
- Create the service worker
Above are the key ingredients to building a successful PWA.
Secure Your Website
There are plenty of free options for securing your website via
https://. A couple include hosting your website on Google Firebase or Github Pages.
If your website is already secure, proceed to the next step.
Check Your Website for Errors
Pop open the Chrome Dev tools on your website (
CTRL + SHIFT + I on Mac) or
F12 on Windows/Linux.
Make sure there are no errors in the
Console tab. If so, correct them before proceeding.
Create Your Favicons
If you haven’t designed a favicon yet, I highly recommend using Figma to do this. Figma is a free online tool that helps you create, test, and ship better designs from start to finish.
My recommendation is to start with a
200px x 200px box as your canvas. Then put in a logo or text in the middle and center it appropriately.
Below is an example you can use.
Now we can generate the favicons for all platforms using an online tool called Real Favicon Generator. Select your Favicon image from your computer and fill in the required information for each platform (app name, colours, etc).
Generate your Favicons and HTML code and wait a few moments.
Follow the instructions on the final screen and validate your favicon to make sure it’s working as expected.
Configure a Site Manifest
This step will partially be taken care of from the Real Favicon Generator, but you will need to amend a few more properties within the
site.manifest file to complete it.
Below is a sample
site.manifest file you can use - don’t forget to update the name, description, start_url, scope (if required) and colours.
"name": "Your App Name",
"short_name": "Your App Name",
"description": "A short description of your app...",
Let’s break down the properties before proceeding to setting up the service worker.
name: the name used in the application install prompt
short_name: the name used on the user’s home screen, launcher
start_url: the start URL when your application is launched
display: allows us to customise what browser UI is shown when your application is launched. The most used value is
standalone which opens the app in a full screen, standalone native app like experience
background_color: the background colour of the splash screen when the application is launched
theme_color: sets the color of the top toolbar
orientation: it allows to enforce a specific orientation
scope: defines the navigation scope of the web application’s context
icons: when a user adds your site to their home screen, this is the icon they will generally see
maskable: this will ensure your app icon fills out the full shape of the launcher icon
Introduction to Service Workers
- Intercepting network requests
- Caching or retrieving resources from the cache
- Delivering push messages
Service worker lifecycle
The service worker lifecycle is broken up into 3 parts:
- Registration: tells the browser where your service worker is located and triggers it to start installing in the background
- Installation: Installs the service worker
- Activation: If there are any open pages controlled by the previous service worker, the new service worker will enter a waiting or skip state
activation state, you can configure your service worker to
skipWaiting which will install the new service worker immediately.
The other option is to use
waitUntil which tells the browser not to terminate the service worker until all work is complete.
I found the
skipWaiting method to be the most reliable on Android and iOS devices.
Create the service worker
Start off by creating 2 files on the root of your website.
touch sw.js && \
service-worker.js and put in the code below.
sw.js and add the following code in below.
Update your website HTML to include the below script referencing to the service worker code:
<script src="/service-worker.js" defer></script>
Now validate it’s all working, by popping open the Chrome Dev Tools and clicking on the
Application tab. Go to the
Service Workers option and make sure the status is active and running.
Congratulations! - you have now created a valid Progressive Web App (PWA).