5

我正在尝试使用 Workbox.injectManifest 生成服务工作者，但我的服务工作者的预缓存清单路径未正确生成时遇到问题。

我的 Webpackoutput.path是 'path.resolve('./scripts/app/dist')' 和我的 Workbox 配置：

new WorkboxPlugin.InjectManifest({
        swSrc: path.resolve("./scripts/app/src/service-worker.js"),
        swDest: "../../../sw.js",        
        globDirectory: path.resolve("./"),
        globPatterns: [
            "scripts/**/*.js",
            "fonts/**/*.{eot,ttf,woff,woff2,otf}",
            "images/**/*.{png,jpg,svg,gif,ico}",
            "styles/**/*.css"
        ]
    });

因为默认情况下，Workbox 在 output.path 中创建 sw.js，我希望它在我的站点的根目录上，../../../sw.js 但预缓存清单将保留在 output.path 中，这是./scripts/app/dist. 问题是生成的 sw.js 中指向清单的路径是：

importScripts("precache-manifest.472387a6bbb5e3e8f5e8392d628202d5.js", "https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");

那是指向 sw.js 所在的位置，它位于站点根目录上并且无法找到。这是错误还是我没有正确配置？我曾尝试使用“importsDirectory”，但这只是将清单移动到另一个位置，而 sw.js 上的路径仍然是错误的。

更新

我的服务工作者模板中有这个：

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

workbox.precaching.precacheAndRoute([])

workbox.routing.registerRoute( .......

但是当我构建时，不会填充数组并创建外部清单：这是插件创建的：

importScripts("precache-manifest.aa4b439ba2589f9d3cf0c56e1b06323d.js", "https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");

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

workbox.precaching.precacheAndRoute([])

workbox.routing.registerRoute(
4

1 回答 1

1

初始化 InjectManifest 时需要设置importsDirectory参数。

例如，我希望我的 precache-manifest 位于公共文件夹中，因此我的配置如下所示：

new InjectManifest({
    swSrc: './resources/js/sw.js',
    swDest: '../sw.js',
    importsDirectory: '../'
})

根据您的 swDest 值，我怀疑您可能需要../../../为您的 importsDirectory 设置一个值。

于 2020-01-17T14:01:05.117 回答