Aktivieren von PWA (Progressive Web App)-Funktionen

Durch eine einfache Konfiguration kann ein Inhaltsautor jetzt PWA (Progressive Web App)-Funktionen für in AEM Sites erstellte Erlebnisse aktivieren.

VORSICHT

Dies ist eine erweiterte Funktion, die Folgendes erfordert:

  • Kenntnis der PWAs
  • Kenntnis der Site- und Inhaltsstruktur
  • Verständnis von Caching-Strategien
  • Unterstützung durch Ihr Entwicklungs-Team

Bevor Sie diese Funktion verwenden, sollten Sie dies mit Ihrem Entwicklungs-Team besprechen, um herauszufinden, wie Sie sie am besten für Ihr Projekt nutzen können.

HINWEIS

Die in diesem Dokument beschriebenen Funktionen sollen mit der AEM Version März 2021 als Cloud Service verfügbar gemacht werden.

Einführung

PWAs (Progressive Web Apps) ermöglichen ansprechende Mobile-App-ähnliche Erlebnisse für AEM Sites, indem sie lokal auf dem Rechner eines Benutzers gespeichert werden und offline zugänglich sind. Ein Benutzer kann eine Site unterwegs durchsuchen, selbst wenn die Internet-Verbindung unterbrochen ist. PWAs ermöglichen nahtlose Erlebnisse, selbst wenn das Netzwerk verloren geht oder instabil ist.

Anstatt eine Neukodierung der Website zu erfordern, kann ein Inhaltsautor die PWA-Eigenschaften als zusätzliche Registerkarte in den Seiteneigenschaften einer Website konfigurieren.

  • Beim Speichern oder Veröffentlichen löst diese Konfiguration einen Event-Handler aus, der die Manifestdateien und Service Worker schreibt, die die PWA-Funktionen auf der Site aktivieren.
  • Sling-Zuordnungen werden auch beibehalten, um sicherzustellen, dass der Service Worker aus dem Stammverzeichnis des Programms bedient wird, um Proxy-Inhalte zu ermöglichen, die Offline-Funktionen innerhalb der App erlauben.

Mit PWA verfügt der Benutzer über eine lokale Kopie der Website, die auch ohne Internet-Verbindung eine Mobile-App-ähnliche Erfahrung bietet.

HINWEIS

Progressive Web Apps sind eine sich weiterentwickelnde Technologie. Die Unterstützung für die Installation lokaler Apps und andere Funktionen hängt davon ab, welchen Browser Sie verwenden.

Voraussetzungen

Damit Sie die PWA-Funktionen für Ihre Site nutzen können, muss Ihre Projektumgebung 2 Voraussetzungen erfüllen:

  1. Verwenden Sie Core Components, um diese Funktion zu nutzen
  2. Anpassen der Dispatcher-Regeln, um die erforderlichen Dateien verfügbar zu machen.

Dies sind technische Schritte, die der Autor mit dem Entwicklungs-Team koordinieren muss. Diese Schritte sind nur einmal pro Site erforderlich.

Verwenden Sie die Kernkomponenten

Hauptkomponenten ab Version 2.15.0 unterstützen die PWA-Funktionen von AEM Sites vollständig. Da AEMaaCS immer die neueste Version der Hauptkomponenten enthält, können Sie die PWA-Funktionen sofort nutzen. Ihr AEMaaCS-Projekt erfüllt diese Anforderung automatisch.

HINWEIS

Es wird nicht empfohlen, die PWA-Funktionen für benutzerdefinierte Komponenten oder Komponenten zu verwenden, die nicht vom Erzkomponenten erweitert sind.

Anpassen des Dispatchers

Die PWA-Funktion generiert und verwendet /content/<sitename>/manifest.webmanifest-Dateien. Standardmäßig stellt der Dispatcher diese Dateien nicht bereit. Um diese Dateien bereitzustellen, muss der Entwickler die folgende Konfiguration zum Site-Projekt hinzufügen.

File location: [project directory]/dispatcher/src/conf.dispatcher.d/filters/filters.any >

# Allow webmanifest files
/0102 { /type "allow" /extension "webmanifest" /path "/content/*/manifest" }

