How to make a PWA and host in Azure-2

OK so in the previous post we learnt how to create a PWA using plain javascript techniques. In this section, I would explain how to do the same using a tool called “Workbox” to automate the generation of the service worker file. So let’s get right into it.

To follow this section clone this repo and use this repo to follow along

Before you can use Workbox, you would need to have node.js installed which would enable you to use workbox-cli. You can install node.js here.

After you’ve installed node.js, use the command below to install workbox-cli:-

npm install --global workbox-cli

workbox-cli is a command-line tool that lets us configure, generate, and modify service worker files.

Next, delete the codes written in the “service-worker.js” file. Create a new file called “service-workersrc.js”. You can use any name but we would work with “service-wrokersrc.js” in this tutorial.

Next, populate the “service-workersrc.js” file with the code below.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js');

if (workbox) {
  console.log(`Workbox is loaded`);

  workbox.precaching.precacheAndRoute([]);

} else {
  console.log(`Error loading workbox`);
}

Ok, now you might be asking where the importScripts method is coming from. The import script method is a method that is available under the web worker API which allows you to import scripts into the workers’ scope.

Take note of this in the code above:-

• The precacheAndRoute method of the precaching module takes the various route to be cached in an array (precache manifest)

We can do this manually but it would take some time. So to go around this we would use the workbox-cli.

One of the benefits of using the workbox-cli is that it does not only helps to provide the routes to be cached but also purges the old cache when a new file is created or edited.

The precacheAndRoute method makes use of the cache first Strategy. That means that in subsequent page load the service worker would search the cache for responses in the cache and won’t make a request to the server if the response is seen in the cache.

Next, run this command in the command line:-

workbox wizard --injectManifest

Below are the various questions you would see and my replies:-

• what is the root of your web app — “./”
• which file types would you like to precache? — I pressed enter to select all the format listed.
• where’s your existing service worker file? — “service-workersrc.js”
• where would you like your service worker file to be saved? — “service-worker.js”
• where would you like to save these configuration options? — “I pressed enter”

Note:- I shortened the questions above. So its a hint of what you would likely see.

Next, run this “workbox injectManifest workbox-config.js”

This command would populate the precacheAndRoute method of the precaching module with the routes that would be cached.

Check your “workbox-config.js” file and you should see this:-

module.exports = {
  "globDirectory": "./",
  "globPatterns": [
    "**/*.{png,html,json,js,css}"
  ],
  "swDest": "service-worker.js",
  "swSrc": "service-workersrc.js"
};

This file was generated from the workbox-cli and contains configurations that workbox would work with to generate service workers.

Now try to run the server and you should see that your PWA is ready. As you can see workbox simplifies the generation of your service worker.

Please do note that this tutorial just touches the basic setup of the workbox.

So that’s it for this section. In the next post, I would explain how to deploy your PWA on Azure(Microsoft’s Cloud Service).

To go to the next section click this