将工作箱构建服务工作者放置在 globDirectory 的子目录中

Question

我正在使用 workbox-build 来生成服务工作者。我的目录结构看起来像这样：

src/
src/a.png
src/index.html
src/Workbox/
src/Workbox/workbox-window.prod.mjs
service-worker/
service-worker/build.js

build.js

，我使用 Node.js 运行，看起来像这样：

const { generateSW } = require("workbox-build");

generateSW({
    globDirectory: "../src/",
    globPatterns: ["**/*"],
    swDest: "../src/Workbox/service-worker.js",
})

这个想法是

build.js

应该生成一个 Service Worker，将其放置在

src/Workbox

中，缓存

src/

中的每个文件。

index.html

看起来像这样：

<html>
    <head>
        <script type="module">
            import { Workbox } from "./Workbox/workbox-window.prod.mjs";
            if ("serviceWorker" in navigator) new Workbox("Workbox/service-worker.js").register();
        </script>
    </head>
    <body></body>
</html>

但是，在加载页面时，我收到错误：

Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://localhost:8000/src/Workbox/a.png","status":404}]

问题很明显：Service Worker 正在尝试缓存一个不存在的文件

src/Workbox/a.png

，而不是文件

src/a.png

。我原本预计只有

globDirectory

与缓存的文件位置相关，但看起来

swDest

也相关。如果我将

swDest

更改为

"../src/service-worker.js"

并对

index.html

进行适当的修改，那么所有文件都会按预期预缓存。但我真的希望将

service-worker.js

放置在

src/Workbox

子目录中，而不是

src/

中。这可能吗？

Answer 1

如果将来有人遇到同样的问题，这是不可能的。原因是由于范围限制，Service Worker 必须位于顶级范围内。

将工作箱构建服务工作者放置在 globDirectory 的子目录中

问题描述投票：0回答：1

1个回答

最新问题

将工作箱构建服务工作者放置在 globDirectory 的子目录中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1