La tendance du moment ou l’une des recommandations de Google, notamment au travers de l’outil d’audit LightHouse, c’est de passer nos pages aux PWA, autrement nommé Progressive Web Apps. Est-ce que nos pages HTML peuvent se prendre pour des applications ? En quoi consiste une Progressive Web App ? Essayons d’y voir plus clair…
Historique
En 2015, Le terme “Progressive Web App” est lâché se référant aux nouvelles possibilités offertes par HTML5.
Depuis 2016, le trafic internet sur mobile a dépassé celui sur desktop. La même année Google donne la priorité au site version mobile pour le positionnement dans son moteur de recherche et lance sa norme AMP (Accelerated Mobile Page).
Enfin, en septembre 2017, Chrome intègre un outil d’audit qui teste la conformité d’une page web aux critères des Progressive Web Apps.
En quoi consiste une Progressive Web App ?
C’est la possibilité pour une page web de se comporter exactement comme une application native et donc d’offrir la même expérience utilisateur. On pourrait même dire un peu plus…
Une PWA partage donc les mêmes points communs qu’une application :
- une application en plein écran,
- une icône applicatif sur le bureau
- un chargement rapide,
- un système de notification,
- et un fonctionnement hors connexion.
Et même quelques petits plus :
- une connexion sécurisée en HTTPS,
- la possibilité d’être directement référencée dans les moteurs de recherche,
- et une mise à jour en temps réel.
J’insiste sur le fait qu’il s’agit d’une page web. Le simple fait d’y accéder par son URL via un navigateur, permet à un utilisateur d’en profiter.
L’intérêt pour le projet, c’est qu’il s’agit d’un développement unique pour tous les devices. Et pour peu que cette PWA soit responsive, on ne touche pas que les formats mobiles mais aussi les desktops. En un seul développement, avec de l’HTML, du CSS et JS bref le triptyque classique de l’Intégration Web.
Support des technologies PWA
C’est là où ça devient intéressant ; puisque presque tous les navigateurs les plus répandus ont intégré ses fonctionnalités des Progressive Web Apps. Cela signifie sur desktop, Chrome, Firefox, Safari et Edge ! Et sur mobile, cela signifie Chrome, le Navigateur Samsung sous Android et Safari sous iOS à une fonctionnalité près.
En effet, Safari sous iOS 12 n’intègre pas encore l’Api Web Push c’est à dire le système de notification. Toutefois comme son grand frère Safari sous MacOSx l’intègre, il y a fort à parier que cela ne saurait tarder.
Quelques points à noter
On notera qu’aujourd’hui seuls les navigateurs Android proposent l’ajout de l’icône de la PWA sur le bureau au chargement de la page. Cela reste possible pour les autres navigateurs mais c’est à l’utilisateur de faire la démarche.
Du coup, les Progressive Web Apps ne passent pas par un store. C’est pas forcément un problème mais c’est bon à savoir.
Ne pas confondre une PWA avec une application Hybride. Avec une application Hybride, on crée un cadre nommé webview, en code natif, dans lequel on va appelé une page html. Cette page peut être embarqué dans l’app ou en ligne et donc appelé via une url (exemple : http://www.weathernride.com/).
Quelques expérimentations artwaï
2011 : impromatic
Impromatic est une Web App permettant aux adeptes des matches d’improvisation théâtrale de disposer de plus de 3000 thèmes, d’une feuille de match et de statistiques. Pas encore progressive et pas encore responsive mais elle pose les bases des futures PWA avec un fonctionnement plein écran, hors connexion et avec une base de donnée locale en JavaScript, utilisant les Web SQL Databases.
2017 : mahjong
Après reçu un magnifique Mahjong en cadeau, j’avais 2 solutions apprendre par cœur les formules de comptage ou faire une app… La PWA Mahjong est donc une feuille marque qui permet de compter les points. Cette Progressive Web App est responsive, fonctionne en plein écran, en hors connexion et dispose aussi d’une petite base de données locale enJavaScript utilisant IndexedDB.
Pour conclure
Si certains visionnaires voient déjà dans les Progressive Web Apps comme la seule alternative viable aux applications natives ; on peut se poser la question de l’utilisation de ces technologies PWA au sein d’un simple site web comme ce site par exemple…
Photo par Benjamin Sow via Unsplash
