问题描述
嗨，我正在开发 Nextjs 项目，我尝试使用 next-pwa 将其转换为 PWA，首先我创建了 next.config.js
const withPWA = require('next-pwa');
module.exports = withPWA({
pwa: {
dest: 'public',}
});
然后创建 manifest.json
{
"name": "PRONTO APP","short_name": "PRONTO","icons": [
{
"src": "/icon.png","sizes": "128x128","type": "image/png"
},{
"src": "/icon-512x512.png","sizes": "512x512","type": "image/png"
}
],"theme_color": "#FFFFFF","background_color": "#FFFFFF","start_url": "/","display": "standalone","orientation": "portrait"
}
然后我在页面中的 de _document 文件中添加元数据
import Document,{ Html,Head,Main,NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/icon.png" />
<Meta name='theme-color' content="#fff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
};
}
export default MyDocument;
但是当我跑步时：
npm build dev
npm start
在 Google Chrome 中，我的 PWA 工作正常，但在控制台中出现此错误： 在其他浏览器中不会出现此错误
Uncaught (in promise) TypeError: Failed to fetch
我真的不知道为什么，使用 npm run dev 在 dev mod 中运行应用程序，我在 chrome 中收到以下消息：
workBox Router is responding to: /
workBox Network request for '/' threw an error. TypeError: Failed to fetch
workBox Using NetworkOnly to respond to '/'
Uncaught (in promise) TypeError: Failed to fetch
这是我的公共文件夹结构：
/public
-/fonts
-/images
-favicon.ico
-icon-512x512.png}
-icon.png
-manifest.json
-sw.js
我试图在这个视频中做同样的事情。 https://www.youtube.com/watch?v=8enp-acPbRE
有人可以帮我吗
解决方法
我在使用 Chrome 89 和 Workbox 6.1.1 时遇到了同样的错误。
将 Chrome 更新为 90（并将 Workbox 更新为 6.1.5）后，此错误消失了。