Uncaught (in promise) TypeError: Failed to fetch Nextjs PWA using next-pwa in Chrome答案

【问题标题】：Uncaught (in promise) TypeError: Failed to fetch Nextjs PWA using next-pwa in ChromeUncaught (in promise) TypeError: Failed to fetch Nextjs PWA using next-pwa in Chrome
【发布时间】：2021-03-09 23:56:01
【问题描述】：

您好，我正在开发 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

谁能帮帮我

【问题讨论】：

可能与某些扩展有关，例如启用了 adblock，就像这里 stackoverflow.com/questions/58257586/…
我喜欢广告屏蔽的建议。您是否尝试过使用 chrome devtools 停止异常？
我在浏览器中有 0 个扩展，我禁用了默认的 chrome 添加块进行测试，并且该错误仍然显示在控制台中:(

标签： javascript google-chrome next.js progressive-web-apps next-pwa

【解决方案1】：

我在使用 Chrome 89 和 Workbox 6.1.1 时遇到了同样的错误。
将 Chrome 更新为 90（并将 Workbox 更新为 6.1.5）后，此错误消失了。

【讨论】：