Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

E-Commerce Lab 1: Create a Service Worker

Overview

What you will do

  • Register a service worker in your app
  • Cache the application shell on service worker install
  • Intercept network requests and serve responses from the cache
  • Remove unused caches on service worker activation

What you should know

What you will need

1. Get set up

Clone the E-Commerce lab repository with Git using the following command:

git clone https://github.com/google-developer-training/pwa-ecommerce-demo.git

Navigate into the cloned repo:

cd pwa-ecommerce-demo

If you have a text editor that lets you open a project, then open the project folder in the ecommerce-demo folder. This will make it easier to stay organized. Otherwise, open the folder in your computer's file system. The project folder is where you will build the app.

In a command window at the project folder, run the following command to install the project dependencies (open the package.json file to see a list of the dependencies):

npm install

Then run the following:

npm run serve

This runs the default task in gulpfile.babel.js which copies the project files to the appropriate folder and starts a server. Open your browser and navigate to localhost:8080. The app is a mock furniture website, "Modern Furniture Store". Several furniture items should display on the front page.

When the app opens, confirm that a service worker is not registered at local host by checking developer tools. If there is a service worker at localhost, unregister it so it doesn't interfere with the lab.

2. Register the service worker

To complete TODO SW-2 in app/scripts/main.js, write the code to register the service worker at service-worker.js. The code should include a check for whether service worker is supported by the browser. Remember to save the file when you have finished.

3. Cache the application shell

To complete TODO SW-3 in app/service-worker.js, write the code to cache the following list of files in the service worker install event. Name the cache e-commerce-v1.

'/',
'index.html',
'scripts/main.min.js',
'styles/main.css',
'images/products/BarrelChair.jpg',
'images/products/C10.jpg',
'images/products/Cl2.jpg',
'images/products/CP03_blue.jpg',
'images/products/CPC_RECYCLED.jpg',
'images/products/CPFS.jpg',
'images/products/CPO2_red.jpg',
'images/products/CPT.jpg',
'images/products/CS1.jpg',
'images/touch/apple-touch-icon.png',
'images/touch/chrome-touch-icon-192x192.png',
'images/touch/icon-128x128.png',
'images/touch/ms-touch-icon-144x144-precomposed.png',
'images/about-hero-image.jpg',
'images/delete.svg',
'images/footer-background.png',
'images/hamburger.svg',
'images/header-bg.jpg',
'images/logo.png'

Save the file.

4. Use the cache-first strategy

To complete TODO SW-4 in app/service-worker.js, write the code to respond to fetch requests with the " cache, falling back to network" strategy. First, look for the response in the cache and if it exists, respond with the matching file. If the file does not exist, request the file from the network and cache a clone of the response. Save the file when you have completed this step.

5. Delete outdated caches

To complete TODO SW-5 in app/service-worker.js, write the code to delete unused caches in the activate event handler. You should create a "whitelist" of caches currently in use that should not be deleted (such as the e-commerce-v1 cache). Use caches.keys() to get a list of the cache names. Then, inside Promise.all, map the array containing the cache names to a function that deletes each cache not in the whitelist. Save the file when you have completed this step.

6. Test it out

To test the app, close any open instances of the app in your browser and stop the local server (ctrl+c).

Run the following in the command line to clean out the old files in the dist folder, rebuild it, and serve the app:

npm run serve

Open the browser and navigate to localhost:8080. Inspect the cache to make sure that the specified files are cached when the service worker is installed. Take the app offline and refresh the page. The app should load normally!

Congratulations!

You have added a service worker to the E-Commerce App. In the sw-precache and sw-toolbox lab, we will generate a service worker in our build process to accomplish the same result with less code.