Contenidos
Reagieren Sie auf Browsing-Anfragen, ohne mit einem Servicemitarbeiter im Internet zu warten.
Netzwerkzuverlässigkeit
Navigationsanforderungen sind Anforderungen für HTML-Dokumente, die von Ihrem Browser jedes Mal gestellt werden, wenn Sie eine neue URL in die Navigationsleiste eingeben oder einem Link auf einer Seite folgen, der Sie zu einer neuen URL führt. Hier haben Service-Mitarbeiter den größten Einfluss auf die Leistung: Indem Sie einen Service-Mitarbeiter verwenden, um auf Browsing-Anfragen zu antworten, ohne auf das Web zu warten, können Sie sicherstellen, dass die Navigation schnell und zuverlässig ist und ausfallsicher ist, wenn das Netzwerk nicht verfügbar ist. Dies ist der größte Leistungsgewinn, den ein Servicemitarbeiter im Vergleich zu HTTP-Caching erzielt.
Wie im Handbuch Identifizieren geladener Ressourcen im Netzwerk beschrieben, ist eine Suchanforderung die erste von vielen Anforderungen, die möglicherweise an das Netzwerk gestellt werden
"Wasserfall"
des Netzwerkverkehrs. Der HTML-Code, den Sie über eine Navigationsanforderung laden, initiiert den Fluss aller anderen Unterressourcenanforderungen wie Bilder, Skripts und Stile.
In einem Servicemitarbeiter holen Mit der Ereignisbehandlungsroutine können Sie feststellen, ob es sich bei einer Anforderung um eine Navigation handelt, indem Sie das Kontrollkästchen aktivieren request.mode Eigentum in der FetchEvent. Wenn es konfiguriert ist für 'navigieren', dann ist es eine Navigationsanfrage.
Verwenden Sie in der Regel nicht langlebig Cache-Control-Header um die HTML-Antwort für eine Suchanforderung zwischenzuspeichern. Sie sollten normalerweise über das Netzwerk mit zufrieden sein
Cache-Kontrolle: kein Cache, um sicherzustellen, dass der HTML-Code zusammen mit der Kette nachfolgender Netzwerkanforderungen (angemessen) auf dem neuesten Stand ist. Gehen Sie jedes Mal gegen das Netz, wenn der Benutzer zu einer neuen Seite navigiert. Leider bedeutet dies, dass jede Navigation erfolgt könnte Langsam sein Zumindest bedeutet dies, dass dies nicht der Fall sein wird sicherlich Schnell.
Cache-Kontrolle: kein Cache bedeutet, dass der Browser den Server überprüfen (oder "erneut validieren") muss, bevor eine zuvor zwischengespeicherte Ressource verwendet wird. Dies erfordert eine Round-Trip-Netzwerkkommunikation, bevor die Ressource verwendet werden kann.
Verschiedene Ansätze für Architekturen
Rausfinden wie Es kann schwierig sein, auf Browsing-Anfragen zu reagieren, indem Sie das Web meiden. Der richtige Ansatz hängt weitgehend von der Architektur Ihrer Website und der Anzahl der eindeutigen URLs ab, auf die Benutzer zugreifen können.
Obwohl es keine einheitliche Lösung gibt, sollten die folgenden allgemeinen Richtlinien Ihnen bei der Entscheidung helfen, welcher Ansatz am besten geeignet ist.
Kleine statische Stellen
Wenn Ihre Webanwendung aus einer relativ kleinen Anzahl (denken Sie an ein paar Dutzend) eindeutiger URLs besteht und jede dieser URLs einer anderen statischen HTML-Datei entspricht, besteht ein praktikabler Ansatz darin, alle diese HTML-Dateien zwischenzuspeichern und auf die Navigation zu reagieren Anfragen mit dem entsprechenden zwischengespeicherten HTML.
Mit dem Caching können Sie den HTML-Code im Voraus zwischenspeichern, sobald der Service Worker installiert ist, und den zwischengespeicherten HTML-Code jedes Mal aktualisieren, wenn Sie Ihre Site neu erstellen und Ihren Service Worker erneut bereitstellen.
Wenn Sie es vorziehen, das Zwischenspeichern Ihres gesamten HTML-Codes zu vermeiden, können Benutzer beim erneuten Validieren eine veraltete Laufzeit-Caching-Strategie verwenden, da Benutzer möglicherweise nur zu einer Teilmenge von URLs auf Ihrer Site navigieren. Seien Sie jedoch bei diesem Ansatz vorsichtig, da jedes einzelne HTML-Dokument separat zwischengespeichert und aktualisiert wird. Die Verwendung des Laufzeit-Caching für HTML ist besser geeignet, wenn Sie eine kleine Anzahl von URLs haben, die überprüft werden häufig von derselben Gruppe von Benutzern, und wenn Sie mit der erneuten Validierung dieser URLs unabhängig voneinander vertraut sind.
Einzelseiten-Apps
Moderne Webanwendungen verwenden häufig eine einzelne Seitenarchitektur. Darin ändert clientseitiges JavaScript den HTML-Code als Reaktion auf Benutzeraktionen. Dieses Modell verwendet die Verlaufs-API um die aktuelle URL zu ändern, während der Benutzer mit der Webanwendung interagiert, was zu einem "Schein" -Browsen führt. Während das nachfolgende Surfen "gefälscht" sein kann, ist das anfängliche Surfen echt und es ist immer noch wichtig sicherzustellen, dass es nicht im Web blockiert wird.
Glücklicherweise gibt es bei Verwendung der Einzelseitenarchitektur ein einfaches Muster, das für die anfängliche Navigation aus dem Cache verwendet werden muss: das Anwendungsshell. In diesem Modell antwortet Ihr Servicemitarbeiter auf Navigationsanforderungen, indem er unabhängig von der angeforderten URL dieselbe eindeutige HTML-Datei zurückgibt, die bereits zwischengespeichert wurde. Dieser HTML-Code sollte einfach sein und möglicherweise aus einem generischen Ladeindikator oder bestehen Skelettinhalt. Sobald der Browser diesen HTML-Code aus dem Cache geladen hat, übernimmt Ihr vorhandenes clientseitiges JavaScript und zeigt den korrekten HTML-Inhalt für die URL der ursprünglichen Suchanforderung an.
Workbox bietet die Tools, die Sie zur Implementierung dieses Ansatzes benötigen. das navigierenFallback
Möglichkeit
Mit dieser Option können Sie angeben, welches HTML-Dokument als Shell Ihrer Anwendung verwendet werden soll, sowie eine optionale Zulassungs- und Verweigerungsliste, um dieses Verhalten auf eine Teilmenge Ihrer URLs zu beschränken.
Mehrseitige Apps
Wenn Ihr Webserver den HTML-Code für Ihre Website dynamisch generiert oder wenn Sie mehr als ein paar Dutzend eindeutige Seiten haben, ist es viel schwieriger, das Netz bei der Bearbeitung von Browsing-Anforderungen zu umgehen. Der Rat in Alles andere trifft wahrscheinlich auf Sie zu.
Für eine bestimmte Teilmenge mehrseitiger Anwendungen können Sie möglicherweise einen Servicemitarbeiter implementieren, der die auf Ihrem Webserver zum Generieren von HTML verwendete Logik vollständig repliziert. Dies funktioniert am besten, wenn Sie Routing-Informationen und -Vorlagen zwischen der Server- und der Service Worker-Umgebung austauschen können, und insbesondere, wenn Ihr Webserver JavaScript verwendet (ohne sich darauf verlassen zu müssen)
Node.js-spezifische Funktionen wie Dateisystemzugriff).
Wenn Ihr Webserver in diese Kategorie fällt und Sie einen Ansatz untersuchen möchten, um die HTML-Generierung aus dem Netzwerk auf Ihren Servicemitarbeiter zu verlagern, lesen Sie den Leitfaden unter Jenseits von SPAs: Alternative Architekturen für Ihre PWA kann Ihnen beim Einstieg helfen.
Alles andere
Wenn Sie nicht auf zwischengespeicherte HTML-Navigationsanforderungen antworten können, sollten Sie Maßnahmen ergreifen, um sicherzustellen, dass das Hinzufügen eines Servicemitarbeiters zu Ihrer Site (zur Bearbeitung anderer Nicht-HTML-Anforderungen) Ihre Navigation nicht verlangsamt. Wenn Sie den Servicemitarbeiter starten, ohne ihn zum Beantworten einer Suchanforderung zu verwenden, tritt eine geringe Latenz auf (wie in erläutert) Erstellen Sie mit Service Worker schnellere und stabilere Anwendungen). Sie können diesen Overhead verringern, indem Sie eine aufgerufene Funktion aktivieren Navigationsvorladung, und dann Verwenden der Netzwerkantwort
das wurde in deinem vorinstalliert holen Event-Handler.
Arbeitsbox bietet eine Hilfsbibliothek Diese Funktion erkennt, ob das Vorladen der Navigation unterstützt wird, und vereinfacht in diesem Fall die Aufforderung an Ihren Servicemitarbeiter, die Netzwerkantwort zu verwenden.
Foto von Aaron Burden im Unsplash,
