Fehler in progressiven Web-Apps beheben

Im Bereich Anwendung können Sie Manifeste, Service Worker und Service Worker-Caches von Web-Apps prüfen, ändern und debuggen.

Progressive Web-Apps (PWAs) sind moderne, hochwertige Apps, die mithilfe von Webtechnologien erstellt werden. PWAs bieten ähnliche Funktionen wie iOS-, Android- und Desktop-Apps. Diese sind:

• Verlässlich auch bei instabilen Netzwerkbedingungen.
• Sie können installiert werden, um Oberflächen von Betriebssystemen zu starten, z. B. den Ordner Anwendungen unter Mac OS X, das Start-Menü unter Windows und den Startbildschirm unter Android und iOS.
• Werden in den Aktivitätenwechsel, in Gerätesuchmaschinen wie Spotlight und in Tabellen zum Teilen von Inhalten angezeigt.

In diesem Leitfaden werden nur die Funktionen der progressiven Web-App im Bereich Anwendung behandelt. Wenn Sie Hilfe zu den anderen Bereichen benötigen, lesen Sie den letzten Abschnitt dieses Leitfadens, Anleitungen zum Anwendungsbereich.

Zusammenfassung

• Verwenden Sie den Tab Manifest, um Ihr Web-App-Manifest zu überprüfen.
• Auf dem Tab Service Workers können Sie eine Vielzahl von Aufgaben in Bezug auf Service Worker ausführen, z. B. die Registrierung eines Dienstes aufheben oder einen Dienst aktualisieren, Push-Ereignisse emulieren, die Internetverbindung herstellen oder einen Service Worker beenden.
• Den Service Worker-Cache finden Sie auf dem Tab Cache-Speicher.
• Heben Sie die Registrierung eines Service Workers auf und löschen Sie den gesamten Speicher sowie alle Caches mit nur einem Klick auf dem Tab Clear Storage (Speicher löschen).

Manifest der Webanwendung

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

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

• Wenn Sie die Manifestquelle aufrufen möchten, klicken Sie auf den Link unter dem Label App-Manifest (manifest.webmanifest im Screenshot oben).
• In den Abschnitten Identität und Präsentation werden nur Felder aus der Manifestquelle auf nutzerfreundlichere Weise angezeigt.
• Im Abschnitt 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 der URL-Protokoll-Handler testen.
• Im Bereich Symbole werden alle von Ihnen angegebenen Symbole angezeigt und Sie können die zugehörigen Masken prüfen.
• Die Abschnitte Verknüpfung #N enthalten Informationen zu allen Verknüpfungsobjekten.
• Im Abschnitt Screenshot #N werden die Screenshots für eine umfassendere Installationsoberfläche Ihrer App angezeigt.

Wenn in den DevTools ein Fehler auftritt, z. B. ein Symbol, das nicht geladen werden kann, wird auf dem Tab Manifest der Abschnitt Installability (Installierbarkeit) mit einer Beschreibung des Fehlers angezeigt.

Maskierbare Symbole ansehen und prüfen

Im Abschnitt Symbole des Tabs Manifest werden alle Symbole Ihrer App angezeigt. In diesem Abschnitt können Sie sich auch die sicheren Bereiche für maskierbare Symbole ansehen. Das ist das Format von Symbolen, die sich an die jeweilige Plattform anpassen.

Wenn Sie die Symbole so zuschneiden möchten, dass nur der minimale sichere Bereich sichtbar ist, klicken Sie auf das Kästchen neben Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen.

Wenn Ihr gesamtes Logo im sicheren Bereich sichtbar ist, können Sie fortfahren.

Trigger installation

Mit Chrome können Sie die Installation Ihrer PWA direkt in der Benutzeroberfläche aktivieren und bewerben. Weitere Informationen zur Bereitstellung eigener In-App-Installation

So lösen Sie den Installationsvorgang für Ihre PWA aus:

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

