Debuggen progressiver Web-Apps (PWAs)

Verwenden Sie das Anwendungstool , um Web-App-Manifeste, Service Worker und Service Worker-Caches zu untersuchen, zu ändern und zu debuggen. Das Anwendungstool enthält die folgenden Bereiche für progressive Web-App-Features:

• Verwenden Sie den Bereich Manifest , um Ihr Web-App-Manifest zu überprüfen und "Zum Startbildschirm hinzufügen" -Ereignisse auszulösen.

• 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 die Registrierung eines Service Workers aufzuheben und alle Speicher und Caches zu löschen.

In diesem Artikel werden die Progressive Web App-Features des Anwendungstools erläutert. Hilfe zu den anderen Bereichen im Anwendungstool finden Sie unter Anzeigen der Ressourcendateien, aus denen eine Webseite besteht , und 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.

Nachdem Sie Ihr Manifest eingerichtet haben, können Sie den Bereich App-Manifest des Anwendungstools verwenden, um Ihr Manifest zu überprüfen:

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

• Manifestlink

• Identität

• Präsentation

• Protokollhandler

• Symbole

• Überlagerung von Fenstersteuerelementen

• Screenshot Nr. 1

• Screenshot Nr. 2

• Um die Manifestquelle anzuzeigen, klicken Sie auf den Link unter der Bezeichnung App-Manifest (manifest.json in der vorherigen Abbildung, die geöffnet wird https://airhorner.com/manifest.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. Mit diesen Skripts können Sie auf Features zugreifen, die keine Webseiten- oder Benutzerinteraktion erfordern, z. B. Pushbenachrichtigungen, Hintergrundsynchronisierung und Offlineerfahrungen.

Der Bereich Service Worker im Anwendungstool ist die Standard Stelle in DevTools, um Service Worker zu untersuchen und zu debuggen:

• Wenn auf der aktuell geöffneten Seite ein Service Worker installiert ist, wird er in diesem Bereich 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 Netzwerktool verfügbar ist, oder der Go offline Option im Befehlsmenü.

• 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.

• 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.

• Die Schaltfläche Registrierung aufheben hebt die Registrierung des angegebenen Service Workers auf. Unter Speicher finden Sie eine Möglichkeit, die Registrierung eines Service Workers aufzuheben und Speicher und Caches mit nur einem Klick zu löschen.

• 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 wird eine Startschaltfläche (wenn der Service Worker beendet wird) oder eine Stoppschaltfläche (wenn der Service Worker ausgeführt wird) 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.

Wenn der Service Worker Fehler verursacht, wird eine neue Bezeichnung namens Fehler 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

Der Speicherbereich ist ein sehr nützliches Feature bei der Entwicklung progressiver Web-Apps. In diesem Bereich können Sie die Registrierung von Service Workern aufheben und alle Caches und Speicher mit nur einem Klick löschen.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

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