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
- Familiarity with the concept and basic syntax of ES2015 Promises
- Have completed Lab: Scripting the service worker
- Have completed Lab: Fetch API
- Have completed Lab: Caching files with Service Worker
What you will need
- Computer with terminal/shell access
- Connection to the internet
- A browser that supports service workers
- A text editor
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:
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):
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
'/', '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 (
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!
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.