Gestion des demandes de navigation

Las solicitudes de navegación son solicitudes de documentos HTML realizadas por su le navigateur cada vez que ingresa una nueva URL en la barra de navegación o sigue un relier 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 cache HTTP.

Comme détaillé dans le guide Identifier les ressources chargées à partir du réseau, une demande de navigation est la première des nombreuses demandes potentiellement effectuées sur le
"cascade"
du circulation 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, scripts y estilos.

À l'intérieur d'un travailleur de service aller chercher gestionnaire d'événements, vous pouvez déterminer si une requête est une navigation en vérifiant le request.mode propriété dans le FetchEvent. S'il est configuré pour 'naviguer', alors c'est une demande de navigation.

En règle générale, n'utilisez pas En-têtes Cache-Control pour mettre en cache la réponse HTML pour une demande de navigation. Ils devraient normalement être satisfaits sur le réseau, avec
Cache-Control: pas de cache, para garantizar que el HTML, junto con la cadena de solicitudes de red posteriores, être (razonablemente) actualizado. Ir en contra de la red cada vez que el Nom d'utilisateur navega a una nueva página, lamentablemente significa que cada navegación force Sois lent À tout le moins, cela signifie que ce ne sera pas sûrement Rapide.

Différentes approches des architectures

Trouver comme 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 la toile y de la cantidad de URL únicas a las que los usuarios pueden acceder.

Bien qu'il n'existe pas de solution universelle, les directives générales suivantes devraient vous aider à décider quelle approche est la plus viable.

Petits sites statiques

Si votre application Web se compose d'un nombre relativement petit (pensez: quelques dizaines) d'URL uniques et que chacune de ces URL correspond à un fichier HTML statique différent, une approche viable consiste à mettre en cache tous ces fichiers HTML et à répondre à la navigation. requêtes avec le HTML mis en cache approprié.

Avec la mise en cache, vous pouvez mettre en cache le HTML à l'avance, dès que le service worker est installé, et mettre à jour le HTML mis en cache chaque fois que vous reconstruisez votre site et redéployez votre service worker.

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 stratégie 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 souvent par le même groupe d'utilisateurs, et si vous êtes à l'aise avec la revalidation de ces URL indépendamment les unes des autres.

Applications d'une seule page

Las aplicaciones web modernas utilizan con frecuencia una arquitectura de una sola página. En él, JavaScript del lado del client modifica el HTML en respuesta a las acciones del usuario. Este modelo utiliza el API historique pour modifier l'URL actuelle au fur et à mesure que l'utilisateur interagit avec l'application Web, conduisant à ce qui est effectivement une navigation «fictive». Bien que la navigation ultérieure puisse être "fausse", la navigation initiale est réelle et il est toujours important de s'assurer qu'elle n'est pas bloquée sur le Web.

Heureusement, si vous utilisez l'architecture à page unique, il existe un modèle simple à suivre pour servir la navigation initiale à partir du cache: le shell d'application. Dans ce modèle, votre service worker répond aux demandes de navigation en renvoyant le même fichier HTML unique qui a déjà été mis en cache, quelle que soit l'URL demandée. Ce HTML devrait être basique et consister, peut-être, en un indicateur de chargement générique ou contenu squelette. 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 Contenu HTML correcto para la URL de la solicitud de navegación original.

Workbox fournit les outils dont vous avez besoin pour mettre en œuvre cette approche; les navigateFallback
option
vous permet de spécifier le document HTML à utiliser comme shell de votre application, ainsi qu'une liste facultative d'autorisation et de refus pour limiter ce comportement à un sous-ensemble de vos URL.

Applications multi-pages

Si votre serveur Web génère le HTML de votre site de manière dynamique, ou si vous avez plus de quelques dizaines de pages uniques, il est alors beaucoup plus difficile de contourner le net lors du traitement des demandes de navigation. Le conseil dans Tout le reste s'applique probablement à vous.

Mais pour un certain sous-ensemble d'applications multipages, vous pourrez peut-être implémenter un service worker qui réplique entièrement la logique utilisée sur votre serveur Web pour générer du HTML. Cela fonctionne mieux si vous pouvez partager des informations de routage et des modèles entre les environnements serveur et service worker, et en particulier si votre serveur Web utilise JavaScript (sans compter sur
Node.js-des fonctionnalités spécifiques, telles que l'accès au système de fichiers).

Si votre serveur Web entre dans cette catégorie et que vous souhaitez explorer une approche pour déplacer la génération HTML hors du réseau vers votre technicien de service, le guide sur Au-delà des SPA: architectures alternatives pour votre PWA peut vous aider à démarrer.

Tous les autres

Si vous ne parvenez pas à répondre aux demandes de navigation HTML mises en cache, vous devez prendre des mesures pour vous assurer que l'ajout d'un service worker à votre site (pour gérer d'autres demandes non HTML) ne ralentit pas vos navigations. Démarrer le service worker sans l'utiliser pour répondre à une demande de navigation introduira une petite latence (comme expliqué dans Créer des applications plus rapides et plus résilientes avec Service Worker). Vous pouvez atténuer cette surcharge en activant une fonction appelée précharge de navigation, et donc utilisation de la réponse du réseau
qui a été préchargé dans votre aller chercher gestionnaire d'événements.

Boîte de travail fournit une bibliothèque d'aide cette fonction détecte si la précharge de navigation est prise en charge et, si tel est le cas, simplifie le processus consistant à indiquer à votre technicien de service d'utiliser la réponse réseau.

photo par Aaron Burden au Unsplash,