Si vous êtes responsable technique ou analyste en marketing digital et que vous souhaitez proposer une expérience Web moderne à votre application Web Adobe Experience Manager (AEM), vous êtes au bon endroit. Vous découvrirez ce que sont les applications Web progressives (PWA) et ce dont vous avez besoin pour créer une PWA dans AEM en utilisant la bibliothèque WorkBox via la configuration, sans codage.
Pourquoi utiliser une PWA ?
Les progressive web apps exploitent les fonctionnalités du Web moderne. Elles peuvent être installées sur votre appareil, se chargent rapidement et se chargent instantanément lors des visites suivantes. Elles répondent rapidement aux entrées. Elles fonctionnent bien sur une connexion peu fiable ou hors connexion. Les PWA utilisent des API modernes pour offrir une expérience attrayante semblable à une application, avec une interface utilisateur en plein écran facultative, des mises à jour en arrière-plan et un accès hors connexion aux données.
Pour transformer une application Web en progressive web app, vous devez ajouter deux artefacts:
- Un fichier manifeste d'application Web: un fichier de configuration JSON qui définit l'URL du point d'entrée de l'application, l'icône utilisée pour représenter la PWA et toute autre configuration décrivant l'apparence et le comportement de l'application.
- Un service worker: script qui fournit des services en arrière-plan qui enrichissent votre PWA en définissant les ressources qu'elle utilise et les stratégies d'accès à celles-ci.
Qu'est-ce qu'un service worker ?
En substance, un service worker n'est qu'un script que votre navigateur exécute indépendamment lorsque vous interagissez avec votre application Web. Un service worker actif fournit des services tels que la mise en cache intelligente à l'aide de l'API Cache, la mise à jour des données à l'aide de l'API Background Sync et l'intégration aux notifications push. Avec la bonne stratégie de mise en cache, un service worker offre une expérience utilisateur stable et fiable dans différents scénarios. Il renvoie instantanément les ressources pré-mises en cache, stocke les données dans le cache et met à jour les ressources lorsque l'utilisateur est connecté au Web.
Il peut être difficile d'écrire des service workers à partir de zéro. Workbox a été créé pour vous faciliter la tâche. Workbox est un ensemble de bibliothèques qui vous aide à écrire et à gérer des service workers et à mettre en cache avec l'API Cache Storage. Lorsqu'ils sont utilisés ensemble, les services workers et l'API Cache Storage contrôlent la manière dont les composants (HTML, CSS, JS, images, etc.) sont demandés au réseau ou au cache, et vous permettent même de renvoyer du contenu mis en cache lorsque vous êtes hors connexion. Avec Workbox, vous pouvez configurer et gérer rapidement les deux, et plus encore, avec du code prêt pour la production.
Mise à niveau d'un site AEM vers une PWA
Adobe Experience Manager (AEM) est une solution de gestion de contenu complète qui permet de créer des sites Web, des applications mobiles, des formulaires et des affichages numériques. Il vous permet de gérer facilement vos contenus et composants marketing.
Bien qu'AEM fournisse une vaste bibliothèque pour créer des applications Web, il était jusqu'à présent difficile de créer une PWA en ajoutant un service worker et un fichier manifeste.
Adobe Experience Manager Sites est l'outil de création d'interface utilisateur intégré à Adobe Experience Manager. Lorsqu'il est utilisé avec Adobe Experience Manager en tant que service cloud, AEM Sites permet de convertir facilement n'importe quel site Web ou application monopage AEM existant en application Web progressive installable et compatible avec le mode hors connexion, sans codage ni configuration. Il utilise Workbox pour appliquer les bonnes pratiques aux applications Web progressives et simplifie la complexité de l'écriture de fichiers manifestes et de service workers standards.
L'AEM permet de localiser les contenus, ce qui signifie que vous pouvez adapter votre branding et même votre contenu hors connexion en fonction des paramètres régionaux. Pour ce faire, créez différentes configurations PWA pour chaque master de langue.
Premiers pas avec la configuration d'une PWA dans AEM
Connectez-vous à Adobe Experience Manager en tant que service cloud, sélectionnez une page ou un maître de langue Adobe Experience Manager Sites, puis cliquez sur "Propriétés". Un onglet intitulé "Application Web progressive" devrait s'afficher. (Remarque: Si cet onglet ne s'affiche pas, veuillez contacter Adobe pour activer cette fonctionnalité.) Vous pouvez configurer l'installation et l'aspect général de vos progressive web apps en quelques clics.
Si vous avez suivi les tutoriels sur AEM Sites, vous avez probablement déjà vu le site WKND. Cet article utilise la démonstration WKND comme point de départ. Lorsque vous avez terminé, WKND est passé d'une application Web à une PWA à l'aide de WorkBox.
Configurer le fichier manifeste
Le fichier manifeste d'application Web est un fichier JSON qui contient des propriétés décrivant l'apparence et le comportement d'une PWA. Adobe Experience Manager Sites fournit une interface utilisateur conviviale pour configurer les propriétés.
L'URL de démarrage est le point d'entrée de votre PWA. Lorsqu'un utilisateur appuie sur l'icône de la PWA sur son téléphone, il accède à l'URL de démarrage. Le mode d'affichage indique si l'application est en mode fenêtre ou plein écran. Vous pouvez également spécifier l'orientation de l'écran de l'application. La couleur du thème correspond à celle de la fenêtre et de la barre d'outils, tandis que la couleur d'arrière-plan correspond à celle de l'écran de démarrage lorsque l'application est lancée. L'icône est l'image qui s'affiche sur l'écran d'accueil ou dans le panneau des applications de l'appareil lorsque l'application est installée sur celui-ci. La configuration illustrée dans l'image génère le fichier manifeste JSON présenté ci-dessous.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
L'URL de démarrage peut être différente de la page de destination par défaut de votre domaine. En modifiant le paramètre start_url, vous pouvez rediriger vos utilisateurs directement vers l'expérience de l'application plutôt que vers la page par défaut qui s'affiche pour un utilisateur non authentifié ou nouveau. Les utilisateurs de PWA bénéficient ainsi d'une expérience plus fluide, semblable à celle d'une application.
AEM comprend que l'apparence d'un site peut varier selon les paramètres régionaux. Vous pouvez configurer différentes propriétés, couleurs et icônes pour différents paramètres régionaux ou langues, puis synchroniser la configuration avec les pages liées.
Une fois que vous avez accédé à la PWA dans le navigateur, vous pouvez effectuer un clic droit et l'inspecter pour afficher les outils de développement et afficher le fichier manifeste dans le panneau "Applications".
Configurer le service worker
Vous pouvez configurer le contenu à mettre en cache et la stratégie de mise en cache à utiliser.
Si vous utilisez des services workers, vous connaissez peut-être les stratégies de mise en cache. Les stratégies de mise en cache spécifient les ressources à mettre en cache et si elles doivent être recherchées d'abord dans le cache, dans le réseau ou dans le cache avec un remplacement par le réseau. Vous pouvez ensuite choisir les ressources à pré-mettre en cache lorsque le service worker est installé. Les service workers d'applications AEM mettent en œuvre une stratégie de cache tiède qui garantit que l'expérience utilisateur sera toujours disponible, même si vous spécifiez un chemin d'accès manquant ou non fonctionnel.
Dans AEM, le terme "clientlibs" désigne les bibliothèques côté client : la combinaison de ressources JavaScript, CSS et statiques associées qui ont été ajoutées à votre projet, qui sont diffusées et utilisées par le navigateur Web client. Vous pouvez facilement définir vos bibliothèques côté client pour qu'elles soient utilisées hors connexion en les spécifiant dans l'interface utilisateur.
Vous pouvez également inclure des ressources tierces telles que des polices. Cette configuration de cache hors connexion fournit des informations de configuration à un service worker généré pour votre application qui utilise en interne Workbox. C'est à peu près tout ce qu'il faut pour rendre votre application installable. Une fois installée, l'icône de l'application s'affiche sur l'écran d'accueil de votre appareil mobile, comme une application de plate-forme. Cliquez sur l'icône pour accéder au site wknd.
Sachez que vous pouvez modifier votre contenu ou ces paramètres à tout moment. Lorsque vous publiez vos modifications, le service worker est mis à jour au niveau du client par le navigateur, et un message indique à l'utilisateur qu'une version plus récente de la PWA est disponible. L'utilisateur peut cliquer sur le message pour actualiser l'application et obtenir les dernières mises à jour. Vous pouvez ouvrir le panneau des applications et des outils pour les développeurs du navigateur pour afficher les détails du service worker.
Vous pouvez développer l'espace de stockage du cache pour afficher le contenu mis en cache localement :
Les résultats
Il est temps de voir les résultats de votre travail. Vous venez de transformer votre site AEM en progressive web app, sans avoir à coder ni à configurer quoi que ce soit.
Les outils pour les développeurs Chrome fournissent un audit phare qui vous permet de vérifier la conformité de votre application Web et de votre configuration avec les normes des progressive web apps.
Conclusion
Les Progressive Web Apps offrent une expérience semblable à celle d'une application pour votre site Web. Elles exploitent la nature multiplate-forme et ouverte du Web à moindres frais de développement et de maintenance, tout en vous permettant de contrôler la distribution. Cela améliore l'engagement et la fidélisation, et surtout, améliore les taux de conversion. L'AEM et Workbox peuvent être utilisés pour transformer facilement votre site existant en PWA, avec une simple configuration et sans codage.
Références
- Tutoriel WKND
- Service Workers
- API Cache
- Fichier manifeste d'application Web
- Compatibilité avec les icônes adaptatives dans les PWA avec des icônes masquables
- En savoir plus sur les sites Adobe Experience Manager
- En savoir plus sur Workbox :
- Stratégies de mise en cache de la boîte de travail:
- En savoir plus sur les progressive web apps