Préambule

• PWA : Progressive Web Application

  Une application PWA est un type assez récent d'application Web, dont l'objectif est de fournir à l'utilisateur une expérience proche de celle d'une application native, spécialement sous mobile/tablette.

  Cela implique principalement qu'une PWA :

  • doit être installable comme une application native, par exemple avec un icône sur le bureau/écran d'accueil,
  • peut s’accommoder d'une perte de réseau,
  • doit être sécurisée,
  • peut si besoin utiliser les périphériques de la plateforme, tels qu'une caméra, le GPS, ... grâce aux capacités natives du navigateur.
  • doit être responsive,

  Les 4 premiers points s'appuient sur les nouvelles capacités incluses dans la plupart des navigateurs modernes.

  Par exemple, la perte du réseau peut être gérée grâce à la mise en cache de certains fichiers et/ou données, via des processus qui tournent en parallèle de l'application : les services worker.

  La plupart du temps, le rôle des services workers est de :

  • charger en cache les fichiers principaux de l'application lors du premier accès au serveur sur lequel elle est hébergée,
  • d'intercepter les requêtes pour aller chercher des ressources et, en fonction de la stratégie choisie, d'aller reprendre ces ressources sur le réseau, ou bien en cache.
  • de recevoir des "push messages" de la part d'un serveur, ce qui permet ensuite de signaler à l'utilisateur qu'il faut rafraîchir les données de l'application (via un bouton, glissement vers le bas, ...), ou encore d'afficher une notification à l'écran.

1°/ Création d'un projet PWA avec @vue/cli

1.1°/ Initialisation d'un nouveau projet

Le plus simple est de partir d'un projet d'exemple créé avec vue/cli, en mode paramètres manuels :

vue create mon_projet

• Choisir le 3ème item du menu : Manually select Features
• Utiliser la barre d'espace pour cocher la "case" : Progressive Web App (PWA) Support
• Idem pour les autres plugins (vue-router, vuex, ...) que vous souhaiter intégrer.

1.2°/ Initialisation d'un projet existant

Si le projet existe déjà, il suffit de taper :

vue add pwa

Normalement, cela ne "casse" pas la structure du projet existant, à part le fichier main.js qui est modifié.

1.3°/ Création du service worker

Après la création du projet, un fichier src/registerServiceWorker.js a été ajouté, par rapport à un projet non PWA.

Ce fichier permet de faciliter l'enregistrement du service worker auprès du navigateur.

Dans ce fichier, on remarque que l'enregistrement utilise comme fichier par défaut : service-worker.js.