При развертывании приложения next-pwa(Next.js) в версии Vercel получил сообщение «Неперехваченный (в обещании) плохой прекэширующий ответ».

я получил Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://myapp.vercel.app/_error","status":404}]с моим приложением next-pwa и сервис-воркер не работает при развертывании моего приложения в vercel, хотя он отлично работает на localhost без ошибок. Я следил за базовым использованием здесь 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 в общедоступном каталоге (значки находятся в каталоге значков, который находится в общедоступном каталоге)

      {
  "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"
  }
}
Источник

3 ответа

Эта проблема была решена путем обновления next-pwa 5.2.0, выпущенного сегодня, 7 апреля 2021 года.

Источник

Моя проблема решена после обновления next-pwa с 5.4.1 до 5.5.4

Источник

Измените next-pwa на версию "5.0.6" и все заработает. Кажется, это создает проблему с более новыми версиями

Источник
Другие вопросы по тегам