Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

1. Get set up

Install project dependencies and explore the app

After you have downloaded the repo, open the news-reader/project/ folder in your preferred text editor. The project/ folder is where you will be working.

Take a moment to look through the code and get familiar with the app's structure. The src/ folder contains the application's source files.

The package.json file specifies the app's development dependencies. You don't need to be familiar with these specific packages, but they're required to build the app. In the command line, navigate to the project/ directory and install these packages:

cd news-reader/project
npm install

After the installation is complete, run the following command to build and serve the app:

npm run serve

The serve command is aliased in package.json to run the gulp dev task. Open gulpfile.js and explore the contents. You don't need to understand all the tasks. The overall build flow (defined by the dev task) is as follows:

The app's images and its root files (index.html and sw.js) are copied directly to a dist/ folder

The CSS files in styles/ and the JS files in scripts/ are processed (minified, compiled for browser support, etc.) and inlined directly into index.html

A development server is started in the dist/ directory

The watch method is configured to rebuild the app and reload the browser as files are updated

You can terminate the development server and watch process at any time by running ctrl + c from the command line.

2. Specification

2.1 Service worker

Features

Precache the app shell files (index.html and all images in the images/ directory)

Dynamically cache calls to the Hacker News API (https://hacker-news.firebaseio.com/v0/*) and serve them with a network-first strategy

Dynamically cache calls to the polyfill CDN (https://cdn.polyfill.io/*) with a stale-while-revalidate strategy

Configure the service worker to call skipWaiting and Clients.claim so that updated service workers will immediately activate and claim all clients

Constraints

The service worker should only be registered if the browser supports service workers, and should register after the page has loaded.

Use workbox-build to inject the precache manifest automatically as part of the gulp build process. Write a gulp task as described in the documentation and add the task to those called in the dist task. The source service worker is src/sw.js and the destination service worker is dist/sw.js.