使用npm包workbox-core和workbox-routing

Question

我试图弄清楚如何使用workbox-core和workbox-routing。

注意我使用gulp + browserify包使我的代码在我的浏览器上运行。

我用纱线下载了包裹：

yarn add --dev workbox-core@4.* workbox-routing@4.*

哪个工作正常。服务工作者已正确安装，进一步重新加载将跳过等待。

然后我在服务工作者中写了这个：

import { workbox } from "workbox-core";

workbox.core.clientsClaim();
workbox.core.skipWaiting();

然后我尝试添加路由：

import { workbox } from "workbox-core";
import { registerRoute } from "workbox-routing";

workbox.core.clientsClaim();
workbox.core.skipWaiting();

但是我在DevTools中想出了这个错误：

未捕获的ReferenceError：未定义工作箱

所以我想在某些时候workbox-routing需要workbox-core才能工作，因为这是错误堆栈跟踪中涉及的代码：

e.setDefaultHandler=(e=>{u().setDefaultHandler(e)}),e}({},workbox.core._private,workbox.core._private)},{}],3:[function(e,t,r){"use strict";var n=e("workbox-core");e("workbox-routing");n.workbox&&(n.workbox.core.clientsClaim(),n.workbox.core.skipWaiting(),console.log("routing",n.workbox))},{"workbox-core":1,"workbox-routing":2}]},{},[3]);

题

如何在节点中将workbox与其组件（路由，策略等）一起使用？

替代方法

以下是我实际采取的解决此问题的方法。我发现这并没有利用workbox- *提供的分离组件，但这具有工作的优点......

import "workbox-sw";
import { workbox as workboxCore } from "workbox-core";

const routes = ["/", "/nous-trouver", "/mentions-legales", "/produit"];

const assetsStrategy = new workbox.strategies.CacheFirst({
    cacheName: "assets-v5"
});

// Main
workboxCore.core.clientsClaim();
workboxCore.core.skipWaiting();

workbox.routing.registerRoute(
    new RegExp(".*(js|css|jpg|jpeg|png|svg|webp|eot|ttf|woff|woff2)$"),
    assetsStrategy
);

for (const route of routes) {
    workbox.routing.registerRoute(route, assetsStrategy);
}

Answer 1

你有没有看过这个Using Bundlers (webpack/Rollup) with Workbox指南中的指导？

我不确定Browserify是否能够在创建自定义捆绑包时遵循所有依赖项，并建议尝试使用Rollup或webpack。