Transformez votre application Vue en une application Web progressive prête hors ligne

Dans ce didacticiel, nous vous guiderons tout au long du processus de création d’une application Vue.js et de sa transformation en application Web progressive.

Dans un paysage numérique où les utilisateurs exigent de plus en plus des expériences fluides quelles que soient les conditions du réseau, les applications Web progressives (PWA) apparaissent comme une solution transformatrice. Applications Web progressives sont des applications Web qui exploitent les capacités Web modernes pour offrir aux utilisateurs une expérience similaire à celle d’une application. Ils combinent le meilleur des applications Web et mobiles, offrant un chargement rapide, des fonctionnalités hors ligne et des expériences utilisateur fluides.

Concepts clés : service Workers et fichiers manifestes

Dans les PWA, les service Workers et les fichiers manifestes sont des composants fondamentaux qui contribuent à l’amélioration des performances et des capacités hors ligne des applications Web.

Travailleurs des services

Travailleurs des services sont des fichiers JavaScript qui fonctionnent en tant que processus en arrière-plan, distincts du thread principal du navigateur. Ils donnent à votre application Vue la capacité de gérer des tâches telles que la mise en cache des ressources, l’interception des requêtes réseau et l’activation de fonctionnalités telles que les notifications push.

Fichiers manifestes

Fichiers manifestesgénéralement nommé manifest.json, servent de modèle à votre PWA. Ils contiennent des métadonnées sur l’application, définissant comment elle doit apparaître et se comporter une fois installée sur l’appareil d’un utilisateur. les fichiers manifestes spécifient des détails essentiels tels que le nom de l’application, les icônes, l’URL de démarrage et les préférences d’affichage.

Maintenant que vous avez une solide compréhension de ces concepts clés, commençons à transformer votre Vue.js application en une application Web progressive prête à l’emploi.

Préparer votre application Vue.js

Avant de transformer votre application Vue.js en application web progressive, vous devez mettre en place un projet Vue.js. Si vous n’avez pas encore créé d’application Vue.js, suivez les étapes ci-dessous. Alternativement, si vous disposez d’une application Vue.js existante, vous pouvez ignorer la section d’installation.

Création d’une nouvelle application Vue.js

Pour créer une nouvelle application Vue.js, vous aurez besoin Afficher la CLI (interface de ligne de commande). Si vous ne l’avez pas installé globalement, vous pouvez le faire en exécutant la commande suivante :

npm install -g @vue/cli

Une fois Vue CLI installée, vous pouvez créer une nouvelle application Vue à l’aide des commandes suivantes :

vue create my-vue-pwa

Cette commande lance un processus de configuration interactif dans lequel vous pouvez choisir différentes configurations pour votre application Vue.js. Assurez-vous de sélectionner le préréglage par défaut et, lorsque vous êtes invité à sélectionner manuellement les fonctionnalités, assurez-vous de choisir le PWA option.

Cela configurera votre projet avec les configurations nécessaires pour les fonctionnalités progressives de l’application Web.

Notamment, la sélection du PWA L’option lors de la création de l’application générera automatiquement un registerServiceWorker.js déposer. Si, pour une raison quelconque, ce fichier n’est pas créé, vous pouvez utiliser la commande suivante pour ajouter les fonctionnalités de l’application Web progressive à votre projet Vue.js :

vue add pwa

Cette commande supplémentaire garantit que les dépendances et configurations nécessaires aux fonctionnalités de l’application Web progressive sont intégrées de manière transparente dans votre projet.

Créez une application simple de liste de tâches

À des fins de démonstration, créons une simple application de liste de tâches sur la page d’accueil de votre application Vue. Remplacer le contenu de App.vue avec le code suivant :

<template>
  <div class="home">
    <h1>Todo List</h1>
    <div>
      <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
      <button @click="addTodo">Add</button>
    </div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ 'completed': todo.completed }">{{ todo.text }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: 1, text: 'Learn Vue.js', completed: false },
        { id: 2, text: 'Build a PWA', completed: false },
        { id: 3, text: 'Deploy to Netlify', completed: false },
      ],
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return;
      this.todos.push({ id: this.todos.length + 1, text: this.newTodo, completed: false });
      this.newTodo = '';
    },
  },
};
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

Dans le code ci-dessus :

• Nous modifions le contenu du App.vue fichier pour créer une liste de tâches.
• Le modèle comprend un champ de saisie pour ajouter de nouvelles tâches, un bouton pour les ajouter et une liste pour afficher les tâches existantes.
• Les Todos sont représentés par des objets avec des propriétés telles que id, textet completed.
• Le v-for La directive restitue dynamiquement chaque élément de tâche dans la liste.
• Des cases à cocher sont incluses pour chaque tâche, et leur statut d’achèvement est géré par le completed propriété.
• Les cases à cocher sont liées au completed propriété en utilisant le v-model directive, permettant le marquage interactif des tâches comme terminées ou incomplètes.
• Le addTodo La méthode permet l’ajout de nouvelles tâches à la liste, avec validation d’entrée pour éviter les tâches vides.
• Un style simple est appliqué aux tâches terminées, indiqué visuellement par une décoration de texte en ligne.

Cette application de liste de tâches sert de base pour transformer votre application Vue.js en une application Web progressive prête hors ligne.

Modifier le fichier manifeste

Maintenant que votre application Vue.js est configurée, y compris une fonctionnalité de base, l’étape suivante consiste à améliorer ses capacités d’application Web progressive en configurant le manifest.json déposer.

Le manifest.json Le fichier joue un rôle crucial dans la définition de la façon dont votre PWA apparaît et se comporte lorsqu’elle est installée sur l’appareil d’un utilisateur. En raison du module PWA utilisé, ce fichier sera automatiquement généré pendant le processus de construction, garantissant qu’il contient les informations nécessaires pour une expérience PWA transparente.

Configurer les métadonnées de l’application

Le manifest.json Le fichier comprend des éléments cruciaux qui contribuent à l’expérience PWA. Pour mettre à jour ces informations, vous pouvez modifier votre vue.config.js , qui fait office de centre de configuration pour votre application Vue.js. Ouvrez le vue.config.js (créez-en un s’il n’est pas déjà présent) dans le répertoire racine de votre projet et ajoutez ou modifiez la section suivante :

module.exports = {
  

  pwa: {
    name: 'My ToDo App',
    short_name: 'ToDo',
    description: 'A ToDo progressive web app',
    start_url: "https://www.sitepoint.com/",
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#41b383',
    icons: [
      {
        src: '/img/icons/icon-72x72.png',
        sizes: '72x72',
        type: 'image/png',
      },
      
    ],
  },
};

Propriétés du fichier manifeste :

• nom: le nom complet de votre application.
• nom court: une version courte du nom de votre application pour les environnements à espace limité.
• description: une brève description de votre application.
• start_url: la page qui se charge au lancement de votre PWA.
• afficher: définit le mode d’affichage ; ici, autonome garantit qu’elle apparaît comme une application autonome.
• Couleur de l’arrière plan: la couleur d’arrière-plan de l’application.
• theme_color: la couleur du thème de l’application.
• Icônes: un tableau d’icônes pour différentes résolutions d’appareil.

En mettant à jour le vue.config.js fichier, vous vous assurez que le module PWA de votre application Vue.js génère le manifest.json fichier avec les configurations spécifiées pendant le processus de construction. Cette génération dynamique simplifie la maintenance de vos métadonnées PWA, vous permettant d’apporter des modifications directement dans la configuration de votre projet.

Mettre en œuvre des techniciens de service

Les techniciens de service sont un composant essentiel des applications Web progressives (PWA) chargés d’activer des fonctionnalités avancées telles que les capacités hors ligne, la synchronisation en arrière-plan et les notifications push.

Le fichier Service Worker sera automatiquement généré pendant le processus de construction, garantissant son inclusion dans l’environnement de production. En mode développement, les service Workers ne sont pas inclus par défaut. Cette omission est intentionnelle et sert à éviter des problèmes potentiels.

L’activation des techniciens de service dans le développement pourrait conduire à l’utilisation d’actifs mis en cache, ce qui pourrait entraîner des écarts avec les dernières modifications locales.

Pour créer l’application Vue.js et générer le fichier Service Worker, la commande suivante peut être utilisée :

npm run build

