Question

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

现在我正在尝试以工作箱的injectManifest模式进行缓存。

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

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

请告诉我如何消除此错误。

workbox使用workbox-build。

以下显示了每个版本。

workbox-build: 3.6.3 node: 11.11

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

错误

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不知道将要预先缓存在服务工作者中的资源列表注入哪里。

引用documentation：

运行工作箱injectManifest时，它将查找特定的字符串（默认为precaching.precacheAndRoute([])）工作文件。它将空数组替换为以下网址的列表：预缓存并将服务工作者文件写入其目的地位置，基于config.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.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 ?`);
}

我无法使用工作箱预缓存

injectManifest.js

sw.template.js

错误

1 个答案: