Explorons les stratégies de caches offertes sur les PWA
Quand on parle de PWA, il est question de Service Workers, c'est un fait. Etant donné que ce dernier nous permet de servir des fichiers hors-ligne, il est donc pertinent de se pencher sur les mécanismes de mises en cache proposés par ce dernier.
A travers cette sessions, nous vous proposons de balayer les différentes et plus connues stratégies de mises en cache d'une PWA. Nous tacherons pour chacune de ces stratégies de vous proposer un exemple d'implémentation.
Nous mettrons aussi le nez dans workbox qui pourra vous aider dans la mise en place de ces dernières.
Les stratégies explorées seront les suivantes :
- Cache-Only - Network-Only - Cache-First - Network-First - Cache-Then-Network - Stale-While-Revalidate - Generic-Fallback En terme de pré-requis, il es essentiel de comprendre le fonctionnement et le cycle de vie d'un Service Worker.
Des images optimisées avec @nuxt/image
Pour réaliser des sites statiques les plus performants, il est important d’utiliser des images aux formats adaptés et les plus légères possibles.
Dans un contexte Nuxt, le plugin @nuxt/image nous aide à répondre à cette problématique tout en poussant les bonnes pratiques du moment en optimisant les Web Vitals afin de pour satisfaire l’algorithme de Google.
Après une explication des enjeux, je vous propose de vous montrer un exemple concret de migration dans mon entreprise pour éviter quelques erreurs.
*La connaissance de Vue.js et de Nuxt n'est pas un pré requis