2. Klicken Sie rechts oben 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. Im Chrome-Browser für Computer wird die Installationsschaltfläche in der Adressleiste angezeigt, obwohl sich die Entwicklertools im Gerätemodus befinden. Wenn Sie Ihre App jedoch Ihrem Desktop hinzufügen können, funktioniert sie auch für Mobilgeräte.

Wenn Sie die echte mobile Erfahrung testen möchten, können Sie ein echtes Mobilgerät über Remote-Debugging mit Entwicklertools verbinden. Um die Installation auf dem verbundenen Mobilgerät auszulösen, öffne das Dreipunkt-Menü und klicke auf App installieren.

Verknüpfungen prüfen

Über App-Verknüpfungen können Sie schnell auf einige häufige Aktionen zugreifen, die Nutzer häufig benötigen.

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

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 umfangreicheres Installationsdialogfeld angezeigt.

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

Registrierung von URL-Protokoll-Handlern testen

PWAs können Links verarbeiten, die ein bestimmtes Protokoll verwenden, um die Nutzerfreundlichkeit zu verbessern. Informationen zum Erstellen eines Handlers finden Sie unter Registrierung des URL-Protokoll-Handlers für PWAs.

So testen Sie den Handler:

1. Öffnen Sie die Entwicklertools auf der Landingpage Ihrer PWA. Sehen Sie sich beispielsweise diese Demo-PWA an.
2. Installieren Sie die PWA auf der 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 der Handler testen soll, und klicken Sie auf Protokoll testen. In diesem Beispiel kann der Handler americano, chai und latte-macchiato verarbeiten.
4. Wenn Sie von 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 wurde.

Service Worker

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

Ähnliche Leitfäden:

• Einführung in Dienstprogramme
• Push-Benachrichtigungen: Pünktlich, relevant und präzise

Der Tab Service Workers im Bereich Anwendung ist der Hauptbereich der Entwicklertools für die Prüfung und Fehlerbehebung von Service Workern.

• Wenn auf der aktuell geöffneten Seite ein Dienst-Worker 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, werden die DevTools in den Offlinemodus versetzt. Dies entspricht dem Offlinemodus, der im Bereich Netzwerk verfügbar ist, oder der Option Go offline im Befehlsmenü.
• Das Kästchen Beim Aktualisieren aktualisieren zwingt den Service Worker bei jedem Seitenaufbau zum Aktualisieren.
• Das Kästchen Für Netzwerk umgehen umgeht den Service Worker und zwingt den Browser, zum Netzwerk für die angeforderten Ressourcen zu wechseln.
• Über den Link Netzwerkanfragen gelangen Sie zum Bereich Netzwerk. Dort finden Sie eine Liste der abgefangenen Anfragen, die sich auf den Service Worker beziehen (is:service-worker-intercepted-Filter).
• Über den Link Aktualisieren wird der angegebene Dienstarbeiter einmalig aktualisiert.
• Die Schaltfläche Push emuliert eine Push-Benachrichtigung ohne Nutzlast (auch als Tickle bezeichnet).
• Die Schaltfläche Synchronisieren emuliert ein Hintergrundsynchronisierungsereignis.
• Über den Link Registrierung aufheben wird die Registrierung des angegebenen Service Workers aufgehoben. Unter Speicherplatz leeren erfahren Sie, wie Sie einen Dienst-Worker unregisteren und Speicher und Caches mit nur einem Klick löschen.
• Die Zeile Quelle gibt an, wann der derzeit ausgeführte Service Worker installiert wurde. Der Link ist der Name der Quelldatei des Service Workers. Wenn Sie auf den Link klicken, werden Sie zur Quelle 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 Dienst-Worker aktualisiert wurde. Wenn Sie das Kästchen Beim Aktualisieren aktualisieren aktivieren, wird die Zahl bei jedem Seitenaufbau erhöht. Neben dem Status sehen Sie den Link Start (wenn der Service Worker beendet wurde) oder einen Link stop (wenn der Service Worker ausgeführt wird). Service Worker können jederzeit vom Browser angehalten und gestartet werden. Sie können das simulieren, indem Sie Ihren Dienst-Worker über den Link stop explizit beenden. Durch das Beenden des Service Workers können Sie ganz einfach testen, wie sich der Code verhält, wenn der Service Worker neu gestartet wird. Dabei werden häufig Fehler aufgedeckt, die auf fehlerhafte Annahmen zum persistenten globalen Zustand zurückzuführen sind.
• In der Zeile Clients sehen Sie den Ursprung, auf den der Service Worker beschränkt ist. Die Schaltfläche Fokus ist vor allem nützlich, wenn Sie mehrere registrierte Service Worker haben. Wenn Sie neben einem Service Worker, der auf einem anderen Tab ausgeführt wird, auf die Schaltfläche Fokus klicken, ist dieser Tab in Chrome hervorgehoben.

