Fehler in progressiven Web-Apps beheben

Im Bereich Anwendung können Sie Web-App-Manifeste, Service Worker und Service Worker-Caches untersuchen, ändern und debuggen.

Progressive Web-Apps (PWAs) sind moderne, hochwertige Anwendungen, die mit Webtechnologie entwickelt wurden. PWAs bieten ähnliche Funktionen wie iOS-, Android- und Desktop-Apps. Diese sind:

• Zuverlässig, auch bei instabilen Netzwerkbedingungen.
• Installierbar auf Startoberflächen von Betriebssystemen wie dem Ordner Applications (Anwendungen) unter Mac OS X, dem Startmenü unter Windows und dem Startbildschirm unter Android und iOS.
• In Aktivitätswechslern, Gerätesuchmaschinen wie Spotlight und in Blättern zum Teilen von Inhalten angezeigt werden.

In diesem Leitfaden werden nur die Funktionen progressiver Web-Apps im Bereich Anwendung behandelt. Wenn Sie Hilfe zu den anderen Bereichen benötigen, sehen Sie sich den letzten Abschnitt dieses Leitfadens an: Weitere Anleitungen für Anwendungsbereiche.

Zusammenfassung

• Auf dem Tab Manifest können Sie das Manifest Ihrer Web-App prüfen.
• Auf dem Tab Service Workers können Sie eine Vielzahl von Aufgaben im Zusammenhang mit Service Workern ausführen, z. B. einen Dienst abmelden oder aktualisieren, Push-Ereignisse emulieren, offline gehen oder einen Service Worker beenden.
• Den Service Worker-Cache können Sie auf dem Tab Cache Storage ansehen.
• Sie können einen Service Worker abmelden und den gesamten Speicher und alle Caches mit einem einzigen Klick auf die Schaltfläche auf dem Tab Speicher löschen löschen.

Web-App-Manifest

Wenn Nutzer Ihre App dem Ordner Applications unter Mac OS X, dem Start-Menü unter Windows und dem Startbildschirm unter Android und iOS hinzufügen können sollen, benötigen Sie ein Web-App-Manifest. Das Manifest definiert, wie die App auf dem Startbildschirm angezeigt wird, wohin der Nutzer beim Starten über den Startbildschirm weitergeleitet wird und wie die App beim Start aussieht.

Nachdem Sie das Manifest eingerichtet haben, können Sie es auf dem Tab Manifest im Bereich Anwendung prüfen.

• Wenn Sie sich den Manifestquellcode ansehen möchten, klicken Sie auf das Label App-Manifest (manifest.webmanifest im Screenshot oben).
• In den Abschnitten Identität und Präsentation werden nur Felder aus der Manifestquelle benutzerfreundlicher dargestellt.
• Im Bereich Protocol Handlers (Protokoll-Handler) können Sie die Registrierung des URL-Protokoll-Handlers Ihrer PWA mit einem Klick auf eine Schaltfläche testen. Weitere Informationen finden Sie unter Registrierung von URL-Protokoll-Handlern testen.
• Im Abschnitt „Symbole“ werden alle von Ihnen angegebenen Symbole angezeigt. Sie können dort auch die zugehörigen Masken prüfen.
• Im Bereich Shortcut #N werden Informationen zu allen Ihren Shortcut-Objekten angezeigt.
• Im Abschnitt Screenshot #N werden die Screenshots für eine ansprechendere Installations-UI Ihrer App angezeigt.

Wenn in DevTools ein Fehler auftritt, z. B. wenn ein Symbol nicht geladen werden kann, wird auf dem Tab Manifest der Bereich Installierbarkeit mit einer Beschreibung des Fehlers angezeigt.

Maskierbare Symbole ansehen und prüfen

Im Bereich Symbole auf dem Tab Manifest werden alle Symbole Ihrer Anwendung angezeigt. In diesem Abschnitt können Sie auch die sicheren Bereiche für maskierbare Symbole prüfen. Das sind Symbole, die sich an die Plattform anpassen.