Je nach Projekt sollten Sie verschiedene Arten von Erweiterungen in die Umformulierungsregeln einbeziehen. Die Erweiterung webmanifest kann nützlich sein, wenn Sie eine Regel zum Ausblenden und Weiterleiten von Anforderungen an /content/<projectName> in die Umschreibungsbedingungen einführen.

RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg|.webmanifest)$

Aktivieren von PWA für Ihre Site

Wenn die Voraussetzungen erfüllt sind, ist es für einen Inhaltsautor sehr einfach, PWA-Funktionen für eine Site zu aktivieren. Im Folgenden finden Sie eine Übersicht über die Vorgehensweise. Die einzelnen Optionen sind im Abschnitt Detaillierte Optionen aufgeführt.

  1. Melden Sie sich bei AEM an.

  2. Tippen oder klicken Sie im Hauptmenü auf Navigation > Sites.

  3. Wählen Sie Ihr Site-Projekt aus und tippen oder klicken Sie auf Eigenschaften oder verwenden Sie den Hotkey p.

  4. Wählen Sie die Registerkarte Progressive Web App aus und konfigurieren Sie die entsprechenden Eigenschaften. Führen Sie mindestens Folgendes aus:

    1. Wählen Sie die Option PWA aktivieren aus.

    2. Definieren Sie die Start-URL.

      PWA aktivieren

    3. Laden Sie ein PNG-Symbol mit 512 x 512 Pixeln in das DAM hoch und referenzieren Sie dieses als Symbol für die App.

      PWA-Symbol definieren

    4. Konfigurieren Sie die Pfade, die der Service Worker offline verwenden soll. Typische Pfade sind:

      • /content/<sitename>
      • /content/experiencefragements/<sitename>
      • /content/dam/<sitename>
      • Beliebige Font-Referenzen von Drittanbietern
      • /etc/clientlibs/<sitename>

      PWA-Offline-Pfade definieren

  5. Tippen oder klicken Sie auf Speichern und schließen.

Ihre Site ist jetzt konfiguriert und Sie können sie als lokale App installieren.

Verwenden Ihrer PWA-fähigen Site

Nachdem Sie Ihre Site für die Unterstützung von PWA konfiguriert haben, können Sie sie selbst ausprobieren.

  1. Rufen Sie die Site in einem unterstützten Browser auf.
  2. In der Adressleiste des Browsers wird ein neues Symbol angezeigt, das darauf hinweist, dass die Site als lokale App installiert werden kann.
    • Je nach Browser kann das Symbol variieren, und der Browser zeigt ggf. auch eine Benachrichtigung an (z. B. ein Banner oder ein Dialogfeld), die darauf hinweist, dass eine Installation als lokale App möglich ist.
  3. Installieren Sie das Programm.
  4. Die App wird auf dem Startbildschirm Ihres Geräts installiert.
  5. Öffnen Sie die App, navigieren Sie ein wenig und stellen Sie sicher, dass die Seiten offline verfügbar sind.

Detaillierte Optionen

Im folgende Abschnitt finden Sie weitere Informationen zu den Optionen, die bei der Konfiguration Ihrer Site für PWA verfügbar sind.

Konfigurieren installierbarer Erlebnisse

