使用工作箱 6 生成 ServiceWorker - 如何从 "workbox-routing" 导入 "registerRoute"？

Question

我已将我的项目升级为使用工作箱 6，并相应地修改了我的代码。注入清单（生成 serviceWorker.js）后，我的浏览器报告错误：

Service worker error TypeError: ServiceWorker script at 
http://127.0.0.1:8080/serviceWorker.js for scope 
http://127.0.0.1:8080/ threw an exception during script evaluation. app.js:218:23

我删除了代码以确定导致错误的原因，现在剩下：

serviceWorker.js（从serviceWroker-base.js生成）

importScripts('workbox-sw.js');
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

const CACHE_DYNAMIC_NAME = 'dynamic-DEBUG-001'

webpack.config.js

const {InjectManifest} = require('workbox-webpack-plugin')
const workboxWebpackInjectPlugin = new InjectManifest({
  swSrc: './serviceWorker.js'
})
// build WEBPACK CONFIG
const config = {}
//...
config.plugins = [
  nodeEnvPlugin,
  firebasePlugin,
  cssExtractPlugin,
  workboxWebpackInjectPlugin,
]
//...
return config

如果我在 serviceWorker.js 中删除 registerRoute 和 StaleWhileRevalidate 的导入，那么 service worker 会成功注册 - 但我无法注册路由。 ;) 我已经安装了 workbox-routing 和 workbox-strategies。

package.json

"scripts": {
  "generate:sw": "workbox injectManifest"
},
"dependencies": {
  ...
  "workbox-routing": "^6.0.2",
  "workbox-strategies": "^6.0.2"
},
"devDependencies": {
  ...
  "webpack": "^4.41.2"
}

generate:sw 是我运行注入清单并创建 serviceWorker.js.

的命令

我怀疑是imoprts没有正确处理？如何在我的 Service Worker 中使用 registerRoute 和 StaleWhileRevalidate？

亲切的问候/K

Answer 1

https://developers.google.com/web/tools/workbox/guides/using-bundlers 中的信息可能会有帮助。

您不需要包含 importScripts('workbox-sw.js');

如果您打算使用预缓存：

你可以运行 InjectManifest 通过 workbox-webpack-plugin 它会负责编译你的 service worker（即内联 ES 模块导入到最终的运行 nable service worker 文件），并根据 webpack build.

self.__WB_MANIFEST

如果您不打算使用预缓存：

您可以添加服务工作者文件，包括 ES 模块导入，作为 webpack 配置中的入口点，这应该处理将 ES 模块导入内联到最终运行可用的服务工作者文件。

如果您已经在使用 webpack，则不需要您的 workbox injectManifest 步骤。见前两点。

使用工作箱 6 生成 ServiceWorker - 如何从 "workbox-routing" 导入 "registerRoute"？

Generate ServiceWorker using workbox 6 - how to import "registerRoute" from "workbox-routing"?

service-worker

webpack-4

workbox