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

Question

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

in Google Chrome 我的 PWA 工作正常但在控制台中我收到此错误：在其他浏览器中不会出现此错误

Uncaught (in promise) TypeError: Failed to fetch

我真的不知道为什么，运行在开发 mod 中使用 npm 运行开发应用程序我在 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 文件夹结构：

/public
-/fonts
-/images
-favicon.ico
-icon-512x512.png}
-icon.png
-manifest.json
-sw.js

我试图在此视频中做同样的事情。 https://www.youtube.com/watch?v=8enp-acPbRE

谁能帮帮我

Answer 1

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

查看相关主题：https://github.com/GoogleChrome/workbox/issues/2749

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 Chrome

javascript

google-chrome

next.js

progressive-web-apps

next-pwa