Setting Up a PWA

Step 1

First, you’ll need to set up a .webmanifest file on your directory and add a link in your HTML to access your web manifest file, similar to what you do with your CSS style sheet, within the head tag.

The web manifest is a JSON object that will serve as a guide to your browser for the downloaded app. It should contain basic information on your app like name, URL, icons, etc.

Step 2

The next step you’ll take is to check if the browser supports a service worker, and if it does, then register it.

There are a couple of ways you can do this step. If you are using vanilla JS, you’ll add an event listener on load to run the check and then register the service worker. In the instances in which you’re using a framework, like React, you’ll add a script that runs a similar logic to your main HTML file, outside of the body tag.

It is best practice to update your service worker on every reload of your browser during development mode, so make sure to check that on your browser’s developer tools.

Step 3

Finally you’ll set up your service worker. First, you’ll create a serviceWorker.js file in your project’s directory. This file is where you’ll add all of the main functionalities to your service worker. In order to follow the service worker’s life cycle, you’ll need three main event listeners. Keep in mind, you can always add more to configure your service worker.

3.1 — Install

The first event your service worker will be listening to is install , which is the first thing it does after it’s been registered. Here is where you’ll create a cache in the browser and store all the static files, allowing your app to run offline.

Keep in mind that the keyword self here gives you access to the service worker’s global scope and the methods and objects available to it.

3.2 — Activate

The second event the service worker will be listening to is activate , which is triggered as soon as the installation is complete. Although it’s activated, the application will only use it in the next reload.

To make sure the service worker is used in the current session, you’ll have to use the clients object, which gives you access to methods on the current executable context. By calling the method claim , the service worker becomes the controller of that context.

3.3 — Fetch

Finally, you’ll add an event listener for fetch requests, which is where your service worker will either direct the request to the network or to your cache, emulating the offline mode.

For this event, break down the traffic by checking where it’s requesting information from. If it’s data from your own application, like your static files, serve them from the cache you created before. In all other cases, it’s requiring data from the network, and that’s when you’ll need to add the conditional statement for the offline mode. This should make your service worker fetch data from the cache in case the network fails to respond.

It’s important to implement this by checking your browser’s developer tools application tab during all these steps, so you can understand a little better what each of them is actually doing.

You’ll be able to see your service worker, the cache storage, and the manifest. Once you’re done, you can add the application to your home screen by clicking on the “Add to home screen” link on your application’s manifest inside the developer tools.