Complétez les techniques traditionnelles de pré-capture avec les travailleurs des services.
Mise à jour
Fiabilité du réseau
La réalisation d'une tâche sur un site implique généralement plusieurs étapes. Par exemple, l'achat d'un produit sur un site Web de commerce électronique peut impliquer la recherche d'un produit, la sélection d'un article dans la liste de résultats, l'ajout de l'article au panier et la finalisation de la transaction en effectuant un paiement.
En termes techniques, parcourir différentes pages signifie faire un demande de navigation. En règle générale, non Je veux utiliser de longue durée Contrôle du cache en-têtes 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. Devoir aller à contre-courant du net chaque fois que l'utilisateur accède à une nouvelle page signifie malheureusement que chaque navigation peut être lente; au moins, cela signifie que ce ne sera pas sûrement Rapide.
Pour accélérer ces demandes, si vous pouvez anticiper l'action de l'utilisateur, vous pouvez demander ces pages et ressources à l'avance et les conserver dans le cache pendant une courte période jusqu'à ce que l'utilisateur clique sur ces liens. Cette technique s'appelle la prélecture et est généralement implémentée en ajoutant Balise aux pages, indiquant la ressource à rechercher précédemment.
Dans ce guide, nous explorerons différentes manières dont travailleurs des services il peut être utilisé en complément des techniques traditionnelles de présélection.
Cas de production
Marché libre C'est le plus grand site de commerce électronique d'Amérique latine. Pour accélérer la navigation, ils injectent dynamiquement étiquettes dans certaines parties du flux. Par exemple, sur les pages de liste, ils obtiennent la page de résultats suivante dès que l'utilisateur fait défiler vers le bas de la liste:
Les fichiers préchargés sont demandés avec la priorité "la plus basse" et stockés dans le cache HTTP ou dans le Cache (selon que la ressource peut être mise en cache ou non), pendant une période qui varie selon les navigateurs. Par exemple, à partir de Chrome 85, cette valeur est de 5 minutes. Les ressources sont conservées pendant cinq minutes, après quoi le Contrôle du cache les règles de la ressource s'appliquent.
L'utilisation de la mise en cache du service worker peut vous aider à prolonger la durée de vie des ressources de prélecture au-delà de la fenêtre de cinq minutes.
Par exemple, portail sportif italien Virgilio Sport utilise les techniciens de service pour prévisualiser les articles les plus populaires sur votre page d'accueil. Ils utilisent également le API d'informations sur le réseau pour éviter la pré-capture pour les utilisateurs qui sont sur une connexion 2G.
De ce fait, plus de 3 semaines d'observation Virgilio Sport a assisté à l'amélioration des temps de chargement pour la navigation vers les articles. 78%et augmente le nombre d'impressions d'articles 45%.
Mettre en œuvre la mise en cache avec Workbox
Dans la section suivante, nous utiliserons Workbox pour montrer comment implémenter différentes techniques de mise en cache dans le service worker qui peuvent être utilisées en complément de , voire un remplaçant, déléguant cette tâche entièrement au technicien de service.
Mise en garde: Vous devez prendre des mesures pour vous assurer que l'ajout d'un technicien de service sur votre site ne finit pas par ralentir votre navigation. 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 les techniciens de service). Vous pouvez atténuer cette surcharge en activant une fonction appelée précharge de navigation, puis en utilisant le réponse du réseau qui a été préchargé dans votre gestionnaire d'événements de récupération.
1. Pré-cachez les pages statiques et les sous-ressources de page
La mise en cache préalable est la capacité de l'agent de service à mettre en cache les fichiers pendant son installation.
La mise en cache semble similaire au préchargement, mais c'est une technique différente. Dans le premier, le service worker trouve et stocke des ressources (généralement des fichiers statiques) pendant son installation et les conserve dans le cache jusqu'à ce qu'une nouvelle version du fichier soit disponible. Dans le second, des ressources sont demandées à l'avance pour l'avoir dans le cache pendant de courtes périodes de temps afin d'accélérer la navigation ultérieure.
Dans les cas suivants, la pré-capture est utilisée pour atteindre un objectif similaire à la pré-capture: accélérer la navigation.
Mise en cache statique de la page
Pour les pages générées au moment de la compilation (par exemple. about.html, contact.html), ou sur des sites complètement statiques, on peut simplement ajouter les documents du site à la liste de précache, afin qu'ils soient déjà disponibles dans le cache à chaque fois que l'utilisateur y accède:
workbox.precaching.precacheAndRoute([
{URL: '/about.html', revision: 'abcd1234'},
]);Mise en cache des sous-ressources de page
La mise en cache des ressources statiques que différentes sections du site pourraient utiliser (par exemple, JavaScript, CSS, etc.) est une bonne pratique générale et peut donner un coup de pouce supplémentaire dans les scénarios de pré-recherche.
Pour accélérer la navigation sur un site e-commerce, vous pouvez utiliser des balises sur les pages de liste pour prévisualiser les pages de détail des produits pour les premiers produits d'une page de liste. Si vous avez déjà mis en cache des ressources enfants sur la page du produit, cela peut rendre la navigation encore plus rapide.
Pour mettre en œuvre ceci:
- Ajouter un
balise à la page:
<relier rel="prefetch" href="/phones/smartphone-5x.html" as="document">- Ajoutez les ressources enfants de la page à la liste de pré-vérification dans le service worker:
workbox.precaching.precacheAndRoute([
'/styles/product-page.ac29.css',
]);2. Prolonger la durée de vie utile des ressources préalables à la collecte de fonds
Comme mentionné précédemment, récupère et conserve les ressources dans le cache HTTP pendant une période limitée, après quoi le Contrôle du cache les règles d'une ressource s'appliquent. À partir de Chrome 85, cette valeur est de 5 minutes.
Les techniciens de service vous permettent de prolonger la durée de vie des pages de prélecture, tout en offrant l'avantage supplémentaire de rendre ces ressources disponibles pour une utilisation hors ligne.
Dans l'exemple ci-dessus, vous pouvez compléter le utilisé pour obtenir une page produit avec une stratégie de mise en cache d'exécution Workbox.
Pour mettre en œuvre cela:
- Ajouter un
balise à la page:
<relier rel="prefetch" href="/phones/smartphone-5x.html" as="document">- Implémentez une stratégie de mise en cache d'exécution dans le service worker pour ces types de requêtes:
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'document-cache',
plugins: [
new workbox.expiration.Brancher({
maxAgeSeconds: 30 * 24 * 60 * 60,
}),
],
});Dans ce cas, nous avons choisi d'utiliser un stratégie obsolète en cours de revalidation. Dans cette stratégie, des pages peuvent être demandées à la fois au cache et au réseau, en parallèle. La réponse provient du cache si disponible, sinon du réseau. Le cache est toujours mis à jour avec la réponse du réseau à chaque requête réussie.
3. Déléguer le recrutement préalable au travailleur de service
Dans la plupart des cas, la meilleure approche consiste à utiliser . L'étiquette est un suggestion de ressources conçu pour rendre la pré-capture aussi efficace que possible.
Dans certains cas, cependant, il peut être préférable de déléguer entièrement cette tâche au technicien de service. Par exemple: pour précharger les premiers produits dans une page de liste de produits rendue côté client, vous devrez peut-être en injecter plusieurs balises dynamiquement sur la page, en fonction d'une réponse de l'API. Cela peut momentanément consommer du temps dans le fil principal de la page et rendre la mise en œuvre difficile.
Dans des cas comme celui-ci, utilisez une «stratégie de communication de la page vers le service worker» pour déléguer entièrement la tâche de préchargement au technicien de service. Ce type de communication peut être réalisé en utilisant worker.postMessage ():
Les Package de fenêtre Workbox il simplifie ce type de communication, en faisant abstraction de nombreux détails de l'appel sous-jacent en cours.
La prélecture avec la fenêtre Workbox peut être implémentée comme suit:
- Sur la page: appelez le technicien de service et transmettez le type de message et la liste des URL à effectuer une pré-recherche:
const wb = new Boîte de travail('/sw.js');
wb.S'inscrire();const prefetchResponse = attendre wb.messageSW({taper: 'PREFETCH_URLS', urls: […]});
- Dans le service worker: implémentez un gestionnaire de messages pour émettre un
aller chercher ()demande pour chaque URL de rechercher précédemment:
addEventListener('message', (un événement) => {
si (un événement.Les données.taper === 'PREFETCH_URLS') {
}
});