Wenn Sie die Symbole so zuschneiden möchten, dass nur der minimale sichere Bereich sichtbar ist, setzen Sie ein Häkchen bei Bei maskierbaren Symbolen nur den minimalen sicheren Bereich anzeigen.

Wenn Ihr gesamtes Logo im empfohlenen Bildbereich sichtbar ist, können Sie fortfahren.

Trigger einbauen

In Chrome können Sie die Installation Ihrer PWA direkt über die Benutzeroberfläche aktivieren und bewerben. Informationen zum Bereitstellen einer eigenen In-App-Installation

So starten Sie den Installationsvorgang Ihrer PWA:

1. Öffnen Sie die Landingpage der PWA in Chrome.

2. Klicken Sie oben rechts in der Adressleiste auf  Installieren.

   

3. Folgen Sie der Anleitung auf dem Bildschirm.

Mit der Funktion App installieren kann der Workflow für Mobilgeräte nicht simuliert werden. Beachten Sie, dass der Installationsbutton im Desktop-Chrome-Browser in der Adressleiste angezeigt wird, obwohl sich die Entwicklertools im Gerätemodus befinden. Wenn Sie Ihre App jedoch erfolgreich auf Ihrem Computer hinzufügen können, funktioniert sie auch auf Mobilgeräten.

Wenn Sie die tatsächliche mobile Nutzung testen möchten, können Sie ein echtes Mobilgerät über Remote-Debugging mit DevTools verbinden. Wenn Sie die Installation auf dem verbundenen Mobilgerät auslösen möchten, öffnen Sie das Dreipunkt-Menü  und klicken Sie auf  App installieren.

Tastenkombinationen prüfen

Mit App-Verknüpfungen können Sie Nutzern schnellen Zugriff auf einige häufig benötigte Aktionen ermöglichen.

Wenn Sie die in Ihrer Manifestdatei definierten Verknüpfungen prüfen möchten, scrollen Sie auf dem Tab Manifest zu den Abschnitten Shortcut #N.

Weitere Beispiele ansehen

Screenshots für eine umfassendere Installations-UI prüfen

Wenn Sie Ihrer Manifestdatei eine Beschreibung und eine Reihe von Screenshots hinzufügen, wird für Ihre App ein ausführlicheres Installationsdialogfeld angezeigt.

Scrollen Sie auf dem Tab Manifest zu den Abschnitten Screenshot #N, um die Screenshots anzusehen.

Registrierung von URL-Protokoll-Handlern testen

PWAs können Links verarbeiten, die ein bestimmtes Protokoll verwenden, um eine bessere Integration zu ermöglichen. Informationen zum Erstellen eines Handlers finden Sie unter Registrierung der URL-Protokoll-Handler für PWAs.

So testen Sie den Handler:

1. Öffnen Sie die Entwicklertools auf der Landingpage Ihrer PWA. Hier finden Sie eine Beispiel-PWA.
2. Installieren Sie die PWA über die Demoseite und laden Sie die App nach der Installation neu. Der Browser hat die PWA jetzt als Handler für das web+coffee-Protokoll registriert.
3. Geben Sie im Bereich Anwendung > Manifest > Protokoll-Handler die URL ein, die vom Handler getestet werden soll, und klicken Sie auf Protokoll testen. In diesem Beispiel kann der Handler americano, chai und latte-macchiato verarbeiten.
4. Wenn Sie in Chrome gefragt werden, ob die App geöffnet werden darf, bestätigen Sie dies, indem Sie auf Protokoll-Handler öffnen klicken.
5. Erlauben Sie der App im nächsten Dialogfeld, web+coffee-Links zu verarbeiten.

Wenn der Handler den Link erfolgreich verarbeitet, sehen Sie ein Bild einer Kaffeetasse, die in der App geöffnet wird.

Service Worker

Service Worker sind eine grundlegende Technologie für die zukünftige Webplattform. Das sind Skripts, die der Browser im Hintergrund ausführt, unabhängig von einer Webseite. Mit diesen Skripts können Sie auf Funktionen zugreifen, für die keine Webseite oder Nutzerinteraktion erforderlich ist, z. B. Push-Benachrichtigungen, Hintergrundsynchronisierung und Offline-Funktionen.

Zugehörige Leitfäden:

• Einführung in Service Worker
• Push-Benachrichtigungen: rechtzeitig, relevant und präzise

Der Tab Service Workers im Bereich Anwendung ist der Hauptort in den DevTools, um Service Worker zu untersuchen und zu debuggen.

• Wenn ein Service Worker für die aktuell geöffnete Seite installiert ist, wird er auf diesem Tab aufgeführt. Im Screenshot oben ist beispielsweise ein Service Worker für den Bereich https://airhorner.com/ installiert.
• Wenn Sie das Kästchen Offline anklicken, wird DevTools in den Offlinemodus versetzt. Das entspricht dem Offlinemodus, der im Bereich Netzwerk oder über die Option Go offline im Befehlsmenü verfügbar ist.
• Das Kästchen Update beim Aktualisieren zwingt den Service Worker, bei jedem Seitenaufbau ein Update durchzuführen.
• Wenn Sie das Kästchen Für Netzwerk umgehen aktivieren, wird der Service Worker umgangen und der Browser wird gezwungen, die angeforderten Ressourcen aus dem Netzwerk abzurufen.
• Über den Link Netzwerkanfragen gelangen Sie zum Bereich Netzwerk mit einer Liste der abgefangenen Anfragen, die sich auf den Service Worker beziehen (is:service-worker-intercepted-Filter).
• Mit dem Link Aktualisieren wird der angegebene Service Worker einmalig aktualisiert.
• Mit der Schaltfläche Push wird eine Push-Benachrichtigung ohne Nutzlast (auch als Tickle bezeichnet) emuliert.
• Mit der Schaltfläche Synchronisieren wird ein Hintergrundsynchronisierungsereignis emuliert.
• Über den Link Abmelden wird der angegebene Service Worker abgemeldet. Unter Speicher löschen erfahren Sie, wie Sie einen Service Worker abmelden und Speicher und Caches mit einem einzigen Klick löschen können.
• In der Zeile Quelle sehen Sie, wann der aktuell ausgeführte Service Worker installiert wurde. Der Link ist der Name der Quelldatei des Service Workers. Wenn Sie auf den Link klicken, werden Sie zum Quellcode des Service Workers weitergeleitet.
• In der Zeile Status sehen Sie den Status des Service Workers. Die Zahl in dieser Zeile (#16 im Screenshot) gibt an, wie oft der Service Worker aktualisiert wurde. Wenn Sie das Kästchen Bei Neuladen aktualisieren aktivieren, wird die Zahl bei jedem Seitenaufbau erhöht. Neben dem Status sehen Sie einen Start-Link (wenn der Service Worker angehalten ist) oder einen Stopp-Link (wenn der Service Worker ausgeführt wird). Service Worker sind so konzipiert, dass sie vom Browser jederzeit beendet und gestartet werden können. Sie können das simulieren, indem Sie Ihren Service Worker explizit über den Link stop beenden. Wenn Sie Ihren Service Worker beenden, können Sie testen, wie sich Ihr Code verhält, wenn der Service Worker wieder gestartet wird. Häufig werden Fehler aufgrund fehlerhafter Annahmen zum persistenten globalen Status aufgedeckt.
• In der Zeile Clients sehen Sie den Ursprung, für den der Service Worker gilt. Die Schaltfläche Fokus ist vor allem dann nützlich, wenn Sie mehrere registrierte Service Worker haben. Wenn Sie neben einem Service Worker, der in einem anderen Tab ausgeführt wird, auf die Schaltfläche Fokus klicken, wird dieser Tab in Chrome in den Fokus gerückt.

• In der Tabelle Aktualisierungszyklus sehen Sie die Aktivitäten des Service Workers und die dafür benötigte Zeit, z. B. „Installieren“, „Warten“ und „Aktivieren“. Wenn Sie den genauen Zeitstempel jeder Aktivität sehen möchten, klicken Sie auf die Schaltflächen Maximieren.

  

  Weitere Informationen finden Sie unter Service Worker-Lebenszyklus.

Wenn der Service Worker Fehler verursacht, wird auf dem Tab Service Workers in der Zeile Source das Symbol Error mit der Anzahl der Fehler angezeigt. Über den Link mit der Nummer gelangen Sie zur Konsole mit allen protokollierten Fehlern.

Wenn Sie Informationen zu allen Service Workern aufrufen möchten, klicken Sie unten auf dem Tab Service Worker auf Alle Registrierungen ansehen. Über diesen Link gelangen Sie zu chrome://serviceworker-internals/?devtools, wo Sie Ihre Service Worker weiter debuggen können.

Service Worker-Caches

Auf dem Tab Cache Storage finden Sie eine schreibgeschützte Liste der Ressourcen, die mit der Cache API (Service Worker) im Cache gespeichert wurden.

Wenn Sie zum ersten Mal einen Cache öffnen und eine Ressource hinzufügen, erkennt DevTools die Änderung möglicherweise nicht. Aktualisieren Sie die Seite. Der Cache sollte jetzt angezeigt werden.

Wenn Sie zwei oder mehr Caches geöffnet haben, werden sie unter dem Drop-down-Menü Cache Storage aufgeführt.

Kontingentnutzung

Einige Antworten auf dem Tab „Cache Storage“ sind möglicherweise als undurchsichtig gekennzeichnet. Dies bezieht sich auf eine Antwort, die von einem anderen Ursprung abgerufen wurde, z. B. von einem CDN oder einer Remote-API, wenn CORS nicht aktiviert ist.

Um das Offenlegen von domainübergreifenden Informationen zu vermeiden, wird der Größe einer intransparenten Antwort, die zur Berechnung von Speicherplatzkontingentlimits verwendet wird (d.h. ob eine QuotaExceeded-Ausnahme ausgelöst wird), und die von der navigator.storage API gemeldet wird, ein erheblicher Puffer hinzugefügt.

Die Details dieses Auffüllens variieren von Browser zu Browser. Für Google Chrome bedeutet dies jedoch, dass die Mindestgröße, die eine einzelne zwischengespeicherte undurchsichtige Antwort zur gesamten Speichernutzung beiträgt, ungefähr 7 Megabyte beträgt. Das sollten Sie berücksichtigen, wenn Sie festlegen, wie viele undurchsichtige Antworten Sie im Cache speichern möchten. Andernfalls überschreiten Sie die Speicherplatzkontingente möglicherweise viel schneller als erwartet, wenn Sie nur die tatsächliche Größe der undurchsichtigen Ressourcen berücksichtigen.

Zugehörige Leitfäden:

• Stack Overflow: What limitations apply to opaque responses?
• Workbox: Speicherplatzkontingent

Speicherinhalt löschen

Der Tab Speicher löschen ist eine sehr nützliche Funktion bei der Entwicklung von progressiven Web-Apps. Auf diesem Tab können Sie Service Worker abmelden und alle Caches und Speicher mit einem einzigen Klick löschen. Weitere Informationen finden Sie im nächsten Abschnitt.

Zugehörige Leitfäden:

• Speicherinhalt löschen

Weitere Anleitungen für den Anwendungsbereich

Weitere Informationen zu den anderen Bereichen des Bereichs Anwendung finden Sie in den folgenden Anleitungen.

Zugehörige Leitfäden:

• Seitenressourcen prüfen
• Lokalen Speicher und Cache prüfen und verwalten