Fermer

décembre 2, 2022

Application Web progressive (PWA) dans Drupal

Application Web progressive (PWA) dans Drupal


Introduction

Un module contribué pour Drupal fournit un remplacement instantané des caractéristiques fondamentales d’une application Web progressive, qui est disponible depuis Drupal 7. Avec l’aide de ce module, votre site Web sera en mesure de répondre rapidement aux interactions des utilisateurs, sans jamais afficher un avis « hors ligne » et ressemble exactement à une application native sur l’écran d’accueil. Vous pouvez choisir d’utiliser un agent de service personnalisé au lieu du module si votre PWA nécessite de nombreuses modifications.

Installation du module PWA Drupal 9

L’installation du module Progressive Web App Drupal était simple avec Drupal 7 ; tout ce dont nous avions besoin était de télécharger et d’activer le module. Vous pouvez utiliser un formulaire de configuration pour créer et vérifier le fichier manifest.js. Néanmoins, dans Drupal 9, nous ne sommes pas en mesure d’intégrer immédiatement cette capacité en activant simplement le module PWA. Pour cette raison, vous n’êtes pas autorisé à configurer le fichier manfest.js.

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

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

Travailleur des services

URL Service Worker à mettre en cache – Ici, vous pouvez spécifier les pages que vous souhaitez rendre accessibles même hors connexion. Les URL indiquées ici seront mises en cache ; lorsque vous apportez des modifications, videz le cache.

URL exclues – Lister les pages qui doivent être accessibles exclusivement via internet dans cette rubrique.

Page hors ligne – Lorsque les utilisateurs se déconnectent et que la page n’est pas mise en cache, une page hors ligne personnalisée pour eux s’affiche.

Manifest.json

Les utilisateurs peuvent ajouter la PWA à leur écran d’accueil en ajoutant le fichier Drupal manifest.json à leur site Web. Vous pouvez modifier le nom, le nom d’affichage, la couleur d’arrière-plan, l’orientation et d’autres variables afin de modifier le fonctionnement de votre PWA.

<php>
pwa.manifest
path: '/manifest.json'
defaults:
__controller: '\Drupal\pwa\Controller\PWAController::pwa_manifest'
requirements:
_permission: 'access content'
</php>

Le fichier sera ajouté à la balise head de votre page d’index.

Pour Drupal 9, appliquez ce correctif

Outils pour développer des applications Web progressives (PWA)

Lors du développement d’une application Web progressive dans Drupal, vous aurez peut-être besoin d’outils pouvant être utilisés pour valider et améliorer les performances et la qualité de votre application Web.

  • Phare: Lighthouse est une extension de navigateur qui peut vous donner un bon départ dans le développement d’applications Web progressives dans Drupal en auditant une page et en générant des rapports sur les performances de la page. Et sur la base du rapport généré, vous pouvez améliorer l’application Web Drupal.

  • Outils pour les développeurs PWA: Une fois que vous commencez à utiliser le module PWA pour générer une page Drupal pour l’application Web, vous pouvez utiliser de nombreuses méthodes et outils pour tester et déboguer la PWA sur un navigateur. Ces outils aident à déboguer les problèmes de réseau, la fonctionnalité PWA hors ligne, les techniciens de service, le stockage du cache des applications Web et bien plus encore.

Vous pouvez obtenir les meilleures fonctionnalités des applications natives et Web avec des applications Web progressives. Vous pouvez les construire rapidement avec Drupal 9 et offrir aux utilisateurs des expériences immersives.

TROUVÉ CELA UTILE ? PARTAGEZ-LE




Source link