Wenn Sie als Technical Lead oder Analyst für digitales Marketing daran interessiert sind, eine moderne Weberfahrung für Ihre Adobe Experience Manager-Webanwendung (AEM) bereitzustellen, und dabei nach Ihren Möglichkeiten gesucht haben, sind Sie beim richtigen Artikel angelangt. Hier erfahren Sie, was progressive Web-Apps (PWA) sind und was Sie benötigen, um eine PWA in AEM zu erstellen, die die WorkBox-Bibliothek über die Konfiguration ohne Programmierung nutzt.
Warum PWA?
Progressive Web-Apps nutzen die Möglichkeiten des modernen Webs. Sie können auf Ihrem Gerät installiert werden und werden schnell geladen, bei nachfolgenden Besuchen werden sie sofort geladen. Sie reagieren schnell auf Eingaben. Sie funktionieren auch bei unzuverlässiger Verbindung oder offline. PWAs verwenden moderne APIs, um eine ansprechende App-ähnliche Nutzung mit optionaler Vollbild-Benutzeroberfläche, Hintergrundaktualisierung und Offlinezugriff auf Daten zu bieten.
Um aus einer Web-App eine progressive Web-App zu machen, sind zwei Artefakte erforderlich:
- Ein Web-App-Manifest: eine JSON-Konfigurationsdatei, in der die Einstiegspunkt-URL der App, das Symbol für die PWA und eine andere Konfiguration definiert wird, die das Aussehen und Verhalten der App beschreibt.
- Ein Service Worker: Ein Script, das Hintergrunddienste bereitstellt, mit denen die von ihr verwendeten Ressourcen und die Strategien für den Zugriff auf Ihre PWA angereichert werden.
Was ist ein Service Worker?
Ein Service Worker ist im Wesentlichen ein Skript, das Ihr Browser unabhängig ausführt, während Sie mit Ihrer Webanwendung interagieren. Ein aktiver Service Worker bietet Dienste wie intelligentes Caching mithilfe der Cache API an, hält Daten mithilfe der Background Sync API auf dem neuesten Stand und integriert sie in Push-Benachrichtigungen. Ein Service Worker mit der richtigen Caching-Strategie sorgt für eine stabile und zuverlässige Nutzererfahrung in verschiedenen Szenarien. Er gibt vorab im Cache gespeicherte Ressourcen sofort zurück, speichert Daten im Cache und aktualisiert Ressourcen, wenn eine Internetverbindung besteht.
Es kann schwierig sein, Service Worker von Grund auf neu zu schreiben. Workbox wurde entwickelt, um Ihnen die Arbeit zu erleichtern. Workbox umfasst eine Reihe von Bibliotheken, die Ihnen das Schreiben und Verwalten von Service Workern und das Caching mit der Cache Storage API erleichtern. Durch die gemeinsame Verwendung von Service Workern und der Cache Storage API steuern Sie, wie Assets (HTML, CSS, JS, Bilder usw.) vom Netzwerk oder Cache angefordert werden. Dies ermöglicht sogar die Rückgabe von im Cache gespeicherten Inhalten, wenn Sie offline sind. Mit Workbox können Sie beides und vieles mehr schnell mit produktionsreifem Code einrichten und verwalten.
Upgrade einer AEM-Website auf eine PWA ausführen
Adobe Experience Manager (AEM) ist eine umfassende Content-Management-Lösung zum Erstellen von Websites, mobilen Apps, Formularen und digitaler Beschilderung. So können Sie Ihre Marketinginhalte und -assets ganz einfach verwalten.
AEM bietet zwar eine umfangreiche Bibliothek zum Erstellen von Webanwendungen, aber bisher war es schwierig, eine PWA durch Hinzufügen eines Service Workers und eines Manifests zu erstellen.
Adobe Experience Manager Sites ist ein Tool zum Erstellen von Benutzeroberflächen, das zu Adobe Experience Manager gehört. Wenn AEM Sites mit Adobe Experience Manager als Cloud-Dienst verwendet wird, lassen sich bestehende AEM-Websites oder Single-Page-Anwendungen ganz einfach in eine installierbare, Offline-fähige progressive Web-App konvertieren – ganz ohne Programmierung und Konfiguration. Es nutzt Workbox, um die Best Practices für progressive Web-Apps bereitzustellen, und vereinfacht das Schreiben von Standardmanifesten und Service Workern.
AEM unterstützt die Lokalisierung von Inhalten. Das bedeutet, dass Sie für verschiedene Sprachen unterschiedliches Branding und sogar unterschiedliche Offlineinhalte haben können. Erstellen Sie dazu für jeden Sprachmaster unterschiedliche PWA-Konfigurationen.
Erste Schritte mit der PWA-Konfiguration in AEM
Melden Sie sich in Adobe Experience Manager als Cloud-Dienst an, wählen Sie eine beliebige Websiteseite oder Sprachmasterseite von Adobe Experience Manager aus und klicken Sie auf „Eigenschaften“. Sie sollten den Tab „Progressive Web-App“ sehen. (Hinweis: Wenn diese Registerkarte nicht angezeigt wird, wenden Sie sich an Adobe, um diese Funktion zu aktivieren.) Sie können die Installation und das Design Ihrer progressiven Web-Apps mit nur wenigen Klicks konfigurieren.
Wenn Sie die Anleitungen zu AEM Sites durchgearbeitet haben, kennen Sie die WKND-Website wahrscheinlich schon. In diesem Artikel wird die WKND als Ausgangspunkt verwendet. Wenn Sie fertig sind, haben Sie WKND mit WorkBox von einer Web-App auf eine PWA aktualisiert.
Manifest konfigurieren
Das Web-App-Manifest ist eine JSON-Datei mit Eigenschaften, die das Erscheinungsbild und Verhalten einer PWA beschreiben. Adobe Experience Manager-Websites bieten eine nutzerfreundliche Benutzeroberfläche zum Konfigurieren der Eigenschaften.
Die Start-URL ist der Einstiegspunkt Ihrer PWA. Wenn ein Nutzer auf das PWA-Symbol auf seinem Smartphone tippt, kann er auf die Start-URL zugreifen. Der Anzeigemodus legt fest, ob die App im Fenstermodus oder im Vollbildmodus angezeigt wird. Sie können auch die Bildschirmausrichtung der App festlegen. Die Designfarbe ist die Farbe des Fensters und der Symbolleiste, während die Hintergrundfarbe die Farbe des Ladebildschirms ist, wenn die Anwendung gestartet wird. Das Symbol ist das Bild, das auf dem Startbildschirm oder in der App-Leiste angezeigt wird, wenn die App auf dem Gerät installiert ist. Durch die in der Abbildung gezeigte Konfiguration wird die unten gezeigte Manifest-JSON-Datei generiert.
{
"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"
}
]
}
Die Start-URL kann sich von der Standard-Landingpage für Ihre Domain unterscheiden. Wenn Sie den Parameter start_url ändern, können Sie Ihre Nutzer direkt zur App-Oberfläche weiterleiten statt auf die Standardseite, die einem nicht authentifizierten oder neuen Nutzer angezeigt wird. Dies bietet PWA-Nutzern eine reibungslosere, App-ähnliche Nutzung.
AEM ist bewusst, dass das Erscheinungsbild verschiedener Sprachen unterschiedlich sein kann. Sie können verschiedene Eigenschaften, Farben und Symbole für verschiedene Gebietsschemata oder Sprachen konfigurieren und die Konfiguration dann mit den verknüpften Seiten synchronisieren.
Sobald im Browser auf die PWA zugegriffen wird, können Sie per Rechtsklick die Entwicklertools aufrufen und sich das Manifest im Bereich „Anwendungen“ ansehen.
Service Worker konfigurieren
Sie können den Inhalt, der im Cache gespeichert werden soll, und die zu verwendende Caching-Strategie konfigurieren.
Wenn Sie Service Worker verwendet haben, sind Sie möglicherweise mit Caching-Strategien vertraut. Caching-Strategien legen fest, welche Ressourcen im Cache gespeichert werden sollen und ob sie zuerst im Cache, im Netzwerk oder mit einem Netzwerk-Fallback im Cache gesucht werden sollen. Sie können dann die Ressourcen auswählen, die vorab im Cache gespeichert werden sollen, wenn der Service Worker installiert wird. Die AEM-Anwendungs-Service-Worker implementieren eine Warm-Cache-Strategie. Dies bedeutet, dass die Nutzererfahrung auch dann nicht beeinträchtigt wird, wenn Sie einen fehlenden oder fehlerhaften Pfad angeben.
In AEM bezieht sich auf clientseitige Bibliotheken: die Kombination zugehöriger JavaScript-, CSS- und statischer Ressourcen, die dem Projekt hinzugefügt wurden und vom Webbrowser des Clients bereitgestellt und von diesem genutzt werden. Sie können Ihre clientseitigen Bibliotheken ganz einfach offline verwenden, indem Sie diese Bibliotheken in der Benutzeroberfläche angeben.
Sie können auch Ressourcen von Drittanbietern wie Schriftarten einbinden. Diese Offline-Cache-Konfiguration stellt einem Service Worker Konfigurationsinformationen bereit, die für Ihre Anwendung generiert und intern verwendet werden. Das ist im Prinzip alles, was Sie brauchen, um Ihre Anwendung installierbar zu machen. Nach der Installation erscheint das App-Symbol genau wie eine Plattform-App auf dem Startbildschirm Ihres Mobilgeräts. Durch Klicken auf das Symbol wird die wknd-Website aufgerufen.
Sie können Ihre Inhalte oder diese Einstellungen jederzeit ändern. Wenn Sie Ihre Änderungen veröffentlichen, wird der Service Worker im Client über den Browser aktualisiert und der Nutzer wird darüber informiert, dass eine neuere Version der PWA verfügbar ist. Der Nutzer kann auf die Meldung klicken, um die Anwendung neu zu laden und die neuesten Updates abzurufen. Sie können den Bereich mit den Entwicklertools und den Anwendungen des Browsers öffnen, um die Service Worker-Details anzusehen.
Sie können den Cache-Speicher erweitern, um sich die lokal zwischengespeicherten Inhalte anzusehen:
Die Ergebnisse
Jetzt ist es an der Zeit, sich die Ergebnisse Ihrer harten Arbeit anzusehen. Sie haben Ihre AEM-Website mit nur der Konfiguration und ohne Programmierung zu einer progressiven Web-App erweitert.
Die Entwicklertools von Chrome bieten einen Leuchtturm-Audit, mit dem Sie prüfen können, ob Ihre Webanwendung und -konfiguration den Standards für progressive Web-Apps entspricht.
Fazit
Progressive Web-Apps bieten eine App-ähnliche Nutzererfahrung für Ihre Website, die die plattformübergreifende und offene Natur des Webs zu geringeren Entwicklungs- und Wartungskosten nutzt und gleichzeitig die Kontrolle über den Vertrieb bietet. So lassen sich Nutzerbindung und Interaktionen steigern und vor allem höhere Conversion-Raten erzielen. Mit AEM und Workbox lässt sich Ihre bestehende Website ganz einfach in eine PWA umwandeln. Sie benötigen lediglich Konfiguration und keine Programmierkenntnisse.