PWA : Atteindre un score élevé dans Google Lighthouse avec Ionic 2

Quelques astuces pour créer une Progressive Web App de qualité avec Ionic 2.

Le blog Makina-corpus

Quelques astuces pour créer une Progressive Web App de qualité avec Ionic 2.

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 :

lighthouse report before

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.

lighthouse report after

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.

Inscription à la newsletter

Nous vous avons convaincus