Tout sur les Progressive Web Apps et leur implémentation dans Drupal 9

Internet a d'abord été construit dans le but d'améliorer la communication pour les militaires et les scientifiques dans les années 1960. Bientôt, le Web s'est transformé en un phénomène révolutionnaire vers les années 1990 et est imparable depuis. Bien que l'objectif du Web ne cessait de changer, l'un des objectifs qui restait constant était la commodité.

Le besoin de commodité a entraîné de nombreuses façons innovantes d'accéder à Internet. Les applications mobiles natives et les applications Web sont deux de ces technologies qui ont rendu la navigation sur Internet facile et pratique. Dans cet article, nous parlerons des Progressive Web Apps et de la façon dont vous pouvez les implémenter avec Drupal à l'aide du module Drupal Progressive Web App. Mais avant de plonger dans tout cela, examinons les fonctionnalités des applications natives et Web et comment les applications Web progressives comblent les lacunes.

Fonctionnalités des applications mobiles natives

• Ce sont des applications spécifiques à la plate-forme. Cela signifie également qu'ils doivent être reconstruits pour chaque nouvelle plate-forme (iOS, Android).
• Besoin d'être téléchargé.
• Généralement ultra-rapide.
• Riche en fonctionnalités et fonctionnalités.
• Peut se fondre parfaitement dans n'importe quel appareil et se sentir comme une partie de celui-ci.
• Peut fonctionner hors ligne.
• Ils peuvent accéder facilement aux données de l'appareil, au matériel de l'appareil et au système de fichiers local.
• Plus coûteux à développer, à entretenir et à mettre à niveau.
• Sont pré-approuvés pour la sécurité et peuvent être téléchargés dans les magasins d'applications.
• Difficile à explorer pour les moteurs de recherche.

Fonctionnalités des applications Web

• Ne dépend pas de la plate-forme. Tout ce dont vous avez besoin est un navigateur pour y accéder. Prend en charge la plupart des navigateurs modernes. N'a pas besoin d'être téléchargé.
• Pas de SDK particulier pour les développer. Le frontend est développé à l'aide de HTML, CSS, JavaScript et d'une pile LAMP ou MEAN pour le backend.
• Pas besoin de mettre à niveau. Coûts de développement et de maintenance moindres.
• Bien qu'il nécessite une authentification, la sécurité est un problème car il peut être vulnérable à un accès non autorisé.
• Elles ne fonctionnent pas hors ligne et peuvent être plus lentes que les applications mobiles natives.
• Ils ne sont pas répertoriés dans les App Stores, il peut donc être plus difficile de les découvrir.

Que sont les Progressive Web Apps et comment comblent-elles les lacunes ?

Donc, en bref, les applications Web natives sont très performantes mais manquent de portée. Alors que les applications Web ont une portée plus large mais manquent de capacités. Et c'est là que les Progressive Web Apps entrent en jeu pour combler les lacunes.

Progressive Web Apps est une combinaison idéale des avantages des applications natives et des applications Web. En utilisant des fonctionnalités Web modernes, les applications Web progressives (PWA) peuvent offrir aux utilisateurs des expériences similaires à celles d'une application. Il combine les fonctionnalités offertes par la plupart des navigateurs modernes avec les avantages des expériences mobiles. Vous pouvez créer des applications similaires à des applications natives, extrêmement complexes et installables. Web Assembly étant désormais pris en charge par la plupart des navigateurs, les PWA peuvent être construites dans les langages choisis par le développeur, augmentant ainsi considérablement la portée et la flexibilité des fonctionnalités qu'elles peuvent offrir.

Fonctionnalités des applications Web progressives

• Ils sont indépendants de la plate-forme et de l'appareil. Fonctionne à merveille sur n'importe quel navigateur.
• Ils se chargent rapidement et sont extrêmement fiables (même avec une faible vitesse Internet). Le défilement est très fluide et fluide.
• Peut également fonctionner hors ligne.
• Les notifications push de type application natives peuvent être activées.
• Peut accéder au matériel et aux données de l'appareil comme les applications natives.
• Des raccourcis peuvent être ajoutés sur l'écran d'accueil de l'utilisateur (au lieu de les télécharger)
• Pas besoin d'installations complexes. Peut partager les URL facilement.
• Réactif sur tous les appareils.
• Ils sont plus faciles et plus rapides à développer. L'entretien est également facile.

Avant de parler du module PWA dans Drupal, regardons les exigences minimales pour construire un PWA -

• Doit être exécuté sur HTTPS.
• Doit inclure un Service Worker - Le Service Worker est un script (javascript) qui s'exécute sur https sur le navigateur et fournit un accès au navigateur. Il fournit des fonctionnalités natives de type application telles que la diffusion de contenu hors ligne, les notifications push, etc.
• Doit avoir un manifeste d'application Web - qui est un fichier JSON contenant des métadonnées avec des informations sur l'application Web comme le nom, la description, l'auteur, etc. Ceci est également utile pour l'optimisation des moteurs de recherche.

Le module Drupal PWA - Comment créer des applications Web progressives avec Drupal 9 (et 8)

Le module Drupal PWA est facile à installer et est livré avec le Service Worker (pour la mise en cache et d'autres fonctionnalités de type application hors ligne) et Manifest.js que vous pouvez configurer. Vous devrez cependant vous assurer que SSL est installé avant de commencer le processus d'installation de PWA. Si vos besoins sont extrêmement spécifiques avec des tonnes de personnalisations, vous pouvez développer le PWA en utilisant des frameworks frontaux comme Angular ou React et personnaliser votre propre Service worker.

Installation du module PWA Drupal 9

Avec Drupal 7, l'installation du module Progressive Web App Drupal était aussi simple que le téléchargement et l'activation du module. Vous pouvez générer le fichier manifest.js via un formulaire de configuration et le valider. Cependant, dans Drupal 9, nous ne pouvons pas intégrer cette fonctionnalité directement en activant simplement le module PWA. La raison en est qu'il ne vous offre pas la possibilité de configurer le fichier manfest.js.

1. Installez le module en téléchargeant et en activant le module PWA Drupal.

2. Pour Drupal 9, appliquez ce patch

3. Une fois cela fait, accédez à configuration -> APPLICATION WEB PROGRESSIVE -> Paramètres PWA et ajoutez les informations requises.

Employé de service

URL à mettre en cache - C'est ici que vous pouvez spécifier les pages que vous devez rendre disponibles même hors ligne. Les URL mentionnées ici seront mises en cache - assurez-vous de vider le cache chaque fois que vous effectuez des mises à jour ici.
URL à exclure – Si vous avez des pages qui doivent absolument fonctionner uniquement avec Internet, mentionnez-les ici.
Page hors ligne – Affichez une page personnalisée à vos utilisateurs lorsqu'ils sont hors ligne et que la page n'est pas mise en cache.

Manifest.json

Le fichier Drupal manifest.json est ce qui permet aux utilisateurs d'ajouter le PWA à leur écran d'accueil. Il contient des configurations que vous pouvez modifier pour changer le comportement de votre PWA, comme le nom, le nom d'affichage, la couleur d'arrière-plan, l'orientation, etc.

Le fichier sera ajouté à la balise head de votre page d'index.
<link rel="manifest" href = "/manifest.json">

L'image ci-dessous montre l'option « Ajouter à l'écran d'accueil ». Lorsque vous sélectionnez cette option, une icône sera créée sur l'écran d'accueil.