Google LightHouse

Lighthouse est une extension open source pour Chrome, développée par Google, qui permet de mesurer la performance et qualité d’une application web.

Pour atteindre un score élevé, il faudra valider plusieurs points, ce qui définira, par la même occasion, notre application web en tant que Progressive Web App.

Une PWA doit :

• être accessible hors ligne
• afficher du contenu même si javascript n’est pas disponible
• fonctionner en HTTPS
• contenir un thème de couleur pour la barre d’adresse du navigateur
• être responsive, et en particulier mobile friendly
• être installable sur son téléphone et proposer son installation à l'utilisateur lors de sa Xème visite
  • avoir une icône d'application et se lancer avec un splashscreen.

Ionic 2

Ionic est un framework basé sur Angular et Cordova. Il permet de créer des applications mobiles cross platform. Néanmoins, les concepteurs du framework ont aussi pensé aux PWA. Il est donc simple d'en créer une. Et, en plus, d’atteindre un score élevé.

Créer notre PWA avec Ionic 2

Installation globale d’Ionic

sudo npm install -g ionic cordova

Création d’un nouveau projet

ionic start NewPWA blank --v2 

On lance notre application

ionic serve

Testons notre nouvelle application avec Lighthouse. Cliquez sur l'icône Lighthouse du navigateur et generate report :

Nous allons régler les points qui nous font défaut.

Afficher un contenu même si javascript est inactif

Pour cela, on va juste rajouter un bloc de code, dans index.html, afin d’avertir l’utilisateur qu’il doit avoir javascript activé afin d’avoir une bonne expérience avec l’application web.

<noscript>
  <h1>Javascript est désactivé</h1>
  <p>Veuillez l’activer afin d’avoir une bonne expérience avec l’application</p>
</noscript>

Activer le service worker

Il suffit de décommenter le bloc de code relatif au service worker dans le fichier index.html.

Le service worker est préconfiguré pour mettre en cache la coquille de l’application (shell graphique). Il suffira de le modifier ultérieurement, si on veut prendre en compte les données de l’application.

De plus, il proposera à l’utilisateur d’ajouter l’application sur son écran d'accueil. L'icône et le splashscreen, quant à eux, sont définies dans le manifest.json.

Chargement rapide de l’application

Pour avoir un chargement rapide de l’application, il faut rajouter --prod au moment de créer notre build.

ionic build --prod

L’application sera donc optimisée, moins lourde à charger.

C’est tout.

Nous n’avons rien à faire de plus, le score de la PWA est déjà très correct. (Attention, lighthouse utilise les ressources de la machine sur laquelle vous le lancez, la note de performance peut donc varier à la hausse ou à la baisse …)

Afin d’atteindre le score de 100, il nous faudrait passer un peu plus de temps sur l’optimisation et le chargement progressif de l’application.

Il nous suffit maintenant de déployer le build de prod, et de le servir en HTTPS.