Debuggen einer progressiven Web-App (PWA)

Verwenden Sie das Anwendungstool , um die Web-App-Manifeste, Service Worker und Service Worker-Caches einer PWA zu untersuchen, zu ändern und zu debuggen.

Das Anwendungstool enthält die folgenden Bereiche für PWA-Features:

• Verwenden Sie den Bereich Manifest , um Ihr Web-App-Manifest zu überprüfen.

• Verwenden Sie den Bereich Service Worker für Service Worker-bezogene Aufgaben, z. B.:

  • Aufheben der Registrierung oder Aktualisierung eines Diensts.
  • Emulieren von Pushereignissen.
  • Offline schalten.
  • Beenden eines Service Workers.

• Verwenden Sie den Bereich Cachespeicher , um Ihren Service Worker-Cache anzuzeigen.

• Verwenden Sie den Bereich Speicher , um anzuzeigen, wie viele Daten Ihre App auf dem Gerät speichert, und löschen Sie die gespeicherten Daten.

Die unten beschriebenen Features sind Features des Anwendungstools , die für PWAs relevant sind. Hilfe zu den anderen Features und Bereichen im Anwendungstool finden Sie unter:

• Anzeigen der Ressourcendateien, aus denen eine Webseite besteht
• Anzeigen und Bearbeiten des lokalen Speichers

Siehe auch:

• Übersicht über Progressive Web Apps (PWAs)

Web-App-Manifest

Wenn Sie möchten, dass Ihre Benutzer Ihre App zu ihren mobilen Homescreens hinzufügen können, benötigen Sie ein Web-App-Manifest. Das Manifest definiert, wie die App auf dem Startbildschirm angezeigt wird, wohin der Benutzer beim Starten über den Startbildschirm weitergeht und wie die App beim Start aussieht.

So überprüfen Sie ein Manifest:

1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu der Webseite, die das Manifest verwendet, z. B. Airhorner.com.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Anwendungstool aus.

4. Wählen Sie in der Gliederung auf der linken Seite im Abschnitt Anwendung die Option Manifest aus.

   Der Bereich App-Manifest wird angezeigt, in dem Sie das Manifest überprüfen können:

Der Bereich App-Manifest enthält die folgenden Abschnitte:

• Oberster Abschnitt, der den Manifestlink enthält

• Identität

• Präsentation

• Protokollhandler

• Symbole

• Überlagerung von Fenstersteuerelementen

• Screenshot Nr. 1

• Screenshot Nr. 2

• Um die Manifestquelldatei anzuzeigen, klicken Sie auf den Link unter der Bezeichnung App-Manifest . In der vorherigen Abbildung ist dieser Link , wodurch für Airhorner.com geöffnet wirdhttps://airhorner.com/manifest.jsonmanifest.json.

• In den Abschnitten Identität und Präsentation werden Felder aus der Manifestquelle in einer benutzerfreundlicheren Anzeige angezeigt.

• Im Abschnitt Symbole wird jedes Symbol angezeigt, das im Manifest angegeben wurde.

Service Workers

Service Worker sind eine grundlegende Technologie in der Webplattform. Service Worker sind Skripts, die der Browser im Hintergrund ausführt, getrennt von einer Webseite. Service Worker-Skripts ermöglichen Ihrer App den Zugriff auf Features, die keine Webseiten- oder Benutzerinteraktion erfordern, z. B. Pushbenachrichtigungen, Hintergrundsynchronisierung und Offlineerfahrungen.

Der Hauptort in DevTools zum Untersuchen und Debuggen von Service Workern ist der Bereich Service Worker im Anwendungstool .

So zeigen Sie Service Worker an:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z . B. Airhorner.com.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Anwendungstool aus.

4. Wählen Sie in der Gliederung auf der linken Seite im Abschnitt Anwendung die Option Service Worker aus.

   Der Bereich Service Worker wird angezeigt:

• Wenn auf der aktuell geöffneten Seite ein Service Worker installiert ist, wird der Service Worker im Bereich Service Worker aufgeführt. In der vorherigen Abbildung ist beispielsweise ein Service Worker für den Bereich von https://weather-pwa-sample.firebaseapp.cominstalliert.

• Das Kontrollkästchen Offline versetzt DevTools in den Offlinemodus. Dies entspricht dem Offlinemodus, der über das oder die Go offline Option im Befehlsmenü verfügbar ist.

• Das Kontrollkästchen Update beim erneuten Laden erzwingt, dass der Service Worker bei jedem Seitenladevorgang aktualisiert wird.

• Das Kontrollkästchen Für Netzwerk umgehen umgeht den Service Worker und zwingt den Browser, zum Netzwerk für angeforderte Ressourcen zu wechseln.

• Über den Link Netzwerkanforderungen gelangen Sie zum Netzwerktool mit einer Liste abgefangener Anforderungen im Zusammenhang mit dem Service Worker (filter is:service-worker-intercepted ). Weitere Informationen finden Sie weiter unten unter Anzeigen von Netzwerkanforderungen, die von einem Service Worker verarbeitet werden.

• Die Schaltfläche Aktualisieren führt eine einmalige Aktualisierung des angegebenen Service Workers aus.

• Die Schaltfläche "Push " emuliert eine Pushbenachrichtigung ohne Nutzlast (auch als Tickle bezeichnet).

• Die Schaltfläche Synchronisieren emuliert ein Hintergrundsynchronisierungsereignis.

• Der Link Registrierung aufheben hebt die Registrierung des angegebenen Service Workers auf. Informationen zum Aufheben der Registrierung eines Service Workers und Zum Zurücksetzen von Speicher und Caches mit nur einem Mausklick finden Sie unten unter Löschen von Speicher.

