node.js - Angular PWA - Ruter til egendefinert frakoblet side når ingen tilkobling er tilgjengelig

I en Angular PWA vil jeg omdirigere brukeren til en tilpasset frakoblet side (offline.html) hvis det ikke er internettforbindelse tilgjengelig.

Ved å bruke ng-sw.config.json-filen satte jeg opp hvilke ressurser og API-er som skulle caches og hvilken strategi som skulle brukes (ytelse/ferskhet), og jeg kunne betjene applikasjonen selv når jeg var offline uten problemer. Nå ønsker jeg å vise en tilpasset offline-side, men blant veiledninger og guider kunne jeg ikke se en måte å oppnå dette på med Angular og dets service-worker-modul.

Jeg lurer på om en mulig løsning ville være å lage en tjeneste som sjekker tilkoblingen (online/offline) og, hvis offline, omdirigerer til offline.html-siden. Tjenesten og html-siden ville bli bufret med en 'prefetch'-strategi for å sikre at de er tilgjengelige så snart servicearbeideren er installert.

Ellers ville jeg lage en grunnleggende service worker som importerer den standard Angular service worker og legger til logikk for å omdirigere til frakoblet-side hvis hentingskallet mislykkes.

Finnes det noen andre muligheter?

Svar #1

Først må du opprette en offline HTML-side og lagre den i assets-mappen.

Legg deretter til den offline-siden i din ng-sw.config slik:

  "resources": {
    "files": [
      "/assets/favicon.ico",
      "/*.css",
      "/*.js",
      "/assets/offline-page.html"  
    ],

Neste i din app.component.html legger du til logikk som dette

ngOnInit() {
  self.addEventListener('fetch', function(event) {
    return event.respondWith(
      caches.match(event.request)
      .then(function(response) {
        let requestToCache = event.request.clone();

        return fetch(requestToCache).then().catch(error => {
          // Check if the user is offline first and is trying to navigate to a web page
          if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) {
            // Return the offline page
            return caches.match(offlineUrl);
          }
        });
      })
    );
  });
}

Så når brukeren er i frakoblet modus og prøver å navigere til en annen rute, vil de se frakoblet-siden

Relaterte artikler