Mit diesen Einstellungen kann sich die Website wie eine native Mobile App verhalten, indem sie auf dem Startbildschirm der Besucher installierbar und offline verfügbar gemacht wird.

  • PWA aktivieren: Dies ist der Hauptumschalter zum Aktivieren von PWA für die Website.
  • Start-URL: Dies ist die bevorzugte Start-URL, die die App öffnet, wenn der Benutzer die lokal installierte App lädt.
    • Dies kann ein beliebiger Pfad in Ihrer Inhaltsstruktur sein.
    • Dies muss nicht das Stammverzeichnis sein und ist oft eine spezielle Startseite für die App.
    • Wenn diese URL relativ ist, wird die Manifest-URL als Basis-URL verwendet, um sie aufzulösen.
    • Wenn das Feld leer gelassen wird, verwendet die Funktion die Adresse der Web-Seite, von der aus die App installiert wurde.
    • Es wird empfohlen, einen Wert festzulegen.
  • Anzeigemodus: Eine PWA-fähige App ist immer noch eine AEM-Site, die über einen Browser bereitgestellt wird. Diese Anzeigeoptionen legen fest, wie der Browser ausgeblendet oder anderweitig dem Benutzer auf dem lokalen Gerät präsentiert werden soll.
    • Eigenständig: Der Browser wird vollständig vor dem Benutzer verborgen und er erscheint wie eine native App. Dies ist der Standardwert.
      • Bei dieser Option muss die App-Navigation vollständig über Ihre Inhalte mithilfe von Links und Komponenten auf den Seiten der Website möglich sein, ohne die Navigationssteuerelemente des Browsers zu verwenden.
    • Browser: Der Browser wird so angezeigt, wie er normalerweise beim Besuch der Website angezeigt wird.
    • Minimale Benutzeroberfläche: Der Browser ist wie eine native App größtenteils ausgeblendet, grundlegende Navigationssteuerelemente werden jedoch angezeigt.
    • Vollbild: Der Browser ist wie eine native App vollständig ausgeblendet, wird aber im Vollbildmodus gerendert.
      • Bei dieser Option muss die App-Navigation vollständig über Ihre Inhalte mithilfe von Links und Komponenten auf den Seiten der Website möglich sein, ohne die Navigationssteuerelemente des Browsers zu verwenden.
  • Bildschirmausrichtung: Als lokale App muss die PWA wissen, wie sie mit Geräteausrichtungen umzugehen hat.
    • Beliebig: Die App passt sich der Ausrichtung des Geräts des Benutzers an. Dies ist der Standardwert.
    • Hochformat: Dadurch wird die App unabhängig von der Ausrichtung des Geräts des Benutzers im Hochformat geöffnet.
    • Querformat: Dadurch wird die App unabhängig von der Ausrichtung des Geräts des Benutzers im Querformat geöffnet.
  • Themenfarbe: Hiermit wird die Farbe der App definiert, die sich darauf auswirkt, wie das Betriebssystem des lokalen Benutzers die native Symbolleiste der Benutzeroberfläche und die Navigationssteuerelemente anzeigt. Je nach Browser kann sich das auch auf andere Darstellungselemente der App auswirken.
    • Verwenden Sie das Farbfeld-Popup, um eine Farbe auszuwählen.
    • Die Farbe kann auch durch einen Hex- oder RGB-Wert definiert werden.
  • Hintergrundfarbe: Hiermit wird die Hintergrundfarbe der App definiert, die beim Laden der App angezeigt wird.
    • Verwenden Sie das Farbfeld-Popup, um eine Farbe auszuwählen.
    • Die Farbe kann auch durch einen Hex- oder RGB-Wert definiert werden.
    • Bestimmte Browser bauen einen Startbildschirm automatisch aus dem App-Namen, der Hintergrundfarbe und dem Symbol auf.
  • Symbol: Hiermit wird das Symbol definiert, das die App auf dem Gerät des Benutzers darstellt.

Cache-Verwaltung (Erweitert)

Mit diesen Einstellungen werden Teile der Website offline und lokal auf dem Gerät des Besuchers verfügbar. Dies ermöglicht die Steuerung des Cache-Speichers der Web-Anwendung, um Netzwerkanfragen zu optimieren und Offline-Erlebnisse zu unterstützen.

  • Caching-Strategie und Häufigkeit der Inhaltsaktualisierung: Diese Einstellung definiert das Caching-Modell für Ihre PWA.
    • Mäßig: Diese Einstellung gilt für die meisten Sites und ist der Standardwert.
      • Bei dieser Einstellung wird der Inhalt, den der Benutzer zuerst sieht, aus dem Cache geladen, und während der Benutzer diesen Inhalt verwendet, wird der restliche Inhalt im Cache erneut aktualisiert.
    • Häufig: Dies ist der Fall bei Sites, die sehr schnell aktualisiert werden müssen, wie z. B. Auktionshäuser.
      • Bei dieser Einstellung sucht die App zuerst über das Netzwerk nach den neuesten Inhalten. Wenn diese nicht verfügbar sind, wird auf den lokalen Cache zurückgegriffen.
    • Selten: Dies ist der Fall bei Websites, die nahezu statisch sind, z. B. Referenzseiten.
      • Bei dieser Einstellung sucht die App zuerst nach dem Inhalt im Cache und greift, wenn er nicht verfügbar ist, auf das Netzwerk zurück, um ihn abzurufen.
  • Vorab-Caching von Dateien: Diese in AEM gehosteten Dateien werden beim Installieren des Service Workers und vor der Verwendung im lokalen Browser-Cache gespeichert. Dadurch wird sichergestellt, dass die Web-App im Offline-Modus voll funktionsfähig ist.
  • Pfadeinschlüsse: Netzwerkanfragen für die definierten Pfade werden abgefangen und zwischengespeicherte Inhalte werden entsprechend der konfigurierten Caching-Strategie und der Häufigkeit der Inhaltsaktualisierung zurückgegeben.
  • Cache-Ausschlüsse: Diese Dateien werden unabhängig von den Einstellungen unter Vorab-Caching von Dateien und Pfadeinschlüsse niemals zwischengespeichert.
