我无法使用工作箱进行预缓存

Question

我无法使用 workbox 进行预缓存。

现在我尝试在 workbox 的 injectManifest 模式下缓存。

已确认swSrc指定的文件中描述的运行时缓存正在工作。

但是，不会预缓存以 globDirectory 和 globPatterns 命名的文件。具体来说，指定 globPatterns: ['** / *. {Js, css, html, png}'] 会导致错误。

请告诉我如何摆脱这个错误。

workbox 使用 workbox-build。

以下为各个版本。

workbox-build: 3.6.3 node: 11.11

在本地主机上是运行。

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 `);
}

错误

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

请告诉我如何摆脱这个错误。

Answer 1

此错误表明 injectManifest 不知道将资源列表注入到您的 service worker 中的何处 pre-cached。

引用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.

因此，最有可能的是，消除此错误所需要做的就是在服务工作人员模板中添加预期的行：

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 `);
}

我无法使用工作箱进行预缓存

I can not precache with workbox

service-worker

workbox

injectManifest.js

sw.template.js

错误