Utilisation du plugin Vitepwa pour un site hors ligne

Le plugin Vitepwa d'Anthony Fu est un outil puissant pour améliorer les sites Web basés sur VITE avec des fonctionnalités hors ligne. Ce plugin simplifie le processus d'ajout d'un employé de service pour gérer le support hors ligne, la mise en cache des actifs et les notifications de mise à jour. Explorons les travailleurs des services et comment les mettre en œuvre à l'aide de Vitepwa.

Comprendre les travailleurs du service

Un travailleur de service est un script d'arrière-plan exécutant indépendamment de votre application Web. Sa fonction clé est d'intercepter les demandes de réseau, permettant diverses actions. Bien que capable de tâches complexes comme la compilation de typescript à la volée ou le transcodage vidéo, son utilisation la plus courante est la mise en cache des actifs pour l'amélioration des performances et l'accès hors ligne.

Vitepwa crée un travailleur de service qui pré-cache des fichiers HTML, CSS et JavaScript lors de la visite initiale du site. Les visites suivantes chargent ces ressources à partir du cache, éliminant les demandes de réseau. Même lors de la première visite, les clics ultérieurs chargent souvent le contenu pré-cache, améliorant considérablement la vitesse.

Versioning et manifester les fichiers

La gestion des mises à jour des travailleurs de service lorsque les modifications de code nécessitent un versioning minutieux. Les systèmes de construction génèrent généralement des noms de fichiers (par exemple, foo-ABC123.js ) incorporant des hachages de fichiers. Les mises à jour entraînent de nouveaux noms de fichiers (par exemple, foo-XYZ987.js ). Le travailleur des services doit gérer ces changements efficacement.

L'API des travailleurs de service est de bas niveau. La gestion manuelle des fichiers en cache est complexe. Workbox, une bibliothèque Google, simplifie cela, mais nécessite toujours des informations détaillées sur les actifs de votre processus de construction. Vitepwa aborde l'élégance en s'intégrant à Workbox et en le configurant automatiquement avec la sortie de build de Vite.

Mise en œuvre d'un employé de service avec Vitepwa

1. Installation: Installez le plugin à l'aide de npm i vite-plugin-pwa .

2. Configuration VITE: Importez et ajoutez le plugin à votre vite.config.js :

    import {Veepwa} à partir de "Vite-Plugin-PWA";
   
   Exporter de défaut DefiConfig ({
     Plugins: [VitePwa ()],
     // ... Autres configurations
   });

3. Inscription des travailleurs de service: enregistrez le fonctionnaire au point d'entrée de votre demande:

    import {registrersw} de "virtual: pwa-register";
   
   if ("ServiceWorker" dans Navigator) {
     registresw (); // Envisagez d'ajouter une logique conditionnelle pour les environnements de développement
   }

   La fonction registerSW gère le cycle de vie des travailleurs du service. La logique conditionnelle (par exemple, à l'exclusion localhost ) empêche l'activation des travailleurs du service pendant le développement.

4. Fonctionnalité hors ligne: la pré-cache fournie par Vitepwa permet automatiquement les fonctionnalités hors ligne de base. Les actifs sont servis à partir du cache même sans accès au réseau. Pour les capacités hors ligne plus avancées (par exemple, en utilisant IndededDB), une logique de travailleur de service personnalisé est nécessaire.

Mises à jour des travailleurs du service

Lorsque le code change, un nouveau travailleur de service avec un manifeste pré-cache mis à jour est généré. L'ancien travailleur de service continue de fonctionner jusqu'à ce que tous les onglets soient fermés et rouverts, garantissant une expérience utilisateur cohérente entre les sessions.

Amélioration de la gestion de la mise à jour avec onNeedRefresh

La fonction registerSW permet un processus de mise à jour plus lisse. Le rappel onNeedRefresh est déclenché lorsqu'un nouveau travailleur de service est disponible, offrant une occasion d'informer l'utilisateur et de lancer un rechargement contrôlé:

 registrersw ({
  onneedRefresh () {
    // affiche une notification à l'utilisateur, ce qui les incite à mettre à jour
    // ...
  }
});

Cache d'exécution

L'option de configuration workbox de VITEPWA permet la mise en cache d'exécution pour les actifs récupérés lors de l'exécution de l'application. Cela étend les capacités hors ligne au-delà des ressources pré-caches:

 Vitepwa ({
  Workbox: {
    RuntimeCaching: [/ * ... vos configurations de mise en cache d'exécution ... * /]
  }
})

Ajout d'un code de travailleur de service personnalisé

Pour intégrer la logique personnalisée, utilisez l'option importScripts dans la configuration workbox pour inclure des fichiers JavaScript externes:

 Vitepwa ({
  Workbox: {
    importations: ["sw-code.js"]
  }
})

Conclusion

Veepwa simplifie considérablement la mise en œuvre des travailleurs des services, fournissant une base robuste pour les fonctionnalités hors ligne et les performances améliorées. Bien que les fonctionnalités avancées nécessitent du code personnalisé, le plugin gère les complexités de la mise en cache et des mises à jour, permettant aux développeurs de se concentrer sur la logique d'application. Commencez avec des capacités hors ligne et explorez des fonctionnalités de travailleurs de service plus avancées au besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!