javascript - Uncaught (in promise) TypeError: Failed to fetch Nextjs PWA using next-pwa in Chrome
问题描述
嗨,我正在研究 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
任何人都可以帮助我吗
解决方案
我在使用 Chrome89
和 Workbox时遇到了同样的错误6.1.1
。
将 Chrome 更新为90
(和 Workbox 更新为6.1.5
)后,此错误消失了。
推荐阅读
- ios - 无效并重新启动后,Swift计时器将不起作用
- javascript - 循环遍历html元素中的子元素
- api - 如何在 RingCentral 沙箱中为 Outbound Fax API 创建第二个传真用户扩展?
- java - 如何制作类似于此参考的登录布局?
- postgresql - Postgres DDL 错误:'“用户”或附近的语法错误'
- laravel - 在 api 路由文件中检索标头值在 Laravel 中不起作用
- android-tv - 知道焦点在 Android TV 的最左侧视图
- python - super(subclass, class).__new__(class) 做什么?
- wordpress - How to make an input allows html tags in wordpress website
- javascript - 如何将数据库列标题名称与下拉菜单中的值匹配