Im Bereich Anwendung können Sie Manifeste von Webanwendungen, Service Worker und Service Worker-Caches prüfen, ändern und debuggen.
Progressive Web-Apps (PWAs) sind moderne, qualitativ hochwertige Apps, die mithilfe von Webtechnologie erstellt werden. PWAs bieten ähnliche Funktionen wie iOS- und Android-Apps sowie Desktop-Apps. Sie sind:
- Zuverlässig auch bei instabilen Netzwerkbedingungen
- Installierbar, um Oberflächen von Betriebssystemen wie den Ordner Anwendungen unter Mac OS X, das Startmenü unter Windows und den Startbildschirm unter Android und iOS zu starten.
- Zeigen Sie sich in Aktivitäts-Wechslern, Gerätesuchmaschinen wie Spotlight und in Tabellen zum Teilen von Inhalten an.
In diesem Leitfaden werden nur die Funktionen der progressiven Web-App im Bereich Anwendung behandelt. Hilfe zu den anderen Bereichen finden Sie im letzten Abschnitt dieses Leitfadens, Leitfäden für den Bereich „Weitere Anwendung“.
Zusammenfassung
- Verwenden Sie den Tab Manifest, um Ihr Web-App-Manifest zu prüfen.
- Den Tab Service Workers können Sie für eine Reihe von Service Worker-Aufgaben verwenden, z. B. um die Registrierung eines Dienstes aufzuheben oder einen Dienst zu aktualisieren, Push-Ereignisse zu emulieren, offline zu gehen oder einen Service Worker zu beenden.
- Rufen Sie den Service Worker-Cache auf dem Tab Cache-Speicher auf.
- Auf dem Tab Speicherinhalt löschen können Sie die Registrierung eines Service Workers aufheben und den gesamten Speicher und alle Caches mit nur einem Klick löschen.
Web-App-Manifest
Wenn Sie möchten, dass Nutzer Ihre App unter Mac OS X dem Ordner Anwendungen, unter Windows im Startmenü und unter Android und iOS dem Startbildschirm hinzufügen können, benötigen Sie ein Web-App-Manifest. Das Manifest definiert, wie die App auf dem Startbildschirm angezeigt wird, wohin der Nutzer beim Starten vom Startbildschirm geleitet werden soll und wie die App beim Start aussieht.
Wenn Sie Ihr Manifest eingerichtet haben, können Sie es im Bereich Anwendung auf dem Tab Manifest prüfen.
- Klicken Sie auf den Link unter dem Label App Manifest (
manifest.webmanifestim Screenshot oben), um die Manifestquelle aufzurufen. - In den Abschnitten Identity (Identität) und Presentation (Präsentation) werden nur Felder aus der Manifestquelle dargestellt, die benutzerfreundlicher ist.
- Im Abschnitt Protokoll-Handler können Sie die Registrierung des URL-Protokoll-Handlers Ihrer PWA mit nur einem Klick testen. Weitere Informationen finden Sie unter Registrierung des URL-Protokoll-Handlers testen.
- Im Abschnitt Symbole werden alle von Ihnen angegebenen Symbole und die zugehörigen Masken angezeigt.
- Im Abschnitt Shortcut #N werden Informationen zu allen Verknüpfungsobjekten angezeigt.
- Im Abschnitt Screenshot Nr. N sehen Sie die Screenshots für eine umfassendere Installations-UI Ihrer App.
Wenn in den Entwicklertools ein Fehler auftritt, beispielsweise ein Symbol, das nicht geladen werden kann, wird auf dem Tab Manifest der Abschnitt Installierbarkeit 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 auch die sicheren Bereiche auf maskierbare Symbole prüfen. Das Format von Symbolen wird an die Plattform angepasst.
Wenn Sie die Symbole kürzen möchten, sodass nur der minimal sichere Bereich sichtbar ist, aktivieren Sie die Option 
Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen.
Wenn Ihr gesamtes Logo im sicheren Bereich sichtbar ist, brauchen Sie nichts weiter zu tun.
Trigger-Installation
In Chrome können Sie die Installation Ihrer PWA direkt über die Benutzeroberfläche aktivieren und bewerben. Informationen zum Bereitstellen eigener In-App-Installationen
So lösen Sie den Installationsvorgang Ihrer PWA aus:
- Öffnen Sie die Landingpage der PWA in Chrome.
Klicken Sie oben rechts in der Adressleiste auf
Installieren.
Folge der Anleitung auf dem Bildschirm.
Die Funktion App installieren kann den Workflow auf Mobilgeräten nicht simulieren. Im Desktop-Chrome-Browser 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 auf Mobilgeräten.
Wenn Sie die echte Nutzung auf Mobilgeräten testen möchten, können Sie ein echtes Mobilgerät über Remote-Debugging mit den Entwicklertools verbinden. Um die Installation auf dem verbundenen Mobilgerät auszulösen, öffnen Sie das Dreipunkt-Menü 
und klicken Sie auf 
App installieren.
Tastenkombinationen prüfen
Über App-Verknüpfungen können Sie schnell auf eine Reihe häufig verwendeter Aktionen zugreifen.
Wenn Sie sich die Verknüpfungen ansehen möchten, die Sie in der Manifest-Datei definiert haben, scrollen Sie auf dem Tab Manifest zu den Abschnitten Shortcut #N.
Screenshots für eine umfassendere Installations-UI ansehen
Wenn Sie Ihrer Manifestdatei eine Beschreibung und Screenshots hinzufügen, werden umfassendere Installationsdialogfelder angezeigt.
Scrollen Sie auf dem Tab Manifest zu den Abschnitten Screenshot #N, um sich die Screenshots anzusehen.
Registrierung des URL-Protokoll-Handlers testen
PWAs können Links verarbeiten, für die ein bestimmtes Protokoll verwendet wird, was eine bessere Integration ermöglicht. Informationen zum Erstellen eines Handlers finden Sie unter Registrierung von URL-Protokoll-Handlern für PWAs.
So testen Sie den Handler:
- Öffnen Sie die Entwicklertools auf der Landingpage Ihrer PWA. Sehen Sie sich zum Beispiel diese Demo-PWA an.
- Installieren Sie die PWA von der Demoseite und laden Sie die App nach der Installation neu. Die PWA wurde im Browser als Handler für das
web+coffee-Protokoll registriert. - Geben Sie im Abschnitt 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, klicken Sie auf Protokoll-Handler öffnen.
- Erlauben Sie im nächsten Dialogfeld, dass die App
web+coffee-Links verarbeiten darf.
Wenn der Handler den Link erfolgreich verarbeitet, wird in der App das Bild einer Kaffeetasse angezeigt.
Service Worker
Service Worker sind eine grundlegende Technologie in der Webplattform der Zukunft. Diese Skripts werden vom Browser getrennt von einer Webseite im Hintergrund ausgeführt. Mit diesen Skripts können Sie auf Funktionen zugreifen, die keine Webseite oder Nutzerinteraktion erfordern, wie Push-Benachrichtigungen, Hintergrundsynchronisierung und Offlinefunktionen.
Weitere Leitfäden:
Der Tab Service Workers im Bereich Anwendung ist der Hauptort in den Entwicklertools zur Prüfung und Fehlerbehebung von Service-Workern.
- Wenn auf der aktuell geöffneten Seite ein Service Worker installiert ist, wird dies auf diesem Tab aufgeführt. Im Screenshot oben ist beispielsweise ein Service Worker für den Bereich
https://airhorner.com/installiert. - Wenn du das Kästchen Offline
aktivierst, werden die Entwicklertools in den Offlinemodus versetzt. Dies entspricht dem Offlinemodus, der im Bereich Netzwerk oder mit der Option Go offlineim Cmdmenü verfügbar ist. - Wenn Sie das Kästchen
Beim Aktualisieren aktualisieren anklicken, wird der Service Worker bei jedem Seitenaufbau zur Aktualisierung gezwungen. - Wenn Sie das Kästchen
Für Netzwerk umgehen anklicken, wird der Service Worker umgangen und der Browser wird gezwungen, die angeforderten Ressourcen im Netzwerk zu suchen. - Ü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). - Über den Link Aktualisieren wird der angegebene Service Worker einmalig aktualisiert.
- Die Schaltfläche Push emuliert eine Push-Benachrichtigung ohne Nutzlast (auch als Tickel bezeichnet).
- Mit der Schaltfläche Synchronisieren wird ein Synchronisierungsereignis im Hintergrund emuliert.
- Über den Link Registrierung aufheben wird die Registrierung des angegebenen Service Workers aufgehoben. Unter Speicherinhalt löschen erfahren Sie, wie Sie mit einem einzigen Klick einen Service Worker abmelden und Speicher und Caches löschen können.
- In der Zeile Source (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 zur Quelle des Service-Workers weitergeleitet.
- In der Zeile Status sehen Sie den Status des Service Workers. Die Zahl in dieser Zeile (
#16im Screenshot) gibt an, wie oft der Service Worker aktualisiert wurde. Wenn Sie das Kästchen
Beim Aktualisieren aktualisieren aktivieren, werden Sie feststellen, dass sich die Zahl bei jedem Seitenaufbau erhöht.
Neben dem Status sehen Sie einen Link start (wenn der Service Worker angehalten wurde) oder einen Link stop (wenn der Service Worker ausgeführt wird). Service Worker sind so konzipiert, dass sie jederzeit vom Browser beendet und gestartet werden können. Das explizite Beenden Ihres Service Workers über den Link stop kann dies simulieren. Durch das Beenden des Service Workers können Sie ganz einfach testen, wie sich Ihr Code verhält, wenn der Service Worker wieder gestartet wird. Es zeigt häufig Fehler aufgrund fehlerhafter Annahmen über den persistenten globalen Zustand an. - In der Zeile Clients wird der Ursprung angegeben, dem der Service Worker zugeordnet ist. Die Schaltfläche Fokus ist vor allem dann 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, wird dieser Tab in Chrome hervorgehoben.
In der Tabelle Aktualisierungszyklus sehen Sie die Aktivitäten des Service Workers und die jeweils verstrichenen Zeiten, z. B. Installation, Wartezeit und Aktivierung. Um den genauen Zeitstempel jeder Aktivität zu sehen, klicken Sie auf die Schaltfläche
Maximieren.
Weitere Informationen finden Sie unter Service Worker-Lebenszyklus.
Wenn der Service Worker Fehler verursacht, wird auf dem Tab Service Workers neben der Zeile Source (Quelle) das Symbol 
Fehler mit der Anzahl der Fehler angezeigt.
Über den Link mit der Nummer gelangen Sie zur Console 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. Dieser Link führt zu chrome://serviceworker-internals/?devtools, wo Sie weitere Fehlerbehebungen für Ihre Service Worker vornehmen können.
Service Worker-Caches
Der Tab Cache-Speicher enthält 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, erkennen die Entwicklertools die Änderung möglicherweise nicht. Laden Sie die Seite neu. Der Cache sollte dann angezeigt werden.
Sind zwei oder mehr Caches geöffnet, werden diese unter dem Drop-down-Menü Cache-Speicher angezeigt.
Kontingentnutzung
Einige Antworten auf dem Tab „Cache-Speicher“ werden möglicherweise als undurchsichtig gekennzeichnet. Dies bezieht sich auf eine Antwort, die aus einem anderen Ursprung abgerufen wird, z. B. von einem CDN oder einer Remote API, wenn CORS nicht aktiviert ist.
Damit keine domainübergreifenden Informationen verloren gehen, wird die Größe einer intransparenten Antwort erheblich aufgewertet, um die Speicherkontingentlimits zu berechnen (z.B. ob eine QuotaExceeded-Ausnahme ausgelöst wird) und von der navigator.storage API gemeldet wird.
Die Details dieses Abstands variieren von Browser zu Browser. Für Google Chrome bedeutet dies jedoch, dass die Mindestgröße, die eine einzelne intransparente Antwort im Cache zur Gesamtspeichernutzung beiträgt, ungefähr 7 MB beträgt. Sie sollten dies beachten, wenn Sie festlegen, wie viele intransparente Antworten Sie im Cache speichern möchten, da Sie Speicherkontingentbegrenzungen aufgrund der tatsächlichen Größe der intransparenten Ressourcen viel früher als erwartet überschreiten könnten.
Weitere Leitfäden:
- Stack Overflow: Welche Einschränkungen gelten für intransparente Antworten?
- Workbox: Informationen zum Speicherkontingent
Speicherinhalt löschen
Der Tab Speicherinhalt löschen ist eine sehr nützliche Funktion bei der Entwicklung progressiver Web-Apps. Über diesen Tab können Sie mit nur einem Klick Service Worker abmelden und alle Caches und Speicher leeren. Weitere Informationen dazu finden Sie im folgenden Abschnitt.
Weitere Leitfäden:
Weitere Anleitungen für den Bereich „Anwendung“
In den folgenden Anleitungen finden Sie weitere Informationen zu den anderen Bereichen des Steuerfelds Anwendung.
Weitere Leitfäden: