Try precache files on Workbox documents

At last post, I try to getting start Workbox. Today, I'll try to use precache feature by Workbox.
Official docs: Precache Files

Current status

For now, we can cache some files by Workbox. But when you access the page as offline, your page does not showing.

Let's start to show the page in offline.

Define precached files

Workbox can define precache files by workbox.precaching.precacheAndRoute().So we update sw.js to add following codes.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
if (workbox) {
  registerRoutes()
  workbox.precaching.precacheAndRoute([
    { url: '/scripts/app.js', revision: '383676' },
    { url: '/css/style.css', revision: '383676' },
    { url: '/index.html', revision: '383676' },
  ]);
} else {
  console.log('Oh, workbox did not load')
}

Access the page by offline

After update sw.js,

let's reload the page.(You have to remove browser cache).After reload the page, it will be precached. And when you reload as offline, you can still see the page.

Why the style.css and app.js happened error ? Probably the reason is that these files cache strategies are not cacheFirst. I think the workbox try to get these files from Network at first. And when fail to get them, they will get from precache.