• Die Quellzeile informiert Sie darüber, wann der derzeit ausgeführte Service Worker installiert wurde. Der Link ist der Name der Quelldatei des Service Workers. Wenn Sie den Link auswählen, gelangen Sie zur Quelle des Service Workers.

• Die Statuszeile informiert Sie über die status des Service Workers. Die ID-Nummer neben dem grünen status Indikator (#36 in der vorherigen Abbildung) gilt für den derzeit aktiven Service Worker.

  Neben dem status:

  • Wenn der Service Worker beendet wird, wird eine Startschaltfläche angezeigt.
  • Wenn der Service Worker ausgeführt wird, wird eine Stoppschaltfläche angezeigt.

  Service Worker sind so konzipiert, dass sie jederzeit vom Browser beendet und gestartet werden. Das explizite Beenden Ihres Service Workers mithilfe der Schaltfläche "Beenden " kann dies simulieren.

  Das Beenden Ihres Service Workers ist eine hervorragende Möglichkeit, um zu testen, wie sich Ihr Code verhält, wenn der Service Worker wieder gestartet wird. Es werden häufig Fehler aufgrund fehlerhafter Annahmen über den persistenten globalen Zustand aufdeckt.

• Die Zeile Clients informiert Sie über den Ursprung, auf den der Service Worker ausgerichtet ist. Die Fokusschaltfläche ist hauptsächlich nützlich, wenn Sie das Kontrollkästchen Alle anzeigen aktiviert haben. Wenn dieses Kontrollkästchen aktiviert ist, werden alle registrierten Service Worker aufgelistet. Wenn Sie auf die Schaltfläche "Fokus " neben einem Service Worker klicken, der auf einer anderen Registerkarte ausgeführt wird, konzentriert sich Microsoft Edge auf diese Registerkarte.

• In der Tabelle Updatezyklus werden die Aktivitäten des Service Workers und deren verstrichene Zeiten angezeigt, z. B. Installieren, Warten und Aktivieren. Um den genauen Zeitstempel der einzelnen Aktivitäten anzuzeigen, klicken Sie auf die Schaltflächen Erweitern ().

Wenn der Service Worker Fehler verursacht, wird die Bezeichnung Fehler angezeigt.

Siehe auch:

• Service Worker-API : Informationen zu Service Workern bei MDN.

Anzeigen von Netzwerkanforderungen, die von einem Service Worker verarbeitet werden

Im Bereich Service Worker des Anwendungstools können Sie schnell über das Netzwerktool auf die Liste der Netzwerkanforderungen zugreifen, die von einem Service Worker verarbeitet werden.

So zeigen Sie die Netzwerkanforderungen an, die von einem Service Worker verarbeitet werden:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z . B. Airhorner.com.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Anwendungstool aus.

4. Wählen Sie in der Gliederung auf der linken Seite im Abschnitt Anwendung die Option Service Worker aus.

   Der Bereich Service Worker wird angezeigt.

5. Klicken Sie oben rechts im Bereich Service Worker auf die Schaltfläche Netzwerkanforderungen .

   Das Netzwerktool wird geöffnet.

   Das Textfeld Filter enthält is:service-worker-intercepted. Dieser Filter zeigt nur die Anforderungen an, die von diesem Service Worker verarbeitet wurden.

6. Aktualisieren Sie die Webseite.

7. Wählen Sie eine der Anforderungen aus, z. B. main.css.

   Die Randleiste wird angezeigt.

8. Klicken Sie auf der Randleiste auf die Registerkarte Zeitsteuerung .

   Im Abschnitt Service Worker werden Zeitsteuerungsinformationen zu den Phasen Startup und respondWith angezeigt.

Service Worker-Caches

Der Bereich Cachespeicher enthält eine schreibgeschützte Liste von Ressourcen, die mithilfe der Cache-API (Service Worker) zwischengespeichert wurden:

Wenn Sie einen Cache zum ersten Mal öffnen und eine Ressource hinzufügen, erkennt DevTools die Änderung möglicherweise nicht. Aktualisieren Sie die Seite, um den Cache anzuzeigen.

Alle geöffneten Caches sind unter dem Cachespeicher-Erweiterungsspeicher aufgeführt.

Kontingentnutzung

Einige Antworten im Bereich Cachespeicher werden möglicherweise als "undurchsichtig" 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 eine Weitergabe domänenübergreifender Informationen zu vermeiden, wird der Größe einer undurchsichtigen Antwort, die zum Berechnen von Speicherkontingentgrenzwerten (z. B. ob eine QuotaExceeded Ausnahme ausgelöst wird) verwendet wird, ein erheblicher Abstand hinzugefügt und von der navigator.storage API gemeldet.

Die Details dieser Auffüllung variieren von Browser zu Browser, aber für Microsoft Edge bedeutet dies, dass die Mindestgröße , die eine einzelne zwischengespeicherte undurchsichtige Antwort zur Gesamtspeicherauslastung beiträgt, etwa 7 Megabyte beträgt. Denken Sie an die Auffüllung, wenn Sie bestimmen, wie viele undurchsichtige Antworten Sie zwischenspeichern möchten, da Sie die Speicherkontingentbeschränkungen aufgrund der tatsächlichen Größe der undurchsichtigen Ressourcen leicht überschreiten können, als Sie andernfalls erwarten.

Verwandte Leitfäden:

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

Speicher löschen

Die Registerkarte Speicher löschen ist nützlich bei der Entwicklung einer progressiven Web-App. Verwenden Sie den Bereich Speicher löschen , um die Registrierung von Service Workern aufzuheben und alle Caches und Speicher mit nur einem Mausklick zu löschen.

Weitere Informationen

• Überprüfen der Netzwerkaktivität

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.