Bearbeitung von Navigationsanfragen

Las solicitudes de navegación son solicitudes de documentos HTML realizadas por su Browser cada vez que ingresa una nueva Url en la barra de navegación o sigue un Verknüpfung en una página que lo lleva a una nueva URL. Aquí es donde los trabajadores del servicio tienen su mayor impacto en el rendimiento: si utiliza un trabajador del servicio para responder a las solicitudes de navegación sin esperar a la red, puede asegurarse de que las navegaciones sean rápidas y confiables, además de ser resistentes cuando la red no está disponible. Esta es la ganancia de rendimiento más grande que proviene de un trabajador de servicios, en comparación con lo que es posible con el almacenamiento en Zwischenspeicher HTTP.

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"
von der Verkehr de la red. El HTML que carga a través de una solicitud de navegación inicia el flujo de todas las demás solicitudes de subrecursos como imágenes, Skripte y estilos.

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, para garantizar que el HTML, junto con la cadena de solicitudes de red posteriores, Sein (razonablemente) actualizado. Ir en contra de la red cada vez que el Nutzername navega a una nueva página, lamentablemente significa que cada navegación könnte Langsam sein Zumindest bedeutet dies, dass dies nicht der Fall sein wird sicherlich Schnell.

Verschiedene Ansätze für Architekturen

Rausfinden wie responder a las solicitudes de navegación evitando la red puede resultar complicado. El enfoque correcto depende en gran medida de la arquitectura de su sitio Netz y de la cantidad de URL únicas a las que los usuarios pueden acceder.

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.

Alternativamente, si prefiere evitar el almacenamiento en caché de todo su HTML, tal vez porque los usuarios tienden a navegar solo a un subconjunto de URL en su sitio, puede utilizar una Strategie de almacenamiento en caché en tiempo de ejecución obsoleto mientras se revalida. Sin embargo, tenga cuidado con este enfoque, ya que cada documento HTML individual se almacena en caché y se actualiza por separado. El uso del almacenamiento en caché en tiempo de ejecución para HTML es más apropiado si tiene una pequeña cantidad de URL que se revisan häufig von derselben Gruppe von Benutzern, und wenn Sie mit der erneuten Validierung dieser URLs unabhängig voneinander vertraut sind.

Einzelseiten-Apps

Las aplicaciones web modernas utilizan con frecuencia una arquitectura de una sola página. En él, JavaScript del lado del Klient modifica el HTML en respuesta a las acciones del usuario. Este modelo utiliza el 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. Una vez que el navegador ha cargado este HTML desde la caché, su JavaScript existente del lado del cliente toma el control y muestra el Inhalt HTML correcto para la URL de la solicitud de navegación original.

Workbox bietet die Tools, die Sie zur Implementierung dieses Ansatzes benötigen. das navigateFallback
option
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,