L’exécution de cette commande déclenche le processus de construction de Vue, qui inclut la création du fichier de service worker dans un dist répertoire pour le déploiement en production.

Enregistrez les techniciens de service

Le registerServiceWorker.js Le fichier est automatiquement inclus dans votre projet Vue.js lorsqu’il est généré avec Vue CLI ou le module pwa. Ce fichier joue un rôle crucial dans l’intégration des service Workers dans votre application Vue.js. Son objectif principal est de faciliter l’enregistrement du script Service Worker, permettant à votre application d’exploiter les fonctionnalités progressives de l’application Web, telles que la mise en cache et les fonctionnalités hors ligne.

Approfondissons le code et comprenons ses composants clés :

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\\n' +
        'For more details, visit <https://goo.gl/AFskqB>'
      );
    },
    registered () {
      console.log('Service worker has been registered.');
    },
    cached () {
      console.log('Content has been cached for offline use.');
    },
    updatefound () {
      console.log('New content is downloading.');
    },
    updated () {
      console.log('New content is available; please refresh.');
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error (error) {
      console.error('Error during service worker registration:', error);
    }
  });
}

Explications du code :

1. Vérification de l’environnement. Le if (process.env.NODE_ENV === 'production') Cette condition garantit que le technicien de service est enregistré uniquement en mode production. Il s’agit d’une considération essentielle, car les techniciens de service sont censés améliorer les performances et les capacités hors ligne de l’application dans l’environnement de production.

2. Fonction d’enregistrement. Le register la fonction est importée de 'register-service-worker' et est responsable de l’enregistrement effectif du script du service worker.

3. Rappels. Les rappels au sein de l’objet de configuration gèrent divers événements du cycle de vie du technicien de service.

   • ready. Ce rappel est déclenché lorsque l’application est servie à partir du cache par un service worker. Cela indique que l’application fonctionne avec succès hors ligne.
   • registered. Signale que le technicien de service a été enregistré avec succès.
   • cached. Indique que le contenu a été mis en cache pour une utilisation hors ligne. Il s’agit d’une fonctionnalité clé des PWA, garantissant que les utilisateurs peuvent accéder à l’application même sans connexion Internet.
   • updatefound. Informe qu’un nouveau contenu est en cours de téléchargement. Cela fait partie de la capacité du service worker à récupérer et à mettre en cache les actifs mis à jour en arrière-plan.
   • updated. Alerte qu’un nouveau contenu est disponible, invitant l’utilisateur à actualiser l’application pour charger la dernière version.
   • offline. Avertit l’utilisateur lorsqu’il n’y a pas de connexion Internet et que l’application s’exécute en mode hors ligne. Cela garantit une expérience utilisateur transparente, même dans des conditions de réseau difficiles.
   • error. Enregistre toutes les erreurs pouvant survenir lors du processus d’inscription du technicien de service.

Personnaliser le Service Worker

Le registerServiceWorker.js Le fichier de votre projet Vue.js fournit un cadre flexible qui vous permet de personnaliser le comportement de votre service worker. Alors que la configuration par défaut utilise console.log instructions pour la journalisation, vous pouvez améliorer l’expérience utilisateur en incorporant des fenêtres contextuelles ou des notifications. Voyons comment vous pouvez atteindre ce niveau de personnalisation.

Vous pouvez remplacer le console.log déclarations avec des notifications contextuelles pour offrir une expérience visuellement plus attrayante aux utilisateurs. Pour y parvenir, vous pouvez exploiter des bibliothèques populaires telles que Alerte douce ou des API de navigateur natives.

Utiliser SweetAlert

1. Tout d’abord, installez SweetAlert dans votre projet :

   npm install sweetalert2
   

2. Modifier le registerServiceWorker.js déposer:

   
   import { register } from 'register-service-worker';
   import Swal from 'sweetalert2';
   
   if (process.env.NODE_ENV === 'production') {
     register(`${process.env.BASE_URL}service-worker.js`, {
       ready() {
         Swal.fire({
           title: 'App is Offline',
           text: 'You can use this app even without an internet connection.',
           icon: 'success',
         });
       },
       registered() {
         Swal.fire('Service worker has been registered.');
       },
       cached() {
         Swal.fire('Content has been cached for offline use.');
       },
       updatefound() {
         Swal.fire('New content is downloading.');
       },
       updated() {
         Swal.fire({
           title: 'New Content Available',
           text: 'Please refresh to load the latest version.',
           icon: 'info',
         });
       },
       offline() {
         Swal.fire({
           title: 'No Internet Connection',
           text: 'App is running in offline mode.',
           icon: 'warning',
         });
       },
       error(error) {
         console.error('Error during service worker registration:', error);
       },
     });
   }
   

