I can not precache with workbox

I can not precache with workbox.

Now I am trying to cache in workbox's injectManifest mode.

It has been confirmed that the runtime cache described in the file specified by swSrc is working.

However, files named with globDirectory and globPatterns are not precached. Specifically, specifying globPatterns: ['** / *. {Js, css, html, png}'] results in an error.

Please tell me how to get rid of this error.

workbox uses workbox-build.

The following shows each version.

workbox-build: 3.6.3 node: 11.11

It is running on localhost.

injectManifest.js

const workboxBuild = require('workbox-build');

async function injectManifest() {
  try {
    await workboxBuild
      .injectManifest({
        globDirectory: DIST_PUBLIC,
        globPatterns: ['**/*.{js,css,html,png}'],
        swSrc: path.join(DIST_PUBLIC, 'sw.template.js'),
        swDest: path.join(DIST_PUBLIC, 'sw.js'),
      })
      .then(() => {
        console.log('Service worker has been generated.');
      });
  } catch (e) {
    console.log(e);
  }
}

injectManifest();

sw.template.js

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
  workbox.core.skipWaiting();
  workbox.routing.registerRoute(new RegExp('.*.*'), new workbox.strategies.staleWhileRevalidate());
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

Error

AssertionError [ERR_ASSERTION]: Unable to find a place to inject the manifest. Please ensure that your service worker file contains the following:/(\.precacheAndRoute\()\s*\[\s*\]\s*(\)|,)/
    at Object._callee$ (/Users/hoge/web/node_modules/workbox-build/build/entry-points/inject-manifest.js:82:13)
    at tryCatch (/Users/hoge/web/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/hoge/web/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/hoge/web/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/hoge/web/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/hoge/web/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

Please tell me how to get rid of this error.

Solution

This error indicates that injectManifest does not know where to inject the list of resources to be pre-cached in your service worker.

Quoting the documentation:

When workbox injectManifest is run, it looks for a specific string (precaching.precacheAndRoute([]) by default) in your source service worker file. It replaces the empty array with a list of URLs to precache and writes the service worker file to its destination location, based on the configuration options in config.js. The rest of the code in your source service worker is left untouched.

So, most likely, all you have to do get rid of this error is to add the expected line in your service worker template:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
  workbox.core.skipWaiting();
  workbox.precaching.precacheAndRoute([]); // URLs to precache injected by workbox build
  workbox.routing.registerRoute(new RegExp('.*.*'), new workbox.strategies.staleWhileRevalidate());
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}