Wenn Sie als technischer Leiter oder Analyst für digitales Marketing daran interessiert sind, Ihrer Webanwendung Adobe Experience Manager (AEM) ein modernes Weberlebnis zur Verfügung zu stellen, und nach Ihren Möglichkeiten gesucht haben, sind Sie beim richtigen Artikel genau richtig. Hier erfahren Sie, was progressive Web-Apps (PWAs) sind und was Sie benötigen, um eine PWA in AEM zu erstellen und dabei die WorkBox-Bibliothek über die Konfiguration ohne Programmierung zu konfigurieren.
Warum PWA?
Progressive Web-Apps nutzen die Möglichkeiten des modernen Webs. Sie können auf Ihrem Gerät installiert werden, lassen sich schnell laden und nachfolgende Besuche werden sofort geladen. Sie reagieren schnell auf Eingaben. Sie funktionieren gut bei unzuverlässigen Verbindungen und offline. PWAs nutzen moderne APIs, um eine App-ähnliche Nutzererfahrung mit einer optionalen Vollbild-UI, Updates im Hintergrund und Offlinezugriff auf Daten zu bieten.
Um eine Web-App zu einer progressiven Web-App zu machen, müssen zwei Artefakte hinzugefügt werden:
- Ein Web-App-Manifest: eine JSON-Konfigurationsdatei, in der die Einstiegspunkt-URL der App definiert wird, das Symbol für die PWA und eine andere Konfiguration, mit der Aussehen und Verhalten der App beschrieben werden.
- Ein Service Worker: Ein Script, mit dem Hintergrunddienste bereitgestellt werden, die Ihre PWA anreichern. Dazu werden die von der PWA verwendeten Ressourcen und die Strategien für den Zugriff auf sie definiert.
Was ist ein Service Worker?
Im Kern ist ein Service Worker nur ein Skript, das Ihr Browser bei der Interaktion mit Ihrer Webanwendung unabhängig ausführt. Ein aktiver Service Worker stellt Dienste wie intelligentes Caching über die Cache API bereit, hält Daten mithilfe der Background Sync API auf dem neuesten Stand und integriert Push-Benachrichtigungen. Ein Service Worker mit der richtigen Caching-Strategie bietet eine stabile und zuverlässige Nutzererfahrung in verschiedenen Szenarien. Vorab im Cache gespeicherte Ressourcen werden sofort zurückgegeben, Daten im Cache gespeichert und Ressourcen werden aktualisiert, wenn eine Internetverbindung besteht.
Bei Service Workern kann es schwierig sein, von Grund auf neu zu schreiben. Die Workbox soll Ihnen die Arbeit erleichtern. Workbox besteht aus einer Reihe von Bibliotheken, die Sie beim Schreiben und Verwalten von Service Workern und dem Caching mit der Cache Storage API unterstützen. Wenn Service Worker und die Cache Storage API zusammen verwendet werden, steuern Sie, wie Assets (HTML, CSS, JS, Bilder usw.) vom Netzwerk oder Cache angefordert werden. Sie können damit sogar offline gespeicherte Inhalte zurückgeben. Mit Workbox können Sie beides und mehr schnell einrichten und verwalten – mit produktionsfertigem Code.
Upgrade einer AEM-Website auf eine PWA durchführen
Adobe Experience Manager (AEM) ist eine umfassende Content-Management-Lösung für die Erstellung von Websites, mobilen Apps, Formularen und digitaler Beschilderung. So können Sie Ihre Marketinginhalte und ‐assets ganz einfach verwalten.
AEM bietet eine umfassende Bibliothek zum Erstellen von Webanwendungen, aber bisher war es schwierig, eine PWA mit einem Service Worker und einem Manifest zu erstellen.
Adobe Experience Manager Sites ist ein Tool zum Erstellen von Benutzeroberflächen, das Teil des Adobe Experience Managers ist. Wenn AEM Sites zusammen mit dem Adobe Experience Manager als Cloud-Dienst verwendet wird, lässt sich jede vorhandene AEM-Website oder Single-Page-Anwendung ganz einfach in eine installierbare, offlinefähige progressive Web-App konvertieren. Diese muss nur konfiguriert und nicht programmiert werden. Es nutzt Workbox, um Best Practices für progressive Web-Apps bereitzustellen, und abstrahiert die Komplexität des Schreibens von Boilerplate-Manifesten und Service Workern.
AEM unterstützt die Lokalisierung von Inhalten. Das bedeutet, dass Sie unterschiedliches Branding und sogar unterschiedliche Offlineinhalte für verschiedene Sprachen verwenden können. Erstellen Sie dazu unterschiedliche PWA-Konfigurationen für jede Sprachversion.
Erste Schritte mit der PWA‐Konfiguration in AEM
Melden Sie sich als Cloud-Dienst in Adobe Experience Manager an, wählen Sie eine beliebige Adobe Experience Manager-Seite für Websites oder einen Sprachmaster aus und klicken Sie auf die Eigenschaften. Hier sollte der Tab „Progressive Web App“ angezeigt werden. Hinweis: Wenn dieser Tab nicht angezeigt wird, wende dich 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, haben Sie die WKND-Website wahrscheinlich schon einmal gesehen. In diesem Artikel wird die WKND-Demo als Ausgangspunkt verwendet. Wenn Sie fertig sind, haben Sie WKND mithilfe von WorkBox von einer Web-App auf eine PWA aktualisiert.
Manifest konfigurieren
Das Manifest der Web-App ist eine JSON-Datei mit Eigenschaften, die das Aussehen und Verhalten einer PWA beschreiben. Die Adobe Experience Manager-Website bietet eine benutzerfreundliche 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, wird er auf die Start-URL zugreifen. Der Anzeigemodus legt fest, ob die App im Fenster- oder Vollbildmodus angezeigt wird. Sie können auch die Bildschirmausrichtung der App festlegen. Die Designfarbe entspricht der Farbe des Fensters und der Symbolleiste. Die Hintergrundfarbe entspricht der Farbe des Ladebildschirms beim Starten der App. Das Symbol ist das Bild, das auf dem Startbildschirm oder in der App-Leiste des Geräts angezeigt wird, wenn die App auf dem Gerät installiert wird. Die im Bild gezeigte Konfiguration generiert die unten dargestellte Manifest-JSON-Datei.
{
"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 start_url-Parameter ändern, können Sie Ihre Nutzer direkt zur Benutzeroberfläche anstatt zur Standardseite weiterleiten, die nicht authentifiziert oder als neuer Nutzer angezeigt wird. So lassen sich PWA-Nutzer nutzerfreundlicher und app-ähnlicher gestalten.
AEM weiß, dass verschiedene Sprachen ein anderes Erscheinungsbild haben können. Sie können verschiedene Eigenschaften, Farben und Symbole für verschiedene Sprachen oder Sprachen konfigurieren und die Konfiguration dann mit den verlinkten Seiten synchronisieren.
Sobald der Zugriff auf die PWA im Browser erfolgt, können Sie mit der rechten Maustaste klicken und die Entwicklertools aufrufen, um das Manifest im Bereich „Anwendungen“ aufzurufen.
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 verwenden, sind Sie möglicherweise mit Caching-Strategien vertraut. Caching-Strategien geben an, welche Ressourcen im Cache gespeichert werden sollen und ob diese Ressourcen zuerst im Cache, zuerst im Netzwerk oder im Cache mit einem Netzwerk-Fallback gesucht werden sollen. Sie können dann auswählen, welche Ressourcen bei der Installation des Service Workers vorab im Cache gespeichert werden sollen. Worker von AEM Application Service implementieren eine Warm-Cache-Strategie, sodass die User Experience auch dann nicht beeinträchtigt wird, wenn Sie einen fehlenden oder fehlerhaften Pfad angeben.
In AEM bezieht sich der Begriff „clientlibs“ auf clientseitige Bibliotheken: eine Kombination aus zugehörigen JavaScript-, CSS- und statischen Ressourcen, die Ihrem Projekt hinzugefügt wurden und dem Client-Webbrowser bereitgestellt und von diesem verwendet werden. Sie können Ihre clientseitigen Bibliotheken einfach für die Offlinenutzung einrichten, indem Sie sie auf der Benutzeroberfläche angeben.
Sie können auch Drittanbieterressourcen wie Schriftarten hinzufügen. Diese Offline-Cache-Konfiguration stellt einem Service Worker Konfigurationsinformationen bereit, der für Ihre Anwendung generiert wird, die intern die Workbox verwendet. Mehr ist nicht nötig, um Ihre Anwendung installierbar zu machen. Nach der Installation wird das App-Symbol auf dem Startbildschirm Ihres Mobilgeräts genau wie eine Plattform-App angezeigt. Durch Klicken auf das Symbol wird die wknd-Website aufgerufen.
Du kannst deine Inhalte und diese Einstellungen jederzeit ändern. Wenn Sie Ihre Änderungen veröffentlichen, wird der Service Worker auf dem Client vom Browser aktualisiert und dem Nutzer wird eine Meldung angezeigt, dass eine neuere Version der PWA verfügbar ist. Der Nutzer kann auf die Nachricht klicken, um die Anwendung neu zu laden und die neuesten Updates zu erhalten. Sie können den Bereich für Entwicklertools und Anwendungen des Browsers öffnen, um die Service Worker-Details aufzurufen.
Sie können den Cache-Speicher erweitern, um die Inhalte zu sehen, die lokal im Cache gespeichert wurden:
Die Ergebnisse
Es ist Zeit, sich die Ergebnisse Ihrer harten Arbeit anzusehen. Sie können Ihre AEM-Website einfach konfigurieren und ganz ohne Programmieren zu einer progressiven Web-App machen.
Mit den Entwicklertools von Chrome können Sie prüfen, ob Ihre Webanwendung und Konfiguration mit den Standards für progressive Web-Apps kompatibel sind.
Fazit
Progressive Web-Apps bieten eine app-ähnliche Nutzererfahrung für Ihre Website, bei der die plattformübergreifende und offene Natur des Webs zu geringeren Entwicklungs- und Wartungskosten genutzt wird. Gleichzeitig haben Sie mehr Kontrolle über den Vertrieb. Das führt zu mehr Interaktionen, einer stärkeren Nutzerbindung und vor allem höheren Conversion-Raten. In Verbindung mit Workbox können Sie mit AEM ganz einfach Ihre bestehende Website zu einer PWA erweitern. Dafür benötigen Sie nur eine Konfiguration und keine Programmierung.
Verweise
- WKND-Anleitung
- Service Worker
- Cache-API
- Manifest der Webanwendung
- Unterstützung adaptiver Symbole in PWAs mit maskierbaren Symbolen
- Weitere Informationen zu Websites im Adobe Experience Manager
- Weitere Informationen zu Workbox:
- Workbox-Caching-Strategien:
- Weitere Informationen zu progressiven Web-Apps