Développer sa première PWA 1/3

Les applications mobiles natives ont des fonctionnalités que nos sites internet ne peuvent fournir : installation sur l’écran d’accueil, présence dans les stores, processus externe au navigateur, fonctionnement hors ligne, lecture/écriture dans le système de fichiers, accès au hardware branché ou via bluetooth, manipulation des contacts et événements… Beaucoup de fonctionnalités indispensables semblent faire partie du téléphone.

Pour faire des applications mobiles natives, il faut du code spécifique pour chacune des plateformes. Ce code est donc dupliqué et demande des compétences différentes. Grâce aux nouveautés du web, les Progressive Web Applications (PWA) nous permettent de développer des expériences de plus en plus proches du natif. Avec le gros avantage de pouvoir partager une bonne partie du code entre les versions desktop, mobiles Android et iOS.

À travers ce guide, essayons-nous au développement de notre première PWA.

Qu’est-ce qu’une Progressive Web App ?

Une PWA c’est “juste” une application web. À l’instar des applis “natives multi-plateformes” react-native/flutter ou des “hybrides” Ionic/Cordova, elles ne sont pas packagées et dépendantes de l’App Store iOS ou du Play Store Android. Détaillons rapidement ces différentes visions avant de nous lancer.

Application native

Au plus proche du matériel, les applis natives permettent de profiter au maximum des performances et des fonctionnalités bas-niveau du smartphone (réalité augmentée, machine learning). Ces applications sont téléchargeables sur les stores officiels après validation par Google ou Apple et peuvent être mises à jour par ce biais. Ces mises à jour peuvent être compliquées, car dépendantes de la politique choisie par les propriétaires du store. Par exemple, Apple vérifie chaque nouvelle version manuellement. La compatibilité multiplateforme est également complexe car les langages et SDK utilisés sont différents.

Application native multi-plateformes

De nombreux outils se sont montés pour combler le souci de compatibilité.

Les raisons sont évidentes : baisser les coûts de développement en facilitant la réutilisation. Dans cette catégorie, on retrouve React Native, Flutter ou Xamarin qui permettent de partager le code de l’interface entre Android et iOS, la partie fonctionnelle tourne à part. Pour aller plus loin, je vous conseille l’article d’Andréas Hanss de l’édition de mai (React Native vs Flutter – Les vrais arguments).

Application hybride

Celles-ci sont des applications web packagées dans une webview. Une webview est un composant natif disponible sur Android et iOS pour afficher de l’HTML, ce qui nous permet d’éviter d’écrire notre application en langage natif. Puisqu’elles sont packagées, elles peuvent elles aussi être envoyées sur les stores. Elles donnent accès à certaines fonctionnalités bas-niveau grâce à un système de plugins fournissant des API JavaScript pour accéder au presse-papier par exemple. On y retrouve Cordova et Capacitor pour le “bas niveau”, et la possibilité d’y ajouter une surcouche graphique avec Ionic.

Application web

Accessibles à travers un navigateur sur mobile, mais aussi sur ordinateur, elles ne permettaient historiquement pas d’interagir avec les fonctionnalités bas-niveau de nos smartphones. Une bonne partie de ces fonctionnalités est maintenant accessible, en particulier sur Android avec le navigateur Chrome.

Une application web est considérée Progressive quand elle respecte trois critères :

• Utilise HTTPS
• Présente un Web Manifest
• Fournit un Service Worker

Elles sont également censées être disponibles sur les moteurs de recherche, installables sur l’écran d’accueil, capables de gérer les liens, indépendantes du réseau, fonctionner sur les téléphones récents mais aussi anciens, capables de gérer les notifications, responsives, et sécurisées.

Je m’appliquerai par la suite à détailler et mettre en pratique les trois critères principaux.

Préparer son site à agir comme une application

Pour illustrer cet article, je travaillerai en pas-à-pas en partant d’un site basique : les sources sont disponibles sur https://github.com/yannbertrand/pwa-demo et l’application finale est déployée sur https://pwa-demo-yann.netlify.app. 

Premier prérequis pour notre PWA et première règle à respecter : notre site doit pouvoir être déployé en HTTPS.

Certaines APIs web ne sont accessibles que dans un contexte sécurisé, par exemple la géolocalisation ou les Service Workers (que l’on creusera plus loin). Certaines APIs accessibles sont critiques vis-à-vis du respect de la vie privée des utilisateurs. C’est pourquoi cette sécurité est requise, pour éviter par exemple, des attaques de type MITM (man-in-the-middle).

Une des difficultés que l’on rencontre fréquemment lorsqu’on crée une PWA est de s’assurer que notre application se rend correctement sur mobile. Même si le sujet n’est pas spécifique aux PWA, il me semble important d’en parler un peu. Chrome et Firefox nous fournissent un super outil intégré dans les DevTools pour simuler ce rendu, respectivement : le mode responsive et la vue adaptative.

Dans notre cas et pour une page basique, il est très probable que vous rencontriez un premier souci : la page est dézoomée et tout y parait très petit. Il faut régler une métadonnée dans le header pour préciser que notre conteneur (le viewport) doit prendre toute la largeur de l’écran :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

La présence de cette métadonnée est très importante pour l’aspect graphique mais également pour la SEO : l’algorithme de Google va mieux positionner les pages où le viewport est correctement renseigné. Globalement cet algorithme encourage à fournir une bonne expérience utilisateur sur mobile, sujet également mis en avant dans l’initiative Google Web Vitals.

Pour aller plus loin sur l’aspect graphique je vous invite à creuser le sujet du responsive design (en particulier le positionnement avec flexbox et le grid layout) et les media queries (dark mode, cacher les animations…). Attention tout de même, gardez bien en tête qu’en fonction de votre cible, il faudra faire attention à la compatibilité navigateurs mobile et desktop des fonctionnalités CSS que vous utiliserez.

La suite : Développer sa première PWA, partie 2/3 !