Im Bereich Anwendung können Sie Web-App-Manifeste, Service Worker und Service Worker-Caches prüfen, ä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. Sie sind:
- Auch bei instabilen Netzwerkbedingungen zuverlässig.
- Auf den Startbildschirmen von Betriebssystemen installierbar, z. B. im Ordner Anwendungen unter Mac OS X, im Startmenü unter Windows und auf dem Startbildschirm unter Android und iOS.
- In Aktivitätswechslern, Gerätesuchmaschinen wie Spotlight und in Blättern zur Inhaltsfreigabe sichtbar.
In diesem Leitfaden werden nur die Funktionen für Progressive Web-Apps im Bereich Anwendung behandelt. Wenn Sie Hilfe zu den anderen Bereichen benötigen, lesen Sie den letzten Abschnitt dieses Leitfadens, Andere Leitfäden zum Bereich „Anwendung“ panel guides.
Zusammenfassung
- Auf dem Tab Manifest können Sie Ihr Web-App-Manifest prüfen.
- Auf dem Tab Service Worker finden Sie eine Reihe von Aufgaben im Zusammenhang mit Service Workern, z. B. das Aufheben der Registrierung oder das Aktualisieren eines Dienstes, das Emulieren von Push-Ereignissen, das Wechseln in den Offlinemodus oder das Beenden eines Service Workers.
- Auf dem Tab Cache Storage können Sie Ihren Service Worker-Cache ansehen.
- Auf dem Tab Speicher löschen können Sie die Registrierung eines Service Workers aufheben und alle Speicher und Caches mit einem einzigen Klick löschen.
Web-App-Manifest
Wenn Nutzer Ihre App dem Ordner Anwendungen unter Mac OS X, dem Startmenü unter Windows und dem Startbildschirm unter Android und iOS hinzufügen können sollen, benötigen Sie ein Web-App Manifest. Im Manifest wird definiert, wie die App auf dem Startbildschirm angezeigt wird, wohin der Nutzer weitergeleitet wird, wenn er die App über den Startbildschirm startet, und wie die App beim Start aussieht.
Nachdem Sie Ihr Manifest eingerichtet haben, können Sie es auf dem Tab Manifest im Bereich Anwendung prüfen.
- Wenn Sie die Manifestquelle ansehen möchten, klicken Sie auf den Link unter der Beschriftung App-Manifest (
manifest.webmanifestim Screenshot oben). - In den Abschnitten Identität und Präsentation werden nur Felder aus der Manifestquelle benutzerfreundlicher dargestellt.
- Im Abschnitt Protokoll-Handler können Sie die Registrierung des URL-Protokoll-Handlers Ihrer PWA mit einem Klick testen. Weitere Informationen finden Sie unter Registrierung des URL-Protokoll-Handlers testen.
- Im Abschnitt Icons werden alle von Ihnen angegebenen Symbole angezeigt. Sie können auch die Masken prüfen.
- In den Abschnitten „Shortcut #N“ werden Informationen zu allen Ihren Shortcut-Objekten angezeigt.
- In den Abschnitten „Screenshot #N“ werden die Screenshots für eine umfassendere Installations-UI Ihrer App angezeigt.
Wenn in den Entwicklertools ein Fehler auftritt, z. B. wenn ein Symbol nicht geladen werden kann, wird auf dem Tab Manifest ein Abschnitt Installierbarkeit mit einer Beschreibung des Fehlers angezeigt.
Maskierbare Symbole ansehen und prüfen
Im Abschnitt Symbole auf dem Tab Manifest werden alle Symbole Ihrer Anwendung angezeigt. In diesem Abschnitt können Sie auch sichere Bereiche für maskierbare Symbole und das Format von Symbolen prüfen, die sich an Plattformen anpassen.
Wenn Sie die Symbole so zuschneiden möchten, dass nur der minimale sichere Bereich sichtbar ist, aktivieren Sie das Kästchen 
Bei maskierbaren Symbolen nur den minimalen sicheren Bereich anzeigen.
Wenn Ihr gesamtes Logo im sicheren Bereich sichtbar ist, ist alles in Ordnung.
Installation auslösen
In Chrome können Sie die Installation Ihrer PWA direkt in der Benutzeroberfläche aktivieren und bewerben. Weitere Informationen How to provide your own in-app installation experience.
So lösen Sie den Installationsprozess Ihrer PWA aus:
- Öffnen Sie die Landingpage der PWA in Chrome.
Klicken Sie rechts in der Adressleiste oben auf
Installieren.
Folgen Sie der Anleitung auf dem Bildschirm.
Mit der Funktion App installieren (oder Zum Startbildschirm hinzufügen auf einigen Geräten) kann der Workflow für Mobilgeräte nicht simuliert werden. Beachten Sie, wie der Desktop-Chrome-Browser die Schaltfläche „Installieren“ in der Adressleiste anzeigt, obwohl sich die Entwicklertools im Gerätemodusbefinden. Wenn Sie Ihre App jedoch erfolgreich auf Ihrem Desktop hinzufügen können, funktioniert sie auch auf Mobilgeräten.
Wenn Sie die echte mobile Nutzung testen möchten, können Sie ein echtes Mobilgerät über das Remote-Debugging mit
den Entwicklertools 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 (oder Zum Startbildschirm hinzufügen).
Shortcuts prüfen
App-Shortcuts ermöglichen schnellen Zugriff auf einige häufig verwendete Aktionen.
Wenn Sie die in Ihrer Manifestdatei definierten Shortcuts prüfen möchten, scrollen Sie auf dem Tab Manifest zu den Abschnitten Shortcut #N.
Screenshots für eine umfassendere Installations-UI prüfen
Wenn Sie Ihrer Manifestdatei eine Beschreibung und eine Reihe von Screenshots hinzufügen, erhält Ihre App ein umfassenderes Installationsdialogfeld.
Wenn Sie die Screenshots prüfen möchten, scrollen Sie auf dem Tab Manifest zu den Abschnitten Screenshot #N.
Registrierung des URL-Protokoll-Handlers 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 Ihren Handler:
- Öffnen Sie die Entwicklertools auf der Landingpage Ihrer PWA. Sehen Sie sich beispielsweise diese Demo-PWA an.
- 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 Protokoll
web+coffeeregistriert. - 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,chaiundlatte-macchiatoverarbeiten. - Wenn Sie von Chrome gefragt werden, ob die App geöffnet werden darf, bestätigen Sie dies, indem Sie auf Protokoll-Handler öffnen klicken.
- Erlauben Sie im nächsten Dialogfeld, dass die App
web+coffeeLinks verarbeitet.
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. Es handelt sich um Skripts, die der Browser im Hintergrund ausführt, getrennt 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.
Verwandte Leitfäden:
Der Tab Service Worker im Bereich Anwendung ist der Hauptbereich in den Entwicklertools, in dem Sie Service Worker prüfen und debuggen können.
- Wenn ein Service Worker auf der aktuell geöffneten 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. - Mit dem Kästchen
Offline wird in den Entwicklertools der Offlinemodus aktiviert. Dies entspricht dem Offlinemodus
im Bereich Netzwerk oder der Option Go offlineim Befehlsmenü. - Mit dem Kästchen
Bei jedem Seitenaufbau aktualisieren wird der Service Worker bei jedem Seitenaufbau aktualisiert. - Mit dem Kästchen
Für Netzwerk umgehen 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 im Zusammenhang mit dem Service Worker (Filter
is:service-worker-intercepted). - Mit dem Link Aktualisieren wird der angegebene Service Worker einmalig aktualisiert.
- Mit der Schaltfläche Push wird eine Push-Benachrichtigung ohne Nutzlast emuliert (auch als „Tickle“ bezeichnet).
- Mit der Schaltfläche Synchronisieren wird ein Hintergrundsynchronisierungsereignis emuliert.
- Mit dem Link Registrierung aufheben wird die Registrierung des angegebenen Service Workers aufgehoben. Unter Speicher löschen erfahren Sie, wie Sie die Registrierung eines Service Workers aufheben und Speicher und Caches mit einem einzigen Klick löschen.
- In der Zeile Quelle wird angezeigt, 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, gelangen Sie zur Quelle des Service Workers.
- In der Zeile Status wird der Status des Service Workers angezeigt. Die Zahl in dieser Zeile (
#16im Screenshot) gibt an, wie oft der Service Worker aktualisiert wurde. Wenn Sie das
Bei jedem Seitenaufbau aktualisieren Kästchen aktivieren, wird die Zahl bei jedem Seitenaufbau erhöht.
Neben dem Status sehen Sie einen Link Starten (wenn der Service Worker beendet ist) oder Beenden (wenn der Service Worker ausgeführt wird). Service Worker können jederzeit vom Browser beendet und gestartet werden. Wenn Sie Ihren Service Worker explizit über den Link Beenden beenden, können Sie dies simulieren. 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 dabei Fehler aufgrund falscher Annahmen zum persistenten globalen Status aufgedeckt. - In der Zeile Clients wird der Ursprung angezeigt, auf den der Service Worker beschränkt ist. Die Schaltfläche Fokus ist hauptsächlich 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 Update Cycle werden die Aktivitäten des Service Workers und die verstrichene Zeit angezeigt, 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 Lebenszyklus von Service Workern.
Wenn der Service Worker Fehler verursacht, wird auf dem Tab Service Worker ein Symbol 
Fehler mit der Anzahl der Fehler neben der Zeile Quelle angezeigt.
Über den Link mit der Zahl gelangen Sie zur Konsole mit allen protokollierten Fehlern.
Wenn Sie Informationen zu allen Service Workern sehen 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 (Service Worker) Cache API im Cache gespeichert wurden.
Wenn Sie einen Cache zum ersten Mal öffnen und eine Ressource hinzufügen, wird die Änderung möglicherweise nicht von den Entwicklertools erkannt. Laden Sie die Seite neu. Dann sollte der Cache 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 „opaque“ 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 die Weitergabe von domainübergreifenden Informationen zu vermeiden, wird der Größe einer „opaque“ -Antwort, die zur Berechnung der Speicherkontingente verwendet wird (d. h. ob eine QuotaExceeded Ausnahme ausgelöst wird), ein erheblicher Abstand hinzugefügt. Diese Größe wird von der navigator.storage API gemeldet.
Die Details dieses Abstands variieren von Browser zu Browser. Für Google Chrome bedeutet dies jedoch, dass die Mindestgröße , die eine einzelne im Cache gespeicherte „opaque“ -Antwort zur Gesamtspeichernutzung beiträgt, etwa 7 MB beträgt. Das sollten Sie berücksichtigen, wenn Sie festlegen, wie viele „opaque“ -Antworten Sie im Cache speichern möchten. Andernfalls können Sie die Speicherkontingente viel schneller überschreiten, als Sie es aufgrund der tatsächlichen Größe der „opaque“ -Ressourcen erwarten würden.
Verwandte Leitfäden:
- Stack Overflow: Welche Einschränkungen gelten für „opaque“ -Antworten?
- Workbox: Speicherplatzkontingente
Speicher löschen
Der Tab Speicher löschen ist eine sehr nützliche Funktion bei der Entwicklung von Progressive Web-Apps. Auf diesem Tab können Sie die Registrierung von Service Workern aufheben und alle Caches und Speicher mit einem einzigen Klick löschen. Weitere Informationen finden Sie im folgenden Abschnitt.
Verwandte Leitfäden:
Andere Leitfäden zum Bereich „Anwendung“
In den folgenden Leitfäden finden Sie weitere Informationen zu den anderen Bereichen des Bereichs Anwendung.
Verwandte Leitfäden: