Si vous êtes responsable technique ou analyste du marketing digital et que vous souhaitez proposer une expérience Web moderne à votre application Web Adobe Experience Manager (AEM) et que vous recherchez les options qui s'offrent à vous pour ce 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 utilisant la bibliothèque WorkBox via la configuration, sans codage.
Pourquoi une PWA ?
Les progressive web apps exploitent les capacités du Web moderne. Vous pouvez les installer sur votre appareil et les charger rapidement. Les visites suivantes sont également chargées instantanément. Ils réagissent rapidement aux informations. Ils fonctionnent bien avec une connexion peu fiable ou hors connexion. Les PWA utilisent des API modernes pour offrir une expérience semblable à celle d'une application, avec une interface utilisateur en plein écran en option, des mises à jour en arrière-plan et un accès hors connexion aux données.
Pour transformer une application Web en une 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.
- Service worker: script qui fournit des services d'arrière-plan qui enrichissent 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 ?
À la base, un service worker est un simple script que votre navigateur exécute de manière indépendante 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.
Les service workers peuvent être difficiles à écrire à partir de zéro. La boîte de travail a été créée 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 à partir du réseau ou du cache, et même vous permettant de renvoyer du contenu mis en cache hors connexion. Avec Workbox, vous pouvez rapidement configurer et gérer les deux services, et bien plus, avec du code prêt pour la production.
Mise à niveau d'un site AEM vers une 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 des solutions de signalétique numérique. Il facilite la gestion de votre contenu et de vos ressources 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 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 monopage existant en une progressive web app installable hors connexion, avec une simple configuration et sans codage. Elle utilise Workbox pour appliquer les bonnes pratiques concernant les progressive web apps, et élimine les complexités liées à l'écriture de fichiers manifestes récurrent et de service workers.
L'AEM permet de localiser les contenus, ce qui signifie que vous pouvez utiliser des éléments de branding différents, 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 d'une PWA dans AEM
Connectez-vous à Adobe Experience Manager en tant que service cloud, sélectionnez n'importe quelle page de sites Adobe Experience Manager ou n'importe quelle langue, puis cliquez sur "Propriétés". Vous devriez voir un onglet intitulé "Progressive web app" (Application Web progressive). (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 didacticiels AEM Sites, vous avez probablement déjà consulté le site WKND. Cet article utilise la démo WKND comme point de départ. Lorsque vous aurez terminé, vous aurez mis à jour WKND d'une application Web vers une PWA à l'aide de WorkBox.
Configurer le fichier manifeste
Le fichier manifeste d'application Web est un fichier JSON qui contient les propriétés qui décrivent 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 permet de configurer l'application 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 est celle de la fenêtre et de la barre d'outils, tandis que la couleur d'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 le panneau des applications de l'appareil lorsque l'application est installée. La configuration présentée sur l'image génère le fichier manifeste JSON 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 les utilisateurs directement vers l'application plutôt que vers la page par défaut présentée à un nouvel utilisateur ou non authentifié. Les utilisateurs de PWA bénéficient ainsi d'une expérience plus fluide et proche de celle des applications.
L'AEM tient compte du fait que les paramètres régionaux peuvent varier. 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 utilisiez 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 indiquent si elles doivent être recherchées d'abord dans le cache, sur le réseau ou dans le cache avec une connexion réseau de remplacement. Vous pouvez ensuite choisir les ressources à mettre en pré-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" fait référence aux bibliothèques côté client, c'est-à-dire 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 les utiliser 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 à un service worker des informations de configuration qui sont générées pour votre application qui utilise Workbox en interne. C'est à peu près tout ce qu'il y a à faire 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.
Veuillez noter 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. Pour afficher les détails d'un service worker, ouvrez le panneau des outils pour les développeurs et des applications du navigateur.
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 le résultat de votre dur labeur. 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 semblable à celle d'une application pour votre site Web. Elles exploitent la nature multiplate-forme et ouverte du Web, pour un coût de développement et de maintenance inférieur, tout en contrôlant la distribution. Cela permet d'améliorer l'engagement, la fidélisation et surtout, les taux de conversion plus élevés. 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
- Prise en charge des 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