M1IF13 Web Avancé

This project is maintained by aurelient

TP 8 : Progressive Web apps

[TOC]

Audit de l’application

Dans un premier temps charger votre application (idéalement une version déployée) dans Chrome et l’examiner avec l’outil d’audit Lighthouse disponible dans les outils de développement.

Voici un exemple de résultat attendu à ce stade du projet :

Nous allons maintenant traiter des problèmes signalés par LightHouse

HTTPS

Depuis l’arrivée de Let’s Encrypt il n’y a plus d’excuses pour ne pas servir de pages en https.

Si vous utilisez surge, voir la page suivante pour forcer un déploiement en https : https://surge.sh/help/using-https-by-default

Chargements bloquants

Vérifier que les chargements de police de caractère et de css ne sont pas bloquants.

Permettez le téléchargement et le rendu asynchrone des polices et styles pour accélérer la première peinture. Si vous incluez des polices depuis votre index, chargez les avec rel="preload", en suivant ces indications.

Attention tester plutôt dans Chrome

App shell

La manière la plus propre de fournir un appshell efficace, est de faire une partie du rendu de l’application, i.e. la partie sans contenu, ni personalisation côté serveur (ce sera la même pour tout le monde). 1. Cela permet de ne faire le travail qu’une fois; 2. Le contenu peut être mis en cache côté serveur et transféré rapidement; 3. Il y a moins de calculs et de freins pour la première peinture côté client.

Pour des raisons de simplicité nous allons créer un appshell simple en éditant directement l’ index.html de notre projet.

Bannière / menu
Feedback de chargement

Afficher un spinner indiquant que le chargement est en cours.

Gestion de l’absence de JS
<noscript>
  <h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
    Sorry, but app is not available without javascript
  </h3>
</noscript>

Manifest

Nous allons maintenant rédiger un Web App Manifest. Voir l’exemple de la MDN ou celui de Google

Vous pouvez utiliser ce générateur d’icônes (mais de très nombreux autres sont disponibles).

Enfin inclure le manifest dans le head de votre index :

<link rel="manifest" href="/manifest.json">

Dans les outils de développement de Chrome il est possible d’inspecter son manifest.

Service Worker et Offline

Nous allons travailler sur la version de production. Nous ne voulons pas gérer les caches et le offline sur la version de dev. Idéalement il faudrait plutôt créer une version de pré-production.

Chargement des services workers

Ajouter un script simple qui chargera votre service worker depuis votre index.html

      // This is the service worker with the combined offline experience (Offline page + Offline copy of pages)

      // Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
      if (navigator.serviceWorker.controller) {
        console.log('[PWA Builder] active service worker found, no need to register')
      } else {
      //Register the ServiceWorker
        navigator.serviceWorker.register('./pwabuilder-sw.js', {
          scope: './'
        }).then(function(reg) {
          console.log('Service worker has been registered for scope:'+ reg.scope);
        });
      }

Pour des raisons de portée lié aux services workers le fichier pwabuilder-sw.js devra se trouver au même niveau que le fichier index.html dans le dossier dist.

Pour cela il faut modifier le fichier de build prod webpack pour copier le fichier pwabuilder-sw.js dans dist. On utilise pour cela CopyWebpackPlugin. Trouver l’endroit ou il est utilisé dans le fichier webpack.config.prod.js, ou sinon l’ajouter (voir la doc).

      {
        from: path.resolve(__dirname, '../pwabuilder-sw.js'),
        to: 'pwabuilder-sw.js',
        toType: 'file'  
      }
Création du service worker

En s’aidant de PWAbuilder, générer un fichier pwabuilder-sw.js. Que vous adapterez au besoin pour mettre en cache les éléments de votre choix.

Créer une page dédiée au Offline

Créer une nouvelle page et une nouvelle route offline. Cette page (et ses assets) sera toujours mise en cache et disponible hors-ligne.

Y afficher le trajet du T1 et ses horaires à Université Lyon 1.

Rendu

À rendre pour le lundi 25 juin à 23h59.

Penser à mettre à jour votre README, incluant à minima : les identifiants du binome (n° étudiant, nom, prénom), les instruction de build, les dépendances implicites (i.e. les choses installées en global), toute autre chose facilitant la compréhension du projet par le correcteur.

Créer une branche rendu-tp8, même si ceci est le dernier rendu du cours. Toute erreur sur la gestion des branches sera pénalisée.

Reporter le numéro Tomuss (pas de ‘p’ devant) de votre binome sur Tomuss.

Reporter le lien vers votre dépôt git qui permette de le cloner facilement, au format suivant : forge.univ-lyon1.fr:idutilisateur/projet.git

La mise en place des PWA étant plus avancée dans Chrome, ce TP sera corrigé avec Chrome.

Barême

Qualité de l’application - 10 pts

Capteurs mobile et PWA - 17 pts