文章/答案/技术大牛

发布

社区首页 >问答首页 >TypeError:未能在Chrome中使用next-pwa获取Nextjs

问TypeError:未能在Chrome中使用next-pwa获取Nextjs
EN

Stack Overflow用户

提问于 2021-03-09 23:56:01

回答 1查看 1.2K关注 0票数 3

嗨，我正在开发一个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中，我的PWA工作正常，但是在控制台中我得到了这个错误:在其他浏览器中，这个错误不会出现

Uncaught (in promise) TypeError: Failed to fetch

我真的不知道为什么，使用npm在dev mod中运行这个应用程序，我会得到以下的信息：

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

有人能帮我吗？

javascript

google-chrome

next.js

progressive-web-apps

next-pwa

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-20 14:56:07

我在使用Chrome 89和Workbox 6.1.1时遇到了同样的错误。

在将Chrome更新为90 (将Workbox更新为6.1.5)后，此错误将消失。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66556441

复制

相似问题

问TypeError:未能在Chrome中使用next-pwa获取Nextjs
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeError:未能在Chrome中使用next-pwa获取NextjsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeError:未能在Chrome中使用next-pwa获取Nextjs
EN