4

我已经使用workbox-webpack-plugin.

当我尝试预缓存文件时出现错误。

我得到的错误（见下图）

控制台输出

sw.js:1 Uncaught TypeError: e is not iterable
    at d.addToCacheList (sw.js:1)
    at sw.js:1
    at sw.js:1
    at sw.js:1

虽然self.__WB_MANIFEST正确返回

0: {revision: "8601238f233fac234d7baf4d32a932d8", url: "favicon.ico"}
10: {revision: "70d6d945809b3a4bde074fb5a8e1a6ac", url: "register.js"}

我尝试调试workbox-precaching但由于没有提供 gulpfile 而被卡住。我找不到 gulpfile node_modules/workbox-precaching。

这里是我的代码 src/sw.js 的详细信息

import { precacheAndRoute } from 'workbox-precaching';

console.log(self.__WB_MANIFEST)
precacheAndRoute(self.__WB_MANIFEST);

webpack.config.js

 plugins: [
    ...
    new WorkboxPlugin.InjectManifest({
      swSrc: './src/sw.js',
      swDest: 'sw.js',
    })
  ],

注册.js

if ("serviceWorker" in navigator) {
    window.addEventListener("load", function () {
        navigator.serviceWorker
            .register("sw.js")
            .then(function (registration) {
                console.log(location.href, registration.scope);
            })
            .catch(function (error) {
                console.log(error)
            });
    });

包.json

    "webpack": "^5.4.0",
    "webpack-cli": "3.3.12",
    "workbox-webpack-plugin": "^5.1.4
4

1 回答 1

1

如果我记得，InjectManifest只会替换文件中第一次出现self.__WB_MANIFEST的swSrc。因此，您的调用precacheAndRoute(self.__WB_MANIFEST)不会得到正确的替换，而是self.__WB_MANIFEST（这是undefined不可迭代的）将被传递给precacheAndRoute().

如果你想在调用之前对清单做一些事情precacheAndRoute()，比如记录它，那么你可以这样做：

const manifest = self.__WB_MANIFEST;

// Use manifest however you'd like:
console.log(manifest);
precacheAndRoute(manifest);
于 2020-11-20T16:38:04.773 回答