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) et que vous recherchiez les options qui s'offrent à vous pour le faire, vous êtes au bon endroit. Vous découvrirez en quoi consistent les progressive web apps (PWA) et ce dont vous avez besoin pour créer une PWA dans AEM en exploitant la bibliothèque WorkBox via la configuration, sans codage.
Pourquoi utiliser les PWA ?
Les progressive web apps exploitent les capacités du Web moderne. Elles peuvent être installées sur votre appareil, se chargent rapidement et les visites suivantes se chargent instantanément. Il réagit rapidement aux commentaires. Ils fonctionnent bien lorsque la connexion n'est pas fiable ou hors connexion. Les PWA utilisent des API modernes pour offrir une expérience attrayante semblable à une application avec une UI en plein écran facultative, une mise à 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:
- Fichier manifeste d'application Web: fichier de configuration JSON qui définit l'URL du point d'entrée de l'application, icône représentant la PWA et autre configuration décrivant l'apparence et le comportement de l'application.
- Un service worker est un script qui fournit des services en arrière-plan pour enrichir votre PWA en définissant les ressources qu'elle utilise et les stratégies permettant d'y accéder.
Qu'est-ce qu'un service worker ?
Un service worker est essentiellement un script que votre navigateur s'exécute de façon indépendante lorsque vous interagissez avec votre application Web. Un service worker actif fournit des services tels que la mise en cache intelligente via l'API Cache, la mise à jour des données à l'aide de l'API Background Sync et l'intégration aux notifications push. Un service worker doté d'une stratégie de mise en cache appropriée offre une expérience utilisateur stable et fiable dans différents scénarios. Il renvoie instantanément des ressources en pré-cache, stocke les données en cache et les met à jour lorsqu'il est connecté au Web.
Il peut être difficile d'écrire à partir de zéro avec les service workers. Nous avons créé Workbox pour vous faciliter la tâche. Workbox est un ensemble de bibliothèques conçues pour vous aider à écrire et à gérer des service workers ainsi que la mise en cache avec l'API Cache Storage. Lorsqu'ils sont utilisés ensemble, les service workers et l'API Cache Storage contrôlent la manière dont les éléments (HTML, CSS, JS, images, etc.) sont demandés depuis le réseau ou le cache, ce qui vous permet même de renvoyer le contenu mis en cache hors connexion. Workbox vous permet de configurer et de gérer rapidement ces deux éléments, et bien plus encore, avec du code prêt pour la production.
Mettre à niveau un site AEM en PWA
Adobe Experience Manager (AEM) est une solution complète de gestion de contenu permettant de créer des sites Web, des applications mobiles, des formulaires et de la signalétique numérique. Il facilite la gestion de votre contenu et de vos assets marketing.
Bien qu'AEM fournisse une riche bibliothèque pour la création d'applications Web, jusqu'à présent, il était difficile de créer une PWA en ajoutant un service worker et un fichier manifeste.
La section "Sites Adobe Experience Manager" est l'outil de création d'interface utilisateur qui fait partie d'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 AEM existant en une progressive web app installable hors connexion, avec seulement la configuration et sans codage. Elle utilise Workbox pour mettre en œuvre les bonnes pratiques pour les progressive web apps, et élimine les complexités liées à l'écriture de fichiers manifestes standards et aux service workers.
AEM permet la localisation du contenu, ce qui signifie que vous pouvez utiliser différents branding et même des contenus hors connexion différents en fonction des paramètres régionaux. Pour ce faire, créez différentes configurations de PWA pour chaque langage maître.
Premiers pas avec la configuration des PWA sur AEM
Connectez-vous à Adobe Experience Manager en tant que service cloud, sélectionnez une page ou un maître de langue Adobe Experience Manager, puis cliquez sur "Propriétés". Vous devriez voir un onglet intitulé "Progressive web app". (Remarque: si cet onglet ne s'affiche pas, contactez Adobe pour activer cette fonctionnalité.) En quelques clics, vous pouvez configurer l'installation et la présentation de vos progressive web apps.
Si vous avez suivi les tutoriels sur les sites AEM, vous avez probablement déjà consulté le site WKND auparavant. Cet article utilise la démo WKND comme point de départ. Lorsque vous aurez terminé, vous aurez mis à jour WKND depuis une application Web vers une PWA à l'aide de WorkBox.
Configurer le fichier manifeste
Le fichier manifeste d'application Web est un fichier JSON contenant des propriétés qui décrivent l'apparence et le comportement d'une PWA. Les sites Adobe Experience Manager fournissent 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 d'une PWA sur son téléphone, il accède à l'URL de démarrage. Le mode d'affichage détermine si l'application s'affiche dans une fenêtre ou en plein écran. Vous pouvez également spécifier l'orientation de l'écran de l'application. La couleur du thème est celle de la fenêtre et de la barre d'outils, tandis que la couleur de l'arrière-plan est celle de l'écran de démarrage au lancement de l'application. 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 sur 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'application plutôt que vers la page par défaut qui s'affiche à l'écran d'un nouvel utilisateur ou non authentifié. Les utilisateurs de PWA bénéficient ainsi d'une expérience plus fluide, semblable à une application.
L'équipe AEM est consciente que les différents paramètres régionaux peuvent présenter une apparence différente. Vous pouvez configurer des propriétés, des couleurs et des icônes en fonction des paramètres régionaux ou des langues, puis synchroniser la configuration avec les pages liées.
Une fois la PWA accessible 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 avez utilisé des service 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 en premier dans le cache, dans le réseau en premier ou dans le cache avec une connexion de remplacement au réseau. Vous pouvez ensuite choisir les ressources à mettre en pré-cache lors de l'installation du service worker. Les service workers d'application AEM implémentent une stratégie de mise en cache tiède qui permet à l'utilisateur d'améliorer l'expérience utilisateur, même si vous spécifiez un chemin d'accès manquant ou interrompu.
Dans AEM, le terme "clientlibs" fait référence aux bibliothèques côté client: il s'agit de la combinaison de ressources JavaScript, CSS et statiques associées qui ont été ajoutées à votre projet, et qui sont diffusées et utilisées par le navigateur Web client. Vous pouvez facilement configurer vos bibliothèques côté client pour une utilisation hors connexion en spécifiant ces bibliothèques dans l'interface utilisateur.
Vous pouvez également inclure des ressources tierces telles que des polices. Cette configuration du cache hors connexion fournit à un service worker les informations de configuration générées pour votre application qui utilise la boîte de travail en interne. C'est à peu près tout ce qu'il y a 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 Web.
Sachez que vous pouvez modifier votre contenu ou ces paramètres à tout moment. Lorsque vous publiez vos modifications, le service worker est mis à jour sur le 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 outils et applications pour les développeurs dans le navigateur pour afficher les informations concernant le service worker.
Vous pouvez augmenter l'espace de stockage du cache pour afficher le contenu mis en cache localement:
Les résultats
Il est temps d'examiner les résultats de votre travail acharné. Avec une simple configuration et sans codage, vous venez d'améliorer votre site AEM pour en faire une progressive web app.
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 de type application pour votre site Web, qui exploite la nature multiplate-forme et ouverte du Web, à moindre coût de développement et de maintenance, tout en vous permettant de contrôler la distribution. Cela permet d'améliorer l'engagement et la fidélisation, mais surtout de générer des taux de conversion plus élevés. L'utilisation conjointe d'AEM et de Workbox vous permet d'améliorer facilement votre site existant en une PWA, sans avoir à coder ni à configurer.
Références
- Tutoriel WKND
- Service workers
- API Cache
- Fichier manifeste d'application Web
- Compatibilité avec les icônes adaptatives dans les PWA comportant 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