在vercel中部署next-pwa(Next.js)应用程序时，得到"Uncaught (in promise) bad-precaching response“
当我在vercel中部署我的应用程序时，我的next-pwa应用程序得到了Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://myapp.vercel.app/_error","status":404}]，service worker不工作，尽管它在本地主机上运行良好，没有错误。我在这里遵循了https://www.npmjs.com/package/next-pwa的基本用法，但我使用firebase-messaging-sw.js来使用云消息传递，并使用sw.js(服务工作者)来处理pwa。而且目前我还没有_error.js，这在上面的错误中提到过。我认为这些事情可能会影响错误，但到目前为止我还不知道。实际上，我在我的项目中添加了一次_error.js，但它并没有做任何更改……有人能帮助解决这个问题吗？提前谢谢你！
根目录中的next.config.js
const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public",
},
});公共目录中的图标(图标在manifest.json目录下，在public目录下)
{
"name": "myapp",
"short_name": "myapp",
"description": "myapp",
"start_url": "/",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff",
"orientation": "any",
"icons": [
{
"src": "/icons/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
,,,,,,,,,,,,,,(some more icons),,,,,,,,,,,,,,
{
"src": "/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<meta
name="msapplication-square70x70logo"
content="/icons/site-tile-70x70.png"
/>
<meta
name="msapplication-square150x150logo"
content="/icons/site-tile-150x150.png"
/>
<meta
name="msapplication-wide310x150logo"
content="/icons/site-tile-310x150.png"
/>
<meta
name="msapplication-square310x310logo"
content="/icons/site-tile-310x310.png"
/>
<meta name="msapplication-TileColor" content="#000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#000" />
<meta name="apple-mobile-web-app-title" content="myapp" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/icons/apple-touch-icon-180x180.png"
/>
<meta name="application-name" content="myapp" />
<meta name="theme-color" content="#fff" />
<meta name="description" content="myapp" />
<link rel="icon" sizes="192x192" href="/icons/icon-192x192.png" />
<link rel="icon" href="/icons/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@reduxjs/toolkit": "^1.5.0",
"@tailwindcss/aspect-ratio": "^0.2.0",
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/line-clamp": "^0.2.0",
"@tailwindui/react": "^0.1.1",
"autoprefixer": "^10.2.4",
"firebase": "^8.2.5",
"localforage": "^1.9.0",
"moment": "^2.29.1",
"next": "^10.1.2",
"next-pwa": "^5.1.4",
"nookies": "^2.5.2",
"nprogress": "^0.2.0",
"postcss": "^8.2.4",
"react": "17.0.1",
"react-dates": "^21.8.0",
"react-dom": "17.0.1",
"react-flip-move": "^3.0.4",
"react-redux": "^7.2.2",
"tailwindcss": "^2.0.2",
"terser-webpack-plugin": "^5.1.1"
}
}回答 1
Stack Overflow用户
发布于 2021-04-07 09:01:54
通过更新2021年4月7日发布的next-pwa 5.2.0解决了此问题。
https://stackoverflow.com/questions/66965384
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号