Avec l'arrivée tardive des services workers lors de la dernière release de Safari sur MacOS et iOS (workers at your service) nous pouvons dire que nous sommes rentrés dans l'ère des PWA. Les autres navigateurs — Chrome en tête mais bien sûr Firefox et Opera — les avaient intégrés depuis longtemps. Dans cet article je vais revenir sur quelques définitions et essayer de parler du futur des applications mobiles.
Quand l'App Store a été ouvert en juillet 2008, avec quelques 500 applications gratuites et payantes, il y a eu un énorme engouement — plus de 10 millions d'entre-elles ont été téléchargées dans les premières semaines. Aujourd'hui le constat est diamétralement opposé, nous allons rarement sur les stores télécharger de nouvelles applications. Nos smartphones sont saturés et on a l'impression que la majorité des applications nous veulent pas que du bien en nous espionnant ou bien en voulant nous cibler avec des pubs basées sur nos infos personnelles.
Les PWA font du bien dans cet écosystème un peu trouble car elles permettent un prolongement de l'expérience web, et par conséquent sont disponibles sur tous nos terminaux avec toutes leurs fonctionnalités inhérentes (tactiles, GPS, gyroscope, push notifications, mode déconnecté, data synchronization, etc.). C'est en 2015 que les PWA ont vraiment émergé avec l'intégration du HTML5 dans Firefox et Google Chrome.
Que sont les services workers ?
Les services workers sont la base des Progressive Web Apps, ils travaillent en arrière-plan même quand on n'utilise pas activement l'application. Ils agissent comme un intermédiaire entre le navigateur et le serveur, entre une application et un service. Ils interceptent les requêtes réseau et effectuent ensuite les actions pré-définies.
Principalement les services workers servent à gérer le cache pour rendre l'application la plus rapide possible et surtout la faire fonctionner même sans connexion internet. Différentes stratégies de mise en cache peuvent être implémentées, la plus répandue reste Cache then Network.
Ensuite nous pourrons désormais envoyer des notifications push via les PWA, les données pourront être synchronisées en arrière-plan sans avoir besoin de permissions supplémentaires. Enfin le poids d'une PWA est généralement de 10 à 20 % par rapport à son application native — par exemple Facebook passe de 500 Mo à moins de 50 Mo, idem pour Twitter.
Cette technologie est déjà utilisée par de grandes entreprises comme Starbucks, Lyft, Twitter et la NASA.
Quels sont les avantages des PWA ?
Un petit rappel sur les fonctionnalités des applications natives désormais disponibles sur les PWA :
- Accès Camera (photo et vidéo)
- Accès GPS & accéléromètre
- Accès au bluetooth (beacons)
- Affichage plein écran
- Ajout écran d'accueil
- Expérience et ergonomie mobile
- Gestion des coupures réseau
- Mode offline
- Push Notification
- Rapide sur connexions faibles
- Reconnaissance audio
- Synchro en arrière-plan
Et voici les 4 grands avantages d'une PWA par rapport à une application native :
- Installation rapide et facile : pas de download, consommation de data moindre
- Accessible : expérience unifiée pour toutes les plateformes, SEO possible
- Mise en œuvre simplifiée : pas de soumission/commission stores
- Évolution facile : disponible instantanément et coût de maintenance moindre
Quel avenir pour les PWA ?
Avec l'arrivée des service workers dans Safari 11.1 (disponible sur iOS 11.3 et macOS 10.13.4), Apple décide d'ouvrir enfin la porte, ce qui constitue un signal très fort. Microsoft intègre depuis peu les PWA dans son propre store d'applications et Google chercherait un moyen de les intégrer dans son Google Store. Google Chrome reconnaît quand un site est en fait une PWA et permet en un clic de créer une icône d'application sur l'écran d'accueil.
Les PWA sont plus qu'une tendance, elles sont utilisées par les plus grands (Facebook, Trivago, Lyft, Twitter, Pinterest et la NASA) et parviennent au fil des mois à combler l'espace entre les WebApps et les applications mobiles natives. À ce jour les applications natives sont toujours les plus fiables mais les années à venir nous présagent un bel avenir pour les PWA.
Petit coup d'œil sous le capot
Le développement d'une PWA est similaire à une WebApp, sauf qu'ici on parle d'App Shell : ce nom désigne l'interface utilisateur construite avec une approche mobile d'abord. Dans la plupart des cas, il est structuré comme une page web classique : HTML, CSS et JavaScript.
Ensuite le service-workers.js doit définir comment l'application gère le cache des fichiers et des requêtes réseaux. On doit enfin compléter un fichier manifest.json qui contient toutes les métadonnées qui caractérisent l'application (nom, logo, couleurs, etc.) afin que l'application puisse être épinglée à l'écran d'accueil et s'adapter aux différentes tailles d'écran sur toutes les plateformes (iOS, Android, Windows, etc.).
Plus d'informations
- Pourquoi les Progressive Web Apps sont la seule alternative viable aux applications natives — Fred Cavazza
- PWA Rocks : sélection de PWA pour vous faire une idée ou procéder à des tests
- Developers Google PWA : portail Google sur la technique derrière les PWA
- Mobilehtml5.org : pour voir l'ensemble des fonctionnalités prises en charge par les navigateurs
- Html5test.com : pour tester ou comparer votre navigateur actuel sur le support HTML5