Stabile Suchfunktionen mit Workbox

Demián Renzulli
Demián Renzulli
X GitHub Störung
Jeff Posnick

In diesem Codelab erfahren Sie, wie Sie mit Workbox eine zuverlässige Suche implementieren. Die verwendete Demo-App enthält ein Suchfeld, das einen Serverendpunkt aufruft und den Nutzer auf eine einfache HTML-Seite weiterleitet.

Messen

Bevor Sie Optimierungen vornehmen, sollten Sie immer zuerst den aktuellen Zustand der Anwendung analysieren.

  • Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

Überprüfen Sie in dem neuen Tab, der gerade geöffnet wurde, wie sich die Website verhält, wenn sie offline geht:

  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Netzwerk.
  3. Öffnen Sie die Chrome-Entwicklertools und wählen Sie den Bereich „Netzwerk“ aus.
  4. Wählen Sie in der Drop-down-Liste Drosselung die Option Offline aus.
  5. Geben Sie in der Demo-App eine Suchanfrage ein und klicken Sie auf die Schaltfläche Suchen.

Die Standard-Browserfehlerseite wird angezeigt:

Ein Screenshot der standardmäßigen Offline-UX im Browser.

Fallback-Antwort bereitstellen

Der Service Worker enthält den Code, um die Offlineseite der Precache-Liste hinzuzufügen, damit sie beim Service Worker install-Ereignis immer im Cache gespeichert werden kann.

Normalerweise müssen Sie Workbox anweisen, diese Datei zur Pre-Cache-Liste hinzuzufügen, indem Sie die Bibliothek in Ihr bevorzugtes Build-Tool einbinden (z.B. webpack oder gulp).

Der Einfachheit halber haben wir das bereits für Sie erledigt. Das geschieht mit dem folgenden Code bei public/sw.js:

const FALLBACK_HTML_URL = '/index_offline.html';
…
workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);

Fügen Sie als Nächstes Code hinzu, um die Offlineseite als Fallback-Antwort zu verwenden:

  1. Um die Quelle anzuzeigen, drücken Sie Quelltext anzeigen.
  2. Fügen Sie den folgenden Code am Ende von public/sw.js ein:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());

workbox.routing.setCatchHandler(({event}) => {
  switch (event.request.destination) {
    case 'document':
      return caches.match(FALLBACK_HTML_URL);
      break;
    default:
      return Response.error();
  }
});

Der Code führt Folgendes aus:

  • Hiermit wird eine Standardstrategie vom Typ Nur Netzwerk definiert, die auf alle Anfragen angewendet wird.
  • Deklariert einen globalen Fehler-Handler, indem workbox.routing.setCatchHandler() zum Verwalten fehlgeschlagener Anfragen aufgerufen wird. Bei Anfragen für Dokumente wird eine Offline-HTML-Fallback-Seite zurückgegeben.

So testen Sie diese Funktion:

  1. Kehren Sie zum anderen Tab zurück, auf dem Ihre App ausgeführt wird.
  2. Stellen Sie in der Drop-down-Liste Drosselung wieder Online ein.
  3. Drücken Sie in Chrome die Taste Zurück, um zur Suchseite zurückzukehren.
  4. Das Kästchen Cache deaktivieren in den Entwicklertools muss deaktiviert sein.
  5. Halten Sie die Schaltfläche Aktualisieren in Chrome gedrückt und wählen Sie Cache leeren und hart neu laden aus, damit Ihr Service Worker aktualisiert wird.
  6. Stellen Sie in der Drop-down-Liste Throttling (Drosselung) wieder Offline ein.
  7. Geben Sie eine Suchanfrage ein und klicken Sie noch einmal auf die Schaltfläche Suchen.

Die Fallback-HTML-Seite wird angezeigt:

Ein Screenshot der benutzerdefinierten Offline-UX im Browser.

Berechtigung zum Senden von Benachrichtigungen anfordern

Der Einfachheit halber enthält die Offlineseite unter views/index_offline.html bereits unten in einem Skriptblock den Code zum Anfordern von Benachrichtigungsberechtigungen:

function requestNotificationPermission(event) {
  event.preventDefault();

  Notification.requestPermission().then(function (result) {
    showOfflineText(result);
  });
}

Der Code führt Folgendes aus:

  • Wenn der Nutzer auf Benachrichtigungen abonnieren klickt, wird die requestNotificationPermission()-Funktion aufgerufen. Diese ruft Notification.requestPermission() auf, um die standardmäßige Berechtigungsaufforderung des Browsers anzuzeigen. Das Versprechen wird mit der vom Nutzer ausgewählten Berechtigung aufgelöst. Das kann entweder granted, denied oder default sein.
  • Übergibt die ermittelte Berechtigung an showOfflineText(), um dem Nutzer den entsprechenden Text anzuzeigen.

Offlineabfragen beibehalten und noch einmal versuchen, wenn Sie wieder online sind

Implementieren Sie als Nächstes die Workbox-Hintergrundsynchronisierung, um Offlineabfragen zu speichern, damit sie wiederholt werden können, wenn der Browser erkennt, dass die Verbindung wiederhergestellt wurde.

  1. Öffnen Sie public/sw.js zum Bearbeiten.
  2. Fügen Sie am Ende der Datei den folgenden Code ein:
