addToCacheList上的precacheAndRoute获取错误

Question

我已经使用workbox-webpack-plugin创建了PWA和implementef workbox。

当我尝试预缓存文件时，我得到了错误。

我得到的错误(见下图)

Console output

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而卡住了。我在node_modules/workbox-precaching上找不到gulpfile。

下面是我的代码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',
    })
  ],

register.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)
            });
    });

package.json

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

Answer 1

如果我没记错的话，InjectManifest只会替换swSrc文件中第一个出现的self.__WB_MANIFEST。因此，您对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);