Debuggen progressiver Web-Apps (PWAs)

Verwenden Sie den Bereich "Anwendung ", um Web-App-Manifeste, Service Worker und Service Worker-Caches zu überprüfen, zu ändern und zu debuggen.

In diesem Artikel werden nur die Progressive Web App-Features des Anwendungsbereichs erläutert. Hilfe zu den anderen Bereichen im Bereich "Anwendung " finden Sie unter "Seitenressourcen anzeigen" und "Lokalen Speicher anzeigen und bearbeiten".

Siehe auch Übersicht über progressive Web-Apps (PWAs).See also Overview of Progressive Web-Apps (PWAs).

Zusammenfassung

• Verwenden Sie den Manifestbereich , um Das Web-App-Manifest zu prüfen und Zu Homescreen-Ereignissen hinzufügen auszulösen.

• Verwenden Sie den Bereich "Service Worker " für eine ganze Reihe von Service-Worker-bezogenen Aufgaben, z. B. das Aufheben der Registrierung oder Aktualisierung eines Diensts, das Emulieren von Pushereignissen, das Offlineschalten oder das Beenden eines Service Workers.

• Zeigen Sie ihren Service Worker-Cache im Bereich "Cachespeicher" an.

• Heben Sie die Registrierung eines Dienstmitarbeiters auf, und löschen Sie alle Speicher- und Caches mit einem einzigen Klick auf die Schaltfläche im Bereich "Speicher löschen ".

Web-App-Manifest

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

Nachdem Sie Ihr Manifest eingerichtet haben, können Sie es mithilfe des Manifestbereichs des Anwendungsbereichs untersuchen.

• Wenn Sie sich die Manifestquelle ansehen möchten, klicken Sie auf den Link unter der App-Manifestbezeichnung (https://airhorner.com/manifest.json in der vorherigen Abbildung).

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

• Im Abschnitt "Symbole" werden alle von Ihnen angegebenen Symbole angezeigt.

Service Workers

Service Worker sind eine grundlegende Technologie in der zukünftigen Webplattform. Hierbei handelt es sich um Skripts, die der Browser getrennt von einer Webseite im Hintergrund ausführt. Mithilfe der Skripts können Sie auf Features zugreifen, die ohne eine Webseite oder Benutzerinteraktion wie Pushbenachrichtigungen, Hintergrundsynchronisierung und Offlinefunktionen erforderlich sind.

Der Bereich "Service Worker " im Bereich "Anwendung" ist der Hauptplatz in DevTools, um Service Worker zu untersuchen und zu debuggen.

• Wenn ein Service Worker auf der aktuell geöffneten Seite 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 oder die Go offline Option im Befehlsmenü verfügbar ist.

• Das Kontrollkästchen " Beim erneuten Laden aktualisieren " erzwingt, dass der Dienstmitarbeiter bei jedem Laden der Seite aktualisiert wird.

• Das Kontrollkästchen "Umgehung für Netzwerk" umgeht den Dienstmitarbeiter und erzwingt, dass der Browser für angeforderte Ressourcen zum Netzwerk wechseln muss.

• Die Schaltfläche " Aktualisieren " führt eine einmalige Aktualisierung des angegebenen Dienstmitarbeiters durch.

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

• Die Schaltfläche " Synchronisieren " emuliert ein Hintergrundsynchronisierungsereignis.

• Mit der Schaltfläche " Registrierung aufheben " wird die Registrierung des angegebenen Dienstmitarbeiters aufgehoben. Sehen Sie sich "Speicher löschen " an, um die Registrierung eines Dienstmitarbeiters aufzuheben und Speicher und Caches mit einem einzigen Klick auf die Schaltfläche zu löschen.

• In der Zeile "Quelle " erfahren Sie, wann der aktuell ausgeführte Service Worker installiert wurde. Der Link ist der Name der Quelldatei des Dienstmitarbeiters. Wenn Sie auf den Link klicken, werden Sie an die Quelle des Dienstmitarbeiters gesendet.

• In der Zeile "Status" wird der Status des Dienstmitarbeiters angezeigt. Die ID-Nummer neben der grünen Statusanzeige (#36 in der vorherigen Abbildung) ist für den derzeit aktiven Service Worker. Neben dem Status wird eine Startschaltfläche (wenn der Service Worker angehalten wird) oder eine Stoppschaltfläche (wenn der Service Worker ausgeführt wird) angezeigt. Servicemitarbeiter sind so konzipiert, dass sie jederzeit vom Browser angehalten und gestartet werden. Das explizite Beenden ihres Servicemitarbeiters mithilfe der Schaltfläche "Beenden " kann dies simulieren. Das Beenden Des Service Worker ist eine hervorragende Möglichkeit, um zu testen, wie sich Ihr Code verhält, wenn der Service Worker wieder gestartet wird. Häufig werden Fehler aufgrund fehlerhafter Annahmen über den dauerhaften globalen Zustand angezeigt.

• In der Zeile "Clients " wird der Ursprung angegeben, auf den der Dienstmitarbeiter beschränkt ist. Die Fokusschaltfläche ist hauptsächlich hilfreich, wenn Sie das Kontrollkästchen " Alle anzeigen" aktiviert haben. Wenn dieses Kontrollkästchen aktiviert ist, werden alle registrierten Servicemitarbeiter aufgelistet. Wenn Sie auf die Fokusschaltfläche neben einem Service Worker klicken, der auf einer anderen Registerkarte ausgeführt wird, konzentriert sich Microsoft Edge auf diese Registerkarte.

Wenn der Dienstmitarbeiter Fehler verursacht, wird eine neue Bezeichnung mit dem Namen "Fehler " angezeigt.

Service Worker-Caches

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

Hinweis

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

Wenn zwei oder mehr Caches geöffnet sind, werden die Caches unter der Dropdownliste "Cachespeicher " angezeigt, wie im folgenden Screenshot dargestellt.

Kontingentverwendung

Einige Antworten im Cachespeicherbereich werden möglicherweise als "undurchsichtig" gekennzeichnet. Dies bezieht sich auf eine Antwort, die von einem anderen Ursprung abgerufen wurde, z. B. aus einem CDN oder Remote-API, wenn CORS nicht aktiviert ist.

Um Lecks von domänenübergreifenden Informationen zu vermeiden, wird der Größe einer undurchsichtigen Antwort, die zum Berechnen von Speicherkontingentlimits verwendet wird (z. B. ob eine QuotaExceeded Ausnahme ausgelöst wird) und von der navigator.storage API gemeldet, ein erheblicher Abstand hinzugefügt.

Die Details dieses Abstands variieren von Browser zu Browser, aber für Microsoft Edge bedeutet dies, dass die Mindestgröße , die jede einzelne zwischengespeicherte undurchsichtige Antwort zur Gesamtspeichernutzung beiträgt , ungefähr 7 Megabyte beträgt. Denken Sie beim Ermitteln der Anzahl undurchsichtiger Antworten, die Sie zwischenspeichern möchten, an den Abstand, da Sie die Speicherkontingenteinschränkungen möglicherweise viel früher überschreiten können, als Sie andernfalls aufgrund der tatsächlichen Größe der undurchsichtigen Ressourcen erwarten.

Verwandte Leitfäden:

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

Speicher löschen

Der Bereich "Speicher löschen " ist ein sehr nützliches Feature bei der Entwicklung progressiver Web-Apps. In diesem Bereich können Sie die Registrierung von Servicemitarbeitern aufheben und alle Caches und den Speicher mit einem einzigen 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 Originalseite befindet sich hier und wurde von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.