问题描述
在 vercel 中部署我的应用程序时,我的 next-pwa 应用程序获得了 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://myapp.vercel.app/_error","status":404}]
并且 service worker 不起作用,尽管它在 localhost 中运行良好,没有错误。
我在 https://www.npmjs.com/package/next-pwa 中遵循了基本用法,但我使用 firebase-messaging-sw.js 来使用 cloud-messaging 以及 sw.js(service worker) for pwa。另外目前我没有 _error.js,这是在上面的错误中提到的。我认为这些事情可能会影响错误,但到目前为止我一无所知。实际上,我曾将 _error.js 添加到我的项目中,但它没有做任何更改...任何人都可以帮助解决这个问题吗?提前致谢!
根目录下的next.config.js
const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public",},});
public目录下的manifest.json(图标在icons目录下,在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"
}
}
解决方法
此问题已通过更新于 2021 年 4 月 7 日今天发布的 next-pwa 5.2.0 解决。