Drupal et les PWA (Progressive Web App) - Généralités - Part. 1 sur 3

• Partie 1 : PWA et Drupal, généralités
• Partie 2 : Découplage
• Partie 3 : Exemple de PWA avec Drupal 8 et Gatsby

Qu’est-ce qu’une PWA (Progressive Web App) ?

Une application Web progressive (PWA) est une application Web qui utilise des fonctionnalités Web modernes pour offrir aux utilisateurs une expérience similaire à celle d'une application (entendre par là iOS, Androïd, etc.) en combinant les fonctionnalités offertes par la plupart des navigateurs modernes avec les avantages de l'expérience mobile.

L'intégration de PWA avec Drupal permet à Drupal d'hériter des technologies web et des fonctionnalités les plus récentes.

Une Progressive Web App ou PWA est une alternative aux applications natives qui présente les caractéristiques suivantes :

• Elle est Progressive : Elle fonctionne sur tous les navigateurs, selon le principe de l’amélioration progressive. Si le navigateur ne supporte aucune de ces nouvelles fonctionnalités, le site demeure un site web "classique" et continuera à être utilisable en tant que tel !
• Elle est Responsive : Elle s’adapte à toutes les résolutions d’écran (mobile, tablette, desktop, etc.) Rien ne vous y oblige, mais il s’agit bien d’offrir une alternative aux Apps natives, donc une PWA qui ne serait consultable que sur un PC de bureau n’aurait guère d’intérêt !
• Elle est indépendante de la connexion : Une PWA ne doit pas souffrir d’une qualité de connexion médiocre (3G) voir de l’absence totale de connexion (offline). C’est ici que les service workers entrent en jeu pour permettre de modifier le comportement du site en cas de problème ou de rupture de la connexion.
• Elle ressemble à une application : car le modèle de shell app sépare la fonctionnalité de l'application du contenu de l'application.
• Elle est à jour en permanence : C’est un site web et donc elle peut être mise à jour rapidement et de manière continue sans passer par la case App stores (Google Play, Apple Store).
• Elle est sécurisée : Elle est servie via HTTPS pour empêcher l’interception des données et s'assurer que le contenu n'a pas été altéré.
• Elle est identifiable, en tant qu’application grâce à son manifeste ,ce qui permet entre autre aux moteurs de recherche de la trouver.
• Elle facilite le réengagement grâce à des fonctionnalités telles que les notifications push.
• Elle est installable : Elle permet aux utilisateurs d'ajouter les applications qu'ils jugent utiles à leur écran d'accueil sans les tracas d'un magasin d'applications.
• Elle est partageable :  Elle peut se partager facilement via une simple URL et ne nécessite pas d'installation complexe.

D’autres caractéristiques à nuancer :

• Faible coût : Une PWA a un coût de développement inférieur à celui d’une application native.
• Développement rapide : ne serait-ce que parce qu’ici nous ne sommes plus tributaires du purgatoire imposé par les stores à chaque mise en production d’une nouvelle version.

Pourquoi développer une PWA ?

Une application native perd en moyenne 20% de ses utilisateurs sur chaque étape nécessaire pour télécharger et installer l’application.

D'autre part, selon les statistiques, les PWA montrent de meilleurs résultats en termes de conversion, car une PWA peut être téléchargée directement à partir du navigateur, sans passer par un app store, et se comporte comme une application normale sur votre mobile.

Une PWA tire parti des fonctionnalités de la plate-forme web pour offrir une expérience similaire à celle d'une application. Vous pouvez par exemple visiter https://whatwebcando.today pour identifier les fonctionnalités de votre navigateur qui peuvent être utilisées par toute application Web progressive.

Les composants d’une PWA

On peut relever 3 composants essentiels qui définissent une PWA :

• 1. App shell : App shell fournit un minimum de HTML, javascript et CSS qui alimente l'interface utilisateur de votre application. Il est chargé en moins d'une seconde. Il est stocké et servi à partir du cache, le cas échéant.
• 2. Manifeste Web : Ceci vous permet d’ajouter votre application à l’écran d’accueil de l’utilisateur. Il est ajouté à la balise head de votre page comme <link rel="manifest" href="/manifest.json">. Le fichier manifest.json définit tous les composants du comportement de l'application Web progressive.
• 3. Service Workers : les service workers peuvent être programmés pour intercepter chaque requête réseau et servir une réponse depuis le cache, même lorsque l'utilisateur est hors ligne.

Comment transformer un site Drupal en PWA ?

Il y a comme souvent "un module pour cela"… et son nom n’est pas très original, il s’agit du module PWA.

ATTENTION : Il y a une grande différence entre se déclarer simplement comme une PWA et offrir aux utilisateurs toutes les fonctionnalités vues plus haut. Ce module n’est pas une solution miracle, mais une bonne base pour commencer.

Le principal avantage de ce module est la mise en place d’un Service Worker pour la mise en cache et les fonctionnalités hors connexion. Voilà ce qu’il autorise par défaut :

• Tous les fichiers JS et CSS seront toujours servis à partir du cache et réactualisés en arrière-plan.
• Toutes les pages sont chargées à partir d’internet (comme précédemment) mais une copie est conservée dans le cache afin qu’elles soient disponibles hors connexion.
• Les images sont mises en cache à moins que l'en-tête de sauvegarde des données ne soit détecté afin de prendre en compte l'utilisation de la bande passante et la taille du cache. Une image de secours doit apparaître pour toute image non mise en cache.
• Le module créera également un fichier manifest.json évitable en back-office pour rendre le site Web « installable » sur les périphériques mobiles pris en charge.

Le module remplit suffisamment d'exigences PWA pour que l'invite "ajouter à l'écran d'accueil" soit automatiquement déclenchée lorsqu'un visiteur revient sur votre site Web.

Drupal 7

Le module est stable.

Drupal 8

Le module est toujours en développement, mais il existe des patches pour contourner certaines limitations actuelles.

Cette fonctionnalité fera très certainement bientôt partie du core et ne nécessitera pas de modules, c’est peut-être ce qui explique l’état actuel de ce module en version Drupal 8.

Vous pouvez en savoir plus sur les issues du projet.

Et maintenant ?

Ce n’est qu’un début. Un CMS "monolithique" comme Drupal n’offre que peu d’opportunités simples pour devenir une PWA à 100%.

Les véritables applications web, les single page applications (SPA) et autres sites reposant massivement sur des frameworks JavaScript tels qu’Angular, VueJS et React sont celles à qui l’on pense naturellement quand on parle de PWA.

Oui mais c’est sans compter sur les possibilités de découplage offertes par Drupal, surtout en version 8. Certaines parties d’un site sont de bonnes candidates pour passer au PWA, comme par exemple un espace utilisateur ou client où ce dernier peut retrouver des informations personnalisées, l’historique de ses actions etc.

C’est ce que nous verrons dans la suite de cette série.

A suivre...

• Partie 1 : PWA et Drupal, généralités
• Partie 2 : Découplage
• Partie 3 : Exemple de PWA avec Drupal 8 et Gatsby

Une application Web progressive (PWA) est une application Web qui utilise des fonctionnalités Web modernes pour offrir aux utilisateurs une expérience similaire à celle d'une application (entendre par là iOS, Androïd, etc.) en combinant les fonctionnalités offertes par la plupart des navigateurs modernes avec les avantages de l'expérience mobile.