我已经使用 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',
})
],
注册.jsif ("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
最佳答案
如果我记得,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);
关于javascript - precacheAndRoute 在 addToCacheList 上出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64924097/