TIPP

Ihr Entwickler-Team hat wahrscheinlich wertvolle Hinweise dazu, wie Ihre Offline-Konfiguration eingerichtet werden sollte.

Einschränkungen und Recommendations

Nicht alle PWA-Funktionen sind für AEM Sites verfügbar. Hier sind einige nennenswerte Einschränkungen.

  • Seiten werden nicht automatisch synchronisiert oder aktualisiert, wenn der Benutzer die App nicht verwendet.

Bei der Implementierung von PWA gibt Adobe außerdem die folgenden Empfehlungen ab.

Minimieren Sie die Anzahl der Ressourcen, die vor dem Zwischenspeichern bereitgestellt werden sollen.

Adobe empfiehlt Ihnen, die Anzahl der Seiten auf den Pre-Cache zu begrenzen.

  • Betten Sie Bibliotheken ein, um die Anzahl der Einträge zu reduzieren, die bei der Vorzwischenspeicherung verwaltet werden sollen.
  • Schränken Sie die Anzahl der Bildvarianten auf den Pre-Cache ein.

Aktivieren Sie PWA, nachdem die Projektskripte und Stylesheets stabilisiert wurden.

Client-Bibliotheken werden mit dem Zusatz eines Cache-Selektors bereitgestellt, der das folgende Muster lc-<checksumHash>-lc berücksichtigt. Jedes Mal, wenn eine der Dateien (und Abhängigkeiten), aus denen eine Bibliothek besteht, geändert wird, ändert sich dieser Selektor. Wenn Sie eine Client-Bibliothek aufgelistet haben, die vom Service-Worker vorab zwischengespeichert werden soll, und auf eine neue Version verweisen möchten, rufen Sie den Eintrag manuell ab und aktualisieren Sie ihn. Daher empfehlen wir Ihnen, Ihre Site nach der Stabilisierung der Projektskripte und Stylesheets als PWA zu konfigurieren.

Minimieren Sie die Anzahl der Bildvarianten.

Die Image-Komponente der AEM Core-Komponenten bestimmt eine der Frontend-Darstellungen, die Sie am besten abrufen können. Dieser Mechanismus enthält auch einen Zeitstempel, der der letzten geänderten Zeit dieser Ressource entspricht. Dieser Mechanismus kompliziert die Konfiguration des PWA-Pre-Cache.

Beim Konfigurieren des Pre-Cache muss der Benutzer alle Pfadvarianten, die abgerufen werden können, Liste haben. Diese Varianten bestehen aus Parametern wie Qualität und Breite. Es wird dringend empfohlen, die Anzahl dieser Varianten auf maximal drei zu reduzieren - klein, mittel, groß. Dies können Sie über das Dialogfeld für die Inhaltsrichtlinie der Bildkomponente.

Wenn der Speicher- und Netzwerkverbrauch nicht sorgfältig konfiguriert wird, kann dies die Leistung Ihres PWA erheblich beeinträchtigen. Wenn Sie z. B. 50 Bilder bearbeiten möchten und 3 Breiten pro Bild haben möchten, muss der Benutzer, der die Site pflegt, eine Liste von bis zu 150 Einträgen im Bereich "PWA vor Cache"der Seiteneigenschaften verwalten.

Adobe empfiehlt Ihnen auch, Ihre Site so zu konfigurieren, dass sie eine PWA ist, nachdem sich die Verwendung der Bilder im Projekt stabilisiert hat.

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now