• In der Tabelle Update-Zyklus sehen Sie die Aktivitäten des Dienstarbeiters und die verstrichene Zeit, z. B. Installation, Warten und Aktivierung. Klicken Sie auf die Schaltfläche Maximieren, um den genauen Zeitstempel jeder Aktivität zu sehen.

  

  Weitere Informationen finden Sie unter Der Service Worker-Lebenszyklus.

Wenn der Service Worker Fehler verursacht, wird auf dem Tab Service Worker das Symbol Fehler mit der Anzahl der Fehler neben der Zeile Quelle angezeigt. Über den Link mit der Nummer gelangen Sie zur Console mit allen protokollierten Fehlern.

Wenn Sie Informationen zu allen Dienstprogrammen aufrufen möchten, klicken Sie unten auf dem Tab Dienstprogramme auf Alle Registrierungen ansehen. Dieser Link führt zu chrome://serviceworker-internals/?devtools, wo Sie Ihre Service Worker weiter debuggen können.

Service Worker-Caches

Der Tab Cache Storage enthält eine schreibgeschützte Liste der Ressourcen, die über die (Service Worker) Cache API im Cache gespeichert wurden.

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

Wenn Sie zwei oder mehr Caches geöffnet haben, werden diese im Drop-down-Menü Cache-Speicher aufgeführt.

Kontingentnutzung

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

Damit domainübergreifende Informationen nicht verloren gehen, wird die Größe einer intransparenten Antwort um das Padding erweitert. Dieses wird für die Berechnung der Speicherkontingentlimits verwendet (z. B. ob eine QuotaExceeded-Ausnahme ausgelöst wird) und von der navigator.storage API gemeldet.

Die Details dieses Paddings variieren von Browser zu Browser. Für Google Chrome bedeutet das, dass jede einzelne im Cache gespeicherte opake Antwort ungefähr 7 Megabyte zur Gesamtspeichernutzung beiträgt. Sie sollten dies beachten, wenn Sie festlegen, wie viele opake Antworten im Cache gespeichert werden sollen, da Sie die Beschränkungen des Speicherkontingents viel schneller überschreiten können, als Sie es aufgrund der tatsächlichen Größe der intransparenten Ressourcen erwarten würden.

Weitere Informationen:

• Stack Overflow: Welche Einschränkungen gelten für nicht transparente Antworten?
• Workbox: Speicherkontingent

Speicherinhalt löschen

Der Tab Speicher leeren ist eine sehr nützliche Funktion bei der Entwicklung progressiver Web-Apps. Auf diesem Tab können Sie mit einem einzigen Klick Service Worker abmelden und alle Caches und Speicher löschen. Weitere Informationen findest du im folgenden Abschnitt.

Ähnliche Leitfäden:

• Speicherinhalt löschen

Leitfäden für das Anwendungssteuerfeld

In den folgenden Anleitungen finden Sie weitere Informationen zu den anderen Bereichen des Bereichs Anwendung.

Ähnliche Leitfäden:

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