Contenidos
Répondez aux demandes de navigation sans attendre sur le Web en utilisant un technicien de service.
Fiabilité du réseau
Les demandes de navigation sont des demandes de documents HTML effectuées par votre navigateur chaque fois que vous entrez une nouvelle URL dans la barre de navigation ou que vous suivez un lien sur une page qui vous amène à une nouvelle URL. C'est là que les techniciens de service ont leur plus grand impact sur les performances: en utilisant un technicien de service pour répondre aux demandes de navigation sans attendre le Web, vous pouvez vous assurer que les navigations sont rapides et fiables, tout en étant résilientes lorsque le réseau n'est pas disponible. Il s'agit du gain de performances le plus important obtenu par un service worker, par rapport à ce qui est possible avec la mise 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 trafic réseau. Le code HTML que vous chargez via une demande de navigation lance le flux de toutes les autres demandes de sous-ressources telles que les images, les scripts et les styles.
À 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, pour s'assurer que le HTML, ainsi que la chaîne des requêtes réseau ultérieures, sont (raisonnablement) à jour. Aller à contre-courant du net chaque fois que l'utilisateur accède à une nouvelle page, cela signifie malheureusement que chaque navigation force Sois lent À tout le moins, cela signifie que ce ne sera pas sûrement Rapide.
Cache-Control: pas de cache signifie que le navigateur doit vérifier (ou "revalider") avec le serveur avant d'utiliser une ressource précédemment mise en cache. Cela nécessite une communication réseau aller-retour pour terminer avant que la ressource puisse être utilisée.
Différentes approches des architectures
Trouver comme Répondre aux demandes de navigation en évitant le Web peut être difficile. La bonne approche dépend en grande partie de l'architecture de votre site Web et du nombre d'URL uniques auxquelles les utilisateurs peuvent accéder.
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.
Sinon, si vous préférez éviter de mettre en cache tout votre HTML, peut-être parce que les utilisateurs ont tendance à naviguer uniquement vers un sous-ensemble d'URL sur votre site, vous pouvez utiliser une stratégie de mise en cache à l'exécution obsolète lors de la revalidation. Cependant, soyez prudent avec cette approche, car chaque document HTML individuel est mis en cache et mis à jour séparément. L'utilisation de la mise en cache d'exécution pour HTML est plus appropriée si vous avez un petit nombre d'URL qui sont vérifiées 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
Les applications Web modernes utilisent souvent une architecture à une seule page. Dans celui-ci, JavaScript côté client modifie le HTML en réponse aux actions de l'utilisateur. Ce modèle utilise le 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. Une fois que le navigateur a chargé ce code HTML à partir du cache, votre code JavaScript existant côté client prend le relais et affiche le contenu HTML correct pour l'URL de la demande de navigation d'origine.
Workbox fournit les outils dont vous avez besoin pour mettre en œuvre cette approche; les naviguer
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,
