Hintergrundsynchronisation für PWAs, Teil 4: Debugging

Im letzten Teil dieser Serie werden die drei gezeigten Mechanismen noch einmal kurz zusammengefasst. Außerdem geht es um die Frage, wie sich Fehler bei der Hintergrundsynchronisation aufspüren und beheben lassen. Dazu sind die Chrome DevTools besonders nützlich.

In den vergangenen drei Teilen der Serie wurden die folgenden Schnittstellen vorgestellt:

1. Web Background Synchronization API: einmalig, ohne UI, ohne Berechtigungsabfrage, derzeit nur unter Chromium-basierten Browsern lauffähig.
2. Background Fetch: einmalig, mit UI, ohne Berechtigungsabfrage, derzeit nur unter Chromium-basierten Browsern lauffähig.
3. Web Periodic Background Synchronization API: mehrmals, ohne UI, mit Berechtigungsabfrage, derzeit nur unter Chromium-basierten Browsern lauffähig.

Diese drei Schnittstellen laufen aktuell nur auf Chromium-basierten Browsern. Ob Mozilla und Apple diese auch implementieren, ist nicht sicher. Der Background Fetch, aber vielleicht auch die Web Periodic Background Sync API sind dabei höhere Chancen einzuräumen als der Web Background Sync API in ihrer heutigen Form.

Als vierte Möglichkeit kommt auch noch die Push API in Betracht. Bei eingehenden Push-Nachrichten hat der Service Worker ebenfalls noch kurz Zeit, eine bestimmte Synchronisationslogik durchzuführen. Das ist ebenfalls mehrfach und theoretisch ohne Intervallbeschränkung möglich, allerdings muss für jedes eingegangene Ereignis eine Push-Benachrichtigung dargestellt werden. Auf diese Art können Messenger-Apps etwa die eingegangene Nachricht gleich in der lokalen Clientdatenbank hinterlegen, sodass kein erneutes Abrufen beim Öffnen der Anwendung erforderlich ist. Die Schnittstelle ist neben Google Chrome und Microsoft Edge auch in Mozilla Firefox verfügbar, nicht jedoch in Safari und auf den Plattformen iOS und macOS.

Hintergrundereignisse debuggen

Die vorgestellten Mechanismen zur Hintergrundsynchronisation lassen sich mithilfe der DevTools auf Chromium-basierten Browsern wie Google Chrome oder Microsoft Edge gut debuggen. Geöffnet werden sie mit F12. Als besonders hilfreich erweist sich dazu die Application-Registerkarte in den Entwicklertools. Hier ist im Bereich Service Worker zunächst die Service-Worker-Registrierung zu sehen, die für alle Schnittstellen vorausgesetzt wird. Ebenfalls befindet sich dort die Möglichkeit, ein Ereignis für die Background Sync, Periodic Sync oder Push API zu simulieren. Dazu wird in das Textfeld das Tag (Sync) beziehungsweise die Nachricht (Push) eingegeben, für das das jeweilige Ereignis ausgelöst werden soll. Per Klick auf die Schaltfläche neben dem Textfeld wird es direkt ausgelöst.

Per Klick auf den Skriptnamen wechseln die Entwicklertools in das Sources-Tab und öffnen dort direkt den Quelltext der Service-Worker-Implementierung. Hier können, wie Entwickler es von integrierten Entwicklungsumgebungen gewohnt sind, Breakpoints gesetzt, lokale Variablen inspiziert und die Ausführung bei aufgetretenen Fehlern unterbrochen werden.

Im Sources-Tab lassen sich auch die Quelltexte der Webanwendung untersuchen, sodass auch die Registrierung für Synchronisierungsereignisse auf diese Art geprüft werden kann. Schließlich befindet sich im Application-Tab auch der Bereich Background Services. Hier können in den Sichten Background Sync, Background Fetch, Notifications und Push Messaging per Klick auf das Record-Symbol die aufgetretenen Ereignisse für die jeweilige Schnittstellenart aufgezeichnet werden. Das geschieht für bis zu drei Tage und auch dann, wenn die DevTools nicht geöffnet sind. Die aufgetretenen Ereignisse können dann im Protokoll nachverfolgt werden.

Zusammenfassung

Hintergrundereignisse verbessern die PWA-Erfahrung für Anwender noch weiter. Die Schnittstellen eben Cloud-Sync-Clients, Messenger, Nachrichten-Apps und viele weiteren Anwendungsarten den Weg ins Web. Machen Sie Ihre Progressive Web App also noch besser und statten Sie diese um die gezeigten Möglichkeiten zur Hintergrundsynchronisation aus. ()