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 Anwendungen, die mit Webtechnologien entwickelt wurden. 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.
- Sie werden in Aktivitätsschaltern, Gerätesuchmaschinen wie Spotlight und in Tabellen für die Freigabe von Inhalten angezeigt.
In diesem Leitfaden werden nur die Funktionen für progressive Web-Apps im Bereich Anwendung behandelt. Hilfe zu den anderen Bereichen finden Sie im letzten Abschnitt dieses Leitfadens: Weitere Anleitungen für Steuerfelder.
Zusammenfassung
- Auf dem Tab Manifest können Sie das Manifest Ihrer Webanwendung prüfen.
- Auf dem Tab Dienstworker können Sie eine ganze Reihe von dienstworkerbezogenen Aufgaben ausführen, z. B. einen Dienst unregisteren oder aktualisieren, Push-Ereignisse emulieren, offline gehen oder einen Dienstworker beenden.
- Den Service Worker-Cache finden Sie auf dem Tab Cache-Speicher.
- Auf dem Tab Speicher löschen können Sie einen Dienst-Worker abmelden und den gesamten Speicher und alle Caches mit nur einem Klick 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. Das Manifest definiert, wie die App auf dem Startbildschirm angezeigt wird, wohin der Nutzer beim Starten über den Startbildschirm weitergeleitet werden soll und wie die App beim Start aussieht.
Nachdem Sie das Manifest eingerichtet haben, können Sie es im Bereich Anwendung auf dem Tab Manifest prüfen.
- Wenn Sie sich die Manifestquelle ansehen möchten, klicken Sie auf den Link unter dem Label App-Manifest (
manifest.webmanifestim Screenshot oben). - In den Abschnitten Identität und Darstellung werden nur Felder aus der Manifestquelle angezeigt, die für Nutzer nutzerfreundlicher sind.
- Im Bereich Protokoll-Handler können Sie die Registrierung des URL-Protokoll-Handlers Ihrer PWA mit nur einem Klick 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.
- In den Abschnitten Verknüpfung #N finden Sie Informationen zu allen Ihren 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 aktivieren
Im Bereich Symbole auf dem Tab Manifest werden alle Symbole Ihrer Anwendung angezeigt. In diesem Abschnitt können Sie auch sichere Bereiche für maskierbare Symbole prüfen, das Format von Symbolen, das sich an Plattformen anpasst.
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 sicheren Bereich sichtbar ist, können Sie fortfahren.
Trigger installation
In Chrome können Sie die Installation Ihrer PWA direkt über die Benutzeroberfläche aktivieren und bewerben. Weitere Informationen zum Bereitstellen einer eigenen In-App-Installation
So lösen Sie den Installationsvorgang Ihrer PWA aus:
- Öffnen Sie die Landingpage der PWA in Chrome.
Klicken Sie rechts oben in der Adressleiste auf
Installieren.
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 im Chrome-Browser auf dem Computer die Schaltfläche „Installieren“ in der Adressleiste angezeigt wird, obwohl sich die Entwicklertools im Gerätemodus befinden. Wenn Sie Ihre App jedoch auf dem 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 das Remote-Debugging mit den DevTools verbinden. Wenn Sie die Installation auf dem verbundenen Mobilgerät starten 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 verwendete Aktionen bieten.
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 auf eine umfangreichere Installationsoberfläche 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 der URL-Protokoll-Handler für PWAs.
So testen Sie den 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
web+coffee-Protokoll registriert. - 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 der App,
web+coffee-Links zu verarbeiten.
Wenn der Handler den Link erfolgreich verarbeitet hat, wird ein Bild einer Kaffeetasse angezeigt, die in der App geöffnet wurde.
Dienstprogramme
Service Worker sind eine grundlegende Technologie der zukünftigen Webplattform. Das sind Scripts, die der Browser im Hintergrund ausführt, getrennt von einer Webseite. 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.
Weitere Informationen:
Auf dem Tab Dienstworker im Bereich Anwendung können Sie Dienstworker in DevTools prüfen und debuggen.
- 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. Das entspricht dem Offlinemodus, der im Bereich Netzwerk oder über die Option Go offlineim Befehlsmenü verfügbar ist. - Wenn Sie das Kästchen
Update beim Aktualisieren aktivieren, wird der Dienst-Worker bei jedem Seitenaufbau aktualisiert. - Wenn Sie das Kästchen
Für Netzwerk umgehen aktivieren, wird der Service Worker umgangen und der Browser wird gezwungen, die angeforderten Ressourcen im Netzwerk abzurufen. - Über den Link Netzwerkanfragen gelangen Sie zum Bereich Netzwerk mit einer Liste der abgefangenen Anfragen im Zusammenhang mit dem Dienst-Worker (
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 Abmelden wird der angegebene Service Worker abgemeldet. Unter Speicherplatz leeren erfahren Sie, wie Sie einen Dienst-Worker unregisteren und Speicher und Caches mit nur einem Klick löschen.
- In der Zeile Source (Quelle) sehen Sie, wann der aktuell ausgeführte Dienst-Worker installiert wurde. Der Link ist der Name der Quelldatei des Dienstarbeiters. Wenn Sie auf den Link klicken, werden Sie zur Quelle des Servicemitarbeiters weitergeleitet.
- In der Zeile Status sehen Sie den Status des Service Workers. Die Zahl in dieser Zeile (
#16im 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 Starten (wenn der Dienst-Worker angehalten ist) oder Anhalten (wenn der Dienst-Worker ausgeführt wird). Dienst-Worker können vom Browser jederzeit angehalten und gestartet werden. Sie können dies simulieren, indem Sie Ihren Dienst-Worker über den Link stop explizit 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 dadurch Fehler aufgedeckt, die auf falschen Annahmen über den globalen Status 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 dann nützlich, wenn Sie mehrere registrierte Dienstarbeiter haben. Wenn Sie neben einem Service Worker, der in einem anderen Tab ausgeführt wird, auf die Schaltfläche Fokus klicken, wird in Chrome der Fokus auf diesen Tab gelegt.
In der Tabelle Update-Zyklus sehen Sie die Aktivitäten des Dienstarbeiters und die verstrichene Zeit, z. B. für Installation, Warten und Aktivierung. Wenn Sie den genauen Zeitstempel der einzelnen Aktivitäten sehen möchten, klicken Sie auf die Schaltfläche
Maximieren.
Weitere Informationen finden Sie unter Der Service Worker-Lebenszyklus.
Wenn der Dienst-Worker Fehler verursacht, wird auf dem Tab Dienst-Worker das Symbol 
Fehler mit der Anzahl der Fehler neben der Zeile Quellcode angezeigt.
Über den Link mit der Nummer gelangen Sie zur Konsole mit allen protokollierten Fehlern.
Wenn Sie Informationen zu allen Dienstprogrammen aufrufen möchten, klicken Sie unten auf dem Tab Dienstprogramme 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-Speicher finden Sie eine schreibgeschützte Liste der Ressourcen, die mit der Cache API (Service Worker) im Cache gespeichert wurden.
Wenn Sie einen Cache zum ersten Mal öffnen und ihm eine Ressource hinzufügen, wird die Änderung in den 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 einem anderen Ursprung abgerufen wird, z. B. von einem CDN oder einer Remote-API, wenn CORS nicht aktiviert ist.
Um das Austreten von domänenübergreifenden Informationen zu verhindern, wird der Größe einer undurchsichtigen Antwort, die zur Berechnung von Speicherkontingentlimits verwendet wird (d.h. ob eine QuotaExceeded-Ausnahme ausgelöst wird), ein erheblicher Puffer hinzugefügt 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. Berücksichtigen Sie dies, wenn Sie festlegen, wie viele opake Antworten Sie im Cache speichern möchten. Andernfalls können Sie die Speicherkontingentlimits viel früher als erwartet aufgrund der tatsächlichen Größe der opaken Ressourcen überschreiten.
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 Dienstprogramme unregisteren und alle Caches und Speicher mit nur einem Klick löschen. Weitere Informationen finden Sie im Abschnitt unten.
Weitere Informationen:
Weitere Anleitungen für den Anwendungsbereich
In den folgenden Anleitungen finden Sie weitere Informationen zu den anderen Bereichen des Bereichs Anwendung.
Weitere Informationen: