javascript - Next.js med next-pwa får ikke tilgang til _offline-siden

Prøver å lage et nettsted + PWA med Next.js + next-pwa. Installert next-pwa, fulgt dokumentasjonen til denne pakken, spesifikt 'Offline fallbacks' https://github.com/shadowwalker/next-pwa#offline-fallbacks. Nettstedet blir installertbart som PWA, jeg kan installere det på PC og telefon, men jeg kommer ikke til _offline-siden bortsett fra ved å skrive den manuelt i URL-en.

next.config.js:

const withPWA = require('next-pwa');

/** @type {import('next').NextConfig} */
const nextConfig = withPWA({
  reactStrictMode: true,
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true
  }
})

module.exports = nextConfig

sw.js genereres automatisk av next-pwa i public-mappen. Den har en linje for å inkludere en annen fil, som også genereres av next-pwa: importScripts("fallback-development.js"); fallback-development.js inneholder:

/******/ (() => { // webpackBootstrap
/******/    "use strict";
var __webpack_exports__ = {};


self.fallback = async request => {
  // https://developer.mozilla.org/en-US/docs/Web/API/RequestDestination
  switch (request.destination) {
    case 'document':
      if (true) return caches.match("/_offline", {
        ignoreSearch: true
      });

    case 'image':
      if (false) {}

    case 'audio':
      if (false) {}

    case 'video':
      if (false) {}

    case 'font':
      if (false) {}

    case '':
      if (false) {}

    default:
      return Response.error();
  }
};
/******/ })()
;

Jeg prøvde også produksjonsbygg, da får fallback-development.js et annet navn, og importen i sw.js får det navnet også endret til riktig. Både i prod og dev, både lokalt og med appen min distribuert til Vercel, prøvde jeg å deaktivere nettverket i nettleserens utviklerverktøy under nettverksfanen, huket av 'deaktiver cache', og huket av 'offline' under application->Service workers.

På PC, i nettleserkonsollloggen, ser jeg ingen feil relatert til PWA. Jeg ser standard nettleserside 'ingen internett' hvis jeg skriver inn en side jeg ikke har besøkt ennå på nettstedet mitt direkte i URL-en. På telefonen, siden det er en PWA, kan jeg ikke skrive inn en URL som i nettleseren, så det går frem og tilbake mellom sider som jeg bytter i navigasjonsfeltet med next.js-link.

Hvordan kan jeg vise noe som 'Du er frakoblet' så snart brukerens enhet mister internettilgang?

Relaterte artikler