javascript - precacheAndRoute 在 addToCacheList 上出错

Question

我已经使用 workbox-webpack-plugin 创建了 PWA 和实现工作箱.
当我尝试预缓存文件时出现错误。
我得到的错误(见下图)
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 .

这是我的代码的详细信息
源代码/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

Answer 1

如果我记得，InjectManifest只会替换第一次出现的 self.__WB_MANIFEST在您的 swSrc文件。您调用 precacheAndRoute(self.__WB_MANIFEST)因此不会得到正确的替换，而是 self.__WB_MANIFEST (这是 undefined 并且不可迭代)将传递给 precacheAndRoute() .
如果您想在调用 precacheAndRoute() 之前对 list 执行某些操作，比如记录它，那么你可以这样做:

const manifest = self.__WB_MANIFEST;

// Use manifest however you'd like:
console.log(manifest);
precacheAndRoute(manifest);