Next JS PWA 在用户第一次离线时不显示离线页面

Question

我正在使用 next-pwa 库并遵循这个 example.

所以这里发生的事情是，我打开我的网站，所有内容都被加载，然后我关闭我的 wifi/离线，然后我点击任何其他链接

预期结果：

它应该显示我的离线页面

实际结果：

显示错误

奇怪的事情：

然后我再次重新加载我的页面，它开始显示我的离线页面。

我的 next.config.js

const withPWA = require("next-pwa")({
  dest: "public",
  swSrc: "service-worker.js",
});

const nextConfig = withPWA({
  images: {
    domains: [],
  },
  reactStrictMode: true,
  optimizeFonts: false,
});
module.exports = nextConfig;

我的 service-worker.js

import { clientsClaim } from "workbox-core";
import { matchPrecache, precacheAndRoute } from "workbox-precaching";
import { registerRoute, setCatchHandler } from "workbox-routing";
import { NetworkFirst, CacheFirst } from "workbox-strategies";
import { CacheableResponsePlugin } from "workbox-cacheable-response";
import { ExpirationPlugin } from "workbox-expiration";

self.skipWaiting(); // DONT WAIT FOR USER TO CLOSE ALL TAB
clientsClaim(); //  take control ASAP

const WB_MANIFEST = self.__WB_MANIFEST;
// Precache fallback route and image
WB_MANIFEST.push({
  url: "/fallback",
  revision: "1234567890",
});
precacheAndRoute(WB_MANIFEST);

// cache for image
registerRoute(
  ({ request }) => request.destination === "image",
  new CacheFirst({
    cacheName: "images",
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 60 * 60,
      }),
    ],
  })
);

registerRoute(
  /.*/i,
  new NetworkFirst({
    cacheName: "others",
    plugins: [
      new ExpirationPlugin({
        maxEntries: 32,
        maxAgeSeconds: 86400,
      }),
    ],
  })
);

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(({ event }) => {
  switch (event.request.destination) {
    case "document":
      // If using precached URLs:
      return matchPrecache("/fallback");

      break;
    case "image":
      // If using precached URLs:
      return matchPrecache("/static/images/fallback.png");

    case "font":
    // If using precached URLs:
    // return matchPrecache(FALLBACK_FONT_URL);
    //return caches.match('/static/fonts/fallback.otf')
    //break
    default:
      // If we don't have a fallback, just return an error response.
      return matchPrecache("/fallback");
  }
});

我的清单.json：

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "Title",
  "short_name": "Title",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "description": "SOME TEST",
  "icons": [
    {
      "src": "images/touch/manifestIcon48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/manifestIcon72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/manifestIcon96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/manifestIcon96.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/manifestIcon48.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/manifestIcon192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

我的后备页面：

import React from "react";
const Fallback = () => {
  return (
    <div className="flex flex-col h-screen w-screen items-center justify-center ">
      <div className="flex w-screen justify-center items-center  ">
        <img src="/fallback.png" className="h-[80px] w-[80px]" />
      </div>
      <div className="items-center justify-center flex font-raleway font-[700] text-[35px] mt-2">
        No Internet
      </div>

      <div className="items-center justify-center text-center mx-10 flex font-raleway text-[20px] mt-5 leading-8">
        <p>
          Looks like you are not connected to the network. Check your setting
          and try again.
        </p>
      </div>
    </div>
  );
};

export default Fallback;

我试过的

1. 确保我的服务工作是积极的和工作

2. 后备页面和后备图像已正确预缓存

任何人都可以帮助我我不知道我做错了什么