Chris Love [Chris Love] - Progressive Web Application Development by Example

Workbox is a collection of library and node modules. To get the full breadth of the tool, you need to install the node modules globally and clone the GitHub repository. Cloning the library is not required, but I recommend it so that you can study how the library is structured:

> npm install -g workbox-cli

The Workbox node modules include command-line interfaces to help you scaffold your service worker and Workbox components. I will cover how to use the CLI as I explain the different parts of the tool.

The first step you need to take after installing the CLI is to run the Workbox wizard:

> workbox wizard

This will start a series of questions about your application:

This will create a configuration file that the workbox-cli tool can use during additional steps. This is what it generates when run and choosing the default options for the PWA ticket app:

module.exports = { "globDirectory": "C:\Source Code\PWA\pwa-ticket\www\public", "globPatterns": [ "**/*.{html,css,eot,svg,ttf,woff,woff2,png,txt,jpg,json,js,gif,manifest}" ], "swDest": "C:\Source Code\PWA\pwa-ticket\www\public\sw.js" };

The CLI commands use the settings in the configuration file to find all the files matching the globPatterns and creates an entry in the precache array. I will cover the precache list format in the next section:

I don't advise precaching 600 files and 11 MB like this example demonstrates. Instead, you should customize the configuration to trim the list to a proper amount. In this case, the PWA tickets app has all the ticket barcodes generated as part of the build process, so there is data to develop against.

I'll circle back around to show you how to customize the configuration file to maximize your Workbox service worker experience. The configuration file and the workbox-cli commands to compose your service worker are key to using the library.

You are free to use the Workbox library any way you see fit. The configuration is for the command-line tools. If you are not familiar with the different nuances to how Workbox works, then I suggest starting with the wizard first.

Once you have mastered or at least feel very comfortable with how the Workbox library works, you can start integrating it by hand. It all starts with importing the library to your service worker.

In previous chapters, I demonstrated how you can use importScripts to reference additional scripts within your service worker. You will need to reference the workbox library using importScripts:

self.importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js", "js/libs/2ae25530a0dd28f30ca44f5182f0de61.min.js", "js/app/libs/e392a867bee507b90b366637460259aa.min.js", "sw/sw-push-manager.js" );

This example shows how I replaced some of the supporting libraries in the PWA tickets app with a reference to the CDN hosted Workbox script. The library is hosted in the Google Cloud CDN.

You can also use the workbox-cli copyLibrary command to copy the library to your site. The library is not a single file, but a collection of many files containing different JavaScript classes. These files are all copied to the target directory. I used the /sw folder in the PWA tickets app.

A folder with the current Workbox version number is created within the target folder. To add a reference to the library, you need to reference the workbox-sw.js file:

self.importScripts("sw/workbox-v3.2.0/workbox-sw.js", "js/libs/2ae25530a0dd28f30ca44f5182f0de61.min.js", "js/app/libs/e392a867bee507b90b366637460259aa.min.js", "sw/sw-push-manager.js" );

In previous Workbox versions, the entire library was loaded, which is a lot of code. This has been improved, so that now only the files needed by your service worker are loaded, reducing the payload and required storage. The 3.2 version I am using for this example has 23 different files or classes.

If you look in the folder that's created by the copyFiles method, you will see more. There are two versions for each class, production and debug. There are also source map files as well. I will show you how to toggle which versions are used as well as how to tell Workbox how to find the local modules a little later.