Question

我正在尝试使用Workbox.injectManifest来生成服务工作者，但是我的服务工作者的预缓存清单路径问题没有正确生成。

我的Webpack output.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中，这是{{ 1}}。问题是指向生成的sw.js中清单的路径是：

./scripts/app/dist

这是poiting到sw.js的位置，它位于站点根目录下，无法找到。这是一个错误或我的东西;我没有正确配置？我尝试过使用'importsDirectory'，但只是将清单移到另一个位置，而sw.js上的路径仍然是错误的。

更新

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

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

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

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

workbox.precaching.precacheAndRoute([])

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

Answer 1

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

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

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

根据您的swDest值，我怀疑您的importationDirectory可能需要值为../../../。

错误的清除预先缓存位置

1 个答案: