Accueil / Blog / Métier / 2017 / PWA : Atteindre un score élevé dans Google Lighthouse avec Ionic 2

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

Par Bastien Alvez — publié 30/03/2017
Quelques astuces pour créer une Progressive Web App de qualité avec Ionic 2.
PWA : Atteindre un score élevé dans Google Lighthouse 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.

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Bien comprendre les Progressive Web Apps Bien comprendre les Progressive Web Apps 20/06/2016

On va beaucoup en parler, voilà de quoi suivre les discussions.

Bien démarrer avec Ionic Bien démarrer avec Ionic 07/12/2015

Une ressource pour les développeurs Ionic et ceux qui veulent démarrer dans le développement ...

Authentification OAuth 2.0 avec Ionic 2 Authentification OAuth 2.0 avec Ionic 2 27/10/2016

Souvent, pour pouvoir utiliser des API de services tiers, on s'authentifie avec le protocole OAuth.

Et votre DSI, il fait quoi en 2017 ? Et votre DSI, il fait quoi en 2017 ? 16/01/2017

Les enjeux de votre présence web en 2017

Quelle solution pour mon application mobile hybride ? Quelle solution pour mon application mobile hybride ? 18/02/2016

Un petit guide des frameworks open source disponibles.