PWA : Progressive Web App

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 L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. . 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 Le HTTPS (HyperText Transfer Protocol Secure) est la version sécurisée du protocole HTTP. Il chiffre les données échangées entre un navigateur et un serveur, garantissant la confidentialité et l'intégrité des communications. ,
• 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 Une URL (Uniform Resource Locator) est l'adresse unique d'une ressource sur Internet, comme une page web, une image ou un fichier, permettant de la localiser et d'y accéder via un navigateur. 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 Le responsive design est une approche de conception web qui permet à un site de s'adapter automatiquement à différentes tailles d'écran (ordinateurs, tablettes, smartphones), offrant ainsi une expérience utilisateur optimale sur tous les appareils. , on ne touche pas que les formats mobiles mais aussi les desktops. En un seul développement, avec de l’HTML, du CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. et JS JavaScript est un langage de programmation dynamique principalement utilisé pour ajouter des fonctionnalités interactives aux pages web. Il permet de manipuler le DOM, de gérer des événements, et d'effectuer des requêtes asynchrones. 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 Une API (Application Programming Interface) est un ensemble de règles permettant à différents logiciels de communiquer entre eux. Elle simplifie l'intégration et l'échange de données entre systèmes. 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 Le HTTP (HyperText Transfer Protocol) est un protocole utilisé pour transférer des données sur le web, permettant la communication entre un navigateur et un serveur pour afficher des pages web. ://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 Un thème est un ensemble de fichiers de design et de mise en page utilisés pour personnaliser l'apparence visuelle d'un site web ou d'une application sans modifier sa structure ou ses fonctionnalités. , 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