const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueryQueue', {
  maxRetentionTime: 60,
  onSync: async ({queue}) => {
    let entry;
    while ((entry = await queue.shiftRequest())) {
      try {
        const response = await fetch(entry.request);
        const cache = await caches.open('offline-search-responses');
        const offlineUrl = `${entry.request.url}&notification=true`;
        cache.put(offlineUrl, response);
        showNotification(offlineUrl);
      } catch (error) {
        await this.unshiftRequest(entry);
        throw error;
      }
    }
  },
});

Der Code führt Folgendes aus:

  • workbox.backgroundSync.Plugin enthält die Logik zum Hinzufügen fehlgeschlagener Anfragen zu einer Warteschlange, damit sie später wiederholt werden können. Diese Anfragen werden in IndexedDB gespeichert.
  • maxRetentionTime gibt an, wie lange eine Anfrage wiederholt werden kann. In diesem Fall haben wir 60 Minuten ausgewählt (nach denen die Daten verworfen werden).
  • onSync ist der wichtigste Teil dieses Codes. Dieser Callback wird aufgerufen, sobald die Verbindung wieder hergestellt ist, sodass Anfragen in der Warteschlange abgerufen und dann aus dem Netzwerk abgerufen werden.
  • Die Netzwerkantwort wird dem offline-search-responses-Cache hinzugefügt und die Abfrageparameter &notification=true werden angehängt, damit dieser Cacheeintrag abgerufen werden kann, wenn ein Nutzer auf die Benachrichtigung klickt.

Wenn Sie die Hintergrundsynchronisierung in Ihren Dienst einbinden möchten, definieren Sie eine NetworkOnly-Strategie für Anfragen an die Such-URL (/search_action) und geben Sie die zuvor definierte bgSyncPlugin weiter. Fügen Sie den folgenden Code am Ende von public/sw.js ein:

const matchSearchUrl = ({url}) => {
  const notificationParam = url.searchParams.get('notification');
  return url.pathname === '/search_action' && !(notificationParam === 'true');
};

workbox.routing.registerRoute(
  matchSearchUrl,
  new workbox.strategies.NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
);

Dadurch wird Workbox angewiesen, immer das Netzwerk aufzurufen und bei fehlgeschlagenen Anfragen die Hintergrundsynchronisierungslogik zu verwenden.

Fügen Sie als Nächstes den folgenden Code am Ende von public/sw.js ein, um eine Caching-Strategie für Anfragen zu definieren, die von Benachrichtigungen stammen. Verwenden Sie die Strategie CacheFirst, damit sie aus dem Cache bereitgestellt werden können.

const matchNotificationUrl = ({url}) => {
  const notificationParam = url.searchParams.get('notification');
  return (url.pathname === '/search_action' && (notificationParam === 'true'));
};

workbox.routing.registerRoute(matchNotificationUrl,
  new workbox.strategies.CacheFirst({
     cacheName: 'offline-search-responses',
  })
);

Fügen Sie abschließend den Code hinzu, um Benachrichtigungen anzuzeigen:

function showNotification(notificationUrl) {
  if (Notification.permission) {
     self.registration.showNotification('Your search is ready!', {
        body: 'Click to see you search result',
        icon: '/img/workbox.jpg',
        data: {
           url: notificationUrl
        }
     });
  }
}

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(
     clients.openWindow(event.notification.data.url)
  );
});

Funktion testen

  1. Kehren Sie zum anderen Tab zurück, auf dem Ihre App ausgeführt wird.
  2. Stellen Sie in der Drop-down-Liste Drosselung wieder Online ein.
  3. Drücken Sie die Schaltfläche Zurück in Chrome, um zur Suchseite zurückzukehren.
  4. Halten Sie die Schaltfläche Aktualisieren in Chrome lange gedrückt und wählen Sie Cache leeren und neu laden aus, damit Ihr Service Worker aktualisiert wird.
  5. Setzen Sie die Drop-down-Liste Dhrottling (Drosselung) wieder auf Offline (Offline).
  6. Geben Sie eine Suchanfrage ein und klicken Sie noch einmal auf die Schaltfläche Suchen.
  7. Klicke auf Benachrichtigungen abonnieren.
  8. Wenn Sie in Chrome gefragt werden, ob Sie der App die Berechtigung zum Senden von Benachrichtigungen erteilen möchten, klicken Sie auf Zulassen.
  9. Geben Sie eine weitere Suchanfrage ein und klicken Sie noch einmal auf die Schaltfläche Suchen.
  10. Stellen Sie in der Drop-down-Liste Throttling (Drosselung) wieder Online ein.

Sobald die Verbindung wiederhergestellt ist, wird eine Benachrichtigung angezeigt:

Screenshot des gesamten Ablaufs im Offlinemodus

Fazit

Workbox bietet viele integrierte Funktionen, die Ihre PWAs widerstandsfähiger und ansprechender machen. In diesem Codelab haben Sie gelernt, wie Sie die Background Sync API über die Workbox-Abstraktion implementieren, damit Offlineabfragen von Nutzern nicht verloren gehen und nach Wiederherstellung der Verbindung noch einmal versucht werden können. Die Demo ist eine einfache Such-App. Sie können jedoch eine ähnliche Implementierung für komplexere Szenarien und Anwendungsfälle wie Chat-Apps oder das Posten von Nachrichten in einem sozialen Netzwerk verwenden.