Stratégies de Service Worker
Cache d’abord, réseau d’abord, obsolète pendant la revalidation — choix selon le type de ressource
Stratégies de Service Worker est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Présentation des stratégies de mise en cache
Un worker de service intercepte les requêtes réseau et décide de fournir la réponse depuis le cache, depuis le réseau ou depuis les deux. Workbox nomme quatre stratégies principales, chacune adaptée à un type de ressource différent.
CacheFirst
CacheFirst fournit la réponse depuis le cache et n’interroge le réseau qu’en cas d’absence dans le cache. Cette stratégie convient aux ressources qui changent rarement et dont l’URL contient un hachage du contenu, comme les polices et les images.
// serve cached, fall back to network on missNetworkFirst
NetworkFirst essaie d’abord le réseau et utilise le cache comme solution de repli lorsque vous êtes hors ligne ou en cas d’expiration du délai. Cette stratégie convient aux réponses d’API pour lesquelles la fraîcheur est importante, tout en souhaitant un accès hors ligne.
// try network, fall back to cache when offlineStaleWhileRevalidate
StaleWhileRevalidate renvoie immédiatement la copie en cache pour accélérer l’affichage, tout en récupérant une copie à jour en arrière-plan pour actualiser le cache. Cette stratégie convient particulièrement aux paquets JS et CSS.
// return cache now, update cache in backgroundNetworkOnly et CacheOnly
Les deux extrêmes : NetworkOnly récupère toujours les ressources sur le réseau, sans mise en cache, tandis que CacheOnly ne fournit que du contenu mis en cache à l’avance. Utilisez-les respectivement pour les requêtes POST qui ne peuvent pas être mises en cache et pour les ressources strictement mises en cache à l’avance.
Le tableau runtimeCaching
Dans la configuration de Workbox, runtimeCaching est un tableau de règles. Chaque règle fait correspondre des URL de requêtes et associe une stratégie ainsi qu’un nom de cache.
VitePWA({
workbox: {
runtimeCaching: [ /* rules */ ]
}
});Une règle urlPattern
Chaque règle possède un urlPattern (expression régulière ou fonction), un handler (le nom de la stratégie) et des options, comme un nom de cache.
{
urlPattern: /\/api\//,
handler: "NetworkFirst",
options: { cacheName: "api-cache" }
}Mettre en cache les ressources statiques avec CacheFirst
Faites correspondre les images et les polices, puis fournissez-les avec CacheFirst, car leurs URL contenant un hachage du contenu changent lorsque le fichier est modifié.
{
urlPattern: /\.(?:png|jpg|svg|woff2)$/,
handler: "CacheFirst",
options: { cacheName: "static-assets" }
}Mettre en cache les paquets JS avec StaleWhileRevalidate
Fournissez immédiatement les paquets de scripts et de styles depuis le cache, tout en les actualisant en arrière-plan.
{
urlPattern: /\.(?:js|css)$/,
handler: "StaleWhileRevalidate",
options: { cacheName: "assets" }
}Le module d’expiration
Sans limites, les caches grossissent indéfiniment. L’option expiration plafonne le nombre d’entrées et leur durée de conservation, en supprimant d’abord les plus anciennes.
options: {
cacheName: "api-cache",
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60 * 24
}
}Mettre en cache les réponses opaques
Pour les réponses d’API provenant d’une autre origine, ajoutez souvent cacheableResponse avec les statuts autorisés afin de ne stocker que les réponses réussies.
options: {
cacheableResponse: { statuses: [0, 200] }
}Vérification rapide
Quelle stratégie convient le mieux aux réponses d’API qui doivent être à jour tout en restant disponibles hors ligne ?
Récapitulatif
Les stratégies de Workbox correspondent aux types de ressources : CacheFirst pour les ressources statiques, NetworkFirst pour les réponses d’API et StaleWhileRevalidate pour les paquets JS/CSS. Définissez-les dans le tableau runtimeCaching avec un urlPattern, un handler et des options, comme le module expiration, afin de limiter la taille du cache.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Stratégies de Service Worker » est-elle gratuite ?
Oui — le texte complet de « Stratégies de Service Worker » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Stratégies de Service Worker » ?
Cache d’abord, réseau d’abord, obsolète pendant la revalidation — choix selon le type de ressource Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Stratégies de Service Worker » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer vite-plugin-pwa
- Stratégies de Service Worker
- Prise en charge hors ligne et synchronisation en arrière-plan
- Notifications push dans une PWA Vue