Dans cet exemple, nous avons remplacé le console.log déclarations avec notifications SweetAlert. Vous pouvez personnaliser l’apparence et le comportement de ces notifications en fonction de vos préférences de conception.

Rendez votre application installable

Les applications Web progressives offrent une expérience d’installation transparente, permettant aux utilisateurs d’ajouter votre application à l’écran d’accueil de leur appareil pour un accès rapide. Dans cette section, nous vous guiderons pour inviter les utilisateurs à installer votre PWA.

Inviter les utilisateurs à installer votre PWA

Encourager les utilisateurs à installer votre PWA améliore l’engagement des utilisateurs et offre une expérience semblable à celle d’une application native. Vous pouvez déclencher une invite d’installation en fonction de certaines conditions, telles que les interactions des utilisateurs ou le temps passé sur votre site.

Pour implémenter cette fonctionnalité, vous pouvez utiliser le @owliehq/vue-addtohomescreen brancher. Ce plugin est conçu exclusivement pour Vue 3, offrant une solution sans tracas pour intégrer un Ajouter à l’écran d’accueil bouton dans votre application.

Installez le plug-in

Pour commencer, installez le plugin en utilisant npm ou Yarn :

npm install @owliehq/vue-addtohomescreen

Ajouter le plugin

Dans ton src/main.js fichier, initialisez le plugin en l’important et en transmettant les paramètres de personnalisation souhaités. Cet exemple définit la couleur du bouton sur bleu :

import { createApp } from 'vue';
import App from './App.vue';
import AddToHomescreen from '@owliehq/vue-addtohomescreen';
import './registerServiceWorker'

const app = createApp(App);
app.use(AddToHomescreen, {
  buttonColor: 'blue',
});

app.mount('#app');

Ce code garantit que le plugin est intégré à votre application Vue 3 avec la personnalisation spécifiée.

Ces implémentations offrent aux utilisateurs des options claires pour installer votre PWA, créant ainsi une expérience plus centrée sur l’utilisateur et augmentant la probabilité d’adoption des applications. Les utilisateurs peuvent choisir d’installer l’application par programme ou de suivre un repère visuel pour l’ajouter à l’écran d’accueil de leur appareil.

Test de votre PWA prête pour le mode hors ligne

Pour tester localement votre application Web progressive prête pour la mise en ligne, commencez par installer le http-server en utilisant la commande :

npm install -g http-server

Ensuite, accédez au dist répertoire dans votre terminal et servez les fichiers à l’aide de la commande suivante :

http-server -o

Cette commande ouvrira la PWA dans votre navigateur par défaut.

Si votre PWA est déjà déployée, accédez-y en ouvrant le lien fourni par votre fournisseur d’hébergement une fois le processus de déploiement terminé.

Tests hors ligne avec les outils de développement du navigateur

La simulation des conditions hors ligne pour les tests peut être réalisée grâce aux outils de développement de navigateurs. Dans Google Chrome, ouvrez DevTools (F12 ou faites un clic droit et sélectionnez Inspecter), allez au Réseau et vérifiez l’onglet Hors ligne option pour simuler un environnement hors ligne. De même, dans Microsoft Edge, ouvrez DevTools, accédez au Réseau conditions et vérifiez l’onglet Hors ligne option pour simuler un scénario hors ligne.

Conclusion

En conclusion, transformer votre application Vue.js en une application Web progressive apporte une multitude d’avantages, notamment une expérience utilisateur améliorée, des fonctionnalités hors ligne et des performances améliorées. En mettant en œuvre des techniciens de service, des fichiers manifestes et des stratégies de mise en cache, votre application devient résiliente aux différentes conditions du réseau et offre aux utilisateurs une expérience transparente.