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.

Getting Started

There are a couple of prerequisites and requirements you need to have when setting up a PWA.

  1. Secure your website
  2. Check your website for errors
  3. Create your favicons
  4. Configure a site manifest
  5. Introduction to service workers
  6. 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.

Favicon Example

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.

{
  "display": "standalone",
  "icons": [
    {
      "sizes": "144x144",
      "src": "/android-chrome-144x144.png",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "sizes": "192x192",
      "src": "/android-chrome-192x192.png",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "sizes": "512x512",
      "src": "/android-chrome-512x512.png",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "name": "Your App Name",
  "short_name": "Your App Name",
  "description": "A short description of your app...",
  "start_url": "/",
  "scope": "/",
  "theme_color": "#000000",
  "background_color": "#000000"
}

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

The service worker is the main puzzle piece for having a successful PWA. It’s essentially a JavaScript file that runs separately from the main browser thread and is responsible for the following:

  • 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:

  1. Registration: tells the browser where your service worker is located and triggers it to start installing in the background
  2. Installation: Installs the service worker
  3. Activation: If there are any open pages controlled by the previous service worker, the new service worker will enter a waiting or skip state

With the 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 && \
touch service-worker.js

Edit service-worker.js and put in the code below.

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

Running Service Worker in Chrome Dev Tools

Congratulations! - you have now created a valid Progressive Web App (PWA).