-
Bartosz StarygaFront-End Solution Architect, Magnolia
Erste Schritte mit Progressive Web Apps (PWAs)
Progressive Web Apps (PWAs) werden immer beliebter, und immer mehr Websites und Webanwendungen enthalten PWA-Elemente. In diesem Artikel erfahren Sie, was eine PWA ist, wie Sie mit PWAs beginnen können und welche Vorteile PWA-Techniken bieten.
Was ist eine Progressive Web App?
Eine PWA ist eine spezielle Art von Website oder Webanwendung, die plattformunabhängig ist und das Verhalten einer nativen mobilen App auf verschiedenen Geräten imitieren kann. Wenn Sie eine PWA auf Ihrem Mobilgerät installieren, erhalten Sie eine bequeme App-ähnliche Verknüpfung und können die Website oder App auch offline nutzen.
Als Entwickler können Sie dafür sorgen, dass Teile Ihrer Website offline funktionieren, wie eine native App funktionieren oder andere Funktionen einer PWA nutzen.
Bei der Erörterung des Themas ist es wichtig zu verstehen, dass eine PWA sich nicht auf eine bestimmte Technologie bezieht und Sie nicht dazu zwingt, Ihr Lieblings-Framework aufzugeben. PWAs bieten Optionen zusätzlich zur Webentwicklung, z. B. Media-Queries. Das bedeutet, dass wir PWAs auf neuen und bestehenden Websites implementieren können.
PWA 101
Um sich als PWA zu qualifizieren, muss eine Website mehrere Anforderungen erfüllen:
Die Verbindung zur Website muss sicher sein. Die Domain muss über ein SSL-Zertifikat verfügen und den Datenverkehr verschlüsseln.
Die Website muss responsive sein und sich an mobile Geräte anpassen.
Die Website muss eine Punktzahl von mindestens 75 % in Google Lighthouse erreichen.
Der <head> der Website muss ein <meta>-Element enthalten
- das die Themenfarbe definiert.
Die Website muss ein Manifest enthalten
- eine Datei mit Informationen über die PWA
- einschließlich ihres Namens
- Symbols und der URL zum Öffnen.
Eine PWA benötigt einen Service Worker. Ein Service Worker ist eine JavaScript-Datei
- die das Caching-Verhalten im Online-Modus und die Logik zur Unterstützung der PWA im Offline-Modus steuert.
Thema Farbe
Durch Hinzufügen des Meta-Tags "theme-color" ändert sich die Farbe der Browser-Symbolleiste bei Browser/Mobile OS-Kombinationen, die dieses Tag unterstützen, wie Chrome für Android. Sie können das Tag hinzufügen, auch wenn Sie keine PWA erstellen.
Sie können eine Themenfarbe festlegen, indem Sie nur eine Zeile Code in den <head> Ihrer HTML-Dokumente einfügen:
<meta name="theme-color" content="COLOR"> Ersetzen Sie einfach COLOR durch die HEX-Notation der Farbe:
<meta name="theme-color" content="#589823" /> Why Progressive Web Apps Make Sense
The web is changing, and consumers expect more—faster. To adapt to keep up, brands are turning to progressive web apps (PWAs).
Manifest
Das Manifest ist eine JSON-Datei, die Informationen über Ihre PWA enthält. Sie können den Namen der Anwendung, Icon-Links, die URL, die beim Start geöffnet wird, die Sprache der Anwendung und die Farbe des Startbildschirms angeben, um nur einige zu nennen.
Konzentrieren wir uns vorerst auf die Grundversion des Manifests. Die folgenden Name/Wert-Paare sind das Minimum:
{ "name": "", "short_name": "", "icons": [ { "src": "", "sizes": "", "type": "" } ], "start_url": "", "background_color": "", "theme_color": "", "display": "" } Lassen Sie mich diese Eigenschaften erklären:
name: Der Name Ihrer Anwendung
name ist eine Standardeigenschaft, die für Pop-ups und Nachrichten verwendet wird, die auf Ihre Anwendung verweisen.
short_name: Der Kurzname Ihrer Anwendung
Wenn der Name der Anwendung zu lang ist, wird short_name verwendet.
Ikonen: Die für Ihre Anwendung verfügbaren Symbole
Der Eintrag für jedes Symbol enthält den Speicherort der Datei und die Größe des Symbols. Der Dateityp ist optional. Wenn mehrere Symbolgrößen angegeben werden, wählt das mobile Gerät die beste Größe für die Anzeige aus.
start_url: Die URL, die geladen wird, wenn der Benutzer die Anwendung startet
Sie können Ihrer PWA eine eigene start_URL zuweisen. So können Sie mit einem Tool wie Google Analytics verfolgen, wie viele Nutzer Ihre PWA im Vergleich zu Ihrer nativen Website verwenden. Wenn Sie die PWA-Nutzung nicht verfolgen möchten, können Sie die Adresse Ihrer Website oder "/" einfügen.
background_color und theme_color: Die von Ihrer Anwendung verwendeten Farben
background_color legt die Farbe des Startbildschirms fest, z. B. des Begrüßungsbildschirms unserer Anwendung. theme_color legt die Farbe der Symbolleiste fest und sollte mit dem Meta-Tag "theme-color" identisch sein.
Anzeige: Der Anzeigetyp unserer Anwendung
Anzeige kann folgende Werte annehmen:
Vollbild: Die Anwendung füllt den gesamten Bildschirm aus
- einschließlich der Symbolleiste und aller sekundären Schaltflächen
- wodurch der Eindruck einer nativen mobilen Anwendung entsteht. Dies ist eine sehr nützliche Option für Spiele. Wenn diese Option aus irgendeinem Grund nicht verfügbar ist
- kann auf die Option "Standalone" zurückgegriffen werden.
Eigenständig: Diese Anzeigeoption ist eine großartige Imitation einer nativen App und ähnelt sehr dem Vollbildmodus
- mit der Ausnahme
- dass sie Elemente der Benutzeroberfläche des Mobilgeräts wie eine Symbolleiste oder Hilfeschaltflächen enthält. Der Fallback ist minimal-ui.
minimal-ui: Je nach Gerät und Browser des Benutzers werden die Schaltflächen "Vor"
- "Zurück" und "Aktualisieren" sowie möglicherweise eine Druck- oder Freigabeoption angezeigt. Der Fallback ist browser.
Browser: Die App wird im Standardbrowser des Benutzers geöffnet und verhält sich eher wie eine Web-Verknüpfung als eine eigenständige App. Für diese Option gibt es keine Ausweichmöglichkeit.
Dies ist ein Beispiel für manifest.json:
{ "name": "Erste Schritte mit PWAs", "short_name": "PWAs", "icons": [ { "src": "48.ico", "type": "image/ico", "sizes": "48x48" } ], "start_url": "/?utm_source=pwa", "background_color": "#589823", "theme_color": "#f6f6f6", "display": "standalone" } manifest.json muss im <head> Ihrer Website verlinkt werden:
<link rel="manifest" href="manifest.json" /> Ich empfehle Ihnen, Ihre Manifestdatei zu versionieren, um Ihren Browser zu zwingen, die neueste Version unserer PWA zu laden, falls erforderlich:
<link rel="manifest" href="manifest.json?v=1.0.0" /> Servicemitarbeiter
Mit einem Service Worker können Sie Ihre Anwendung um die Funktionen nativer mobiler Anwendungen wie Offline-Arbeiten und Push-Benachrichtigungen erweitern. Er ist in JavaScript geschrieben und seine .js-Datei muss mit Ihrer Anwendung verknüpft werden.
Er fungiert als Proxy zwischen der App und dem Internet und speichert Elemente Ihrer Website wie Bilder, HTML- und CSS-Dateien im Cache und macht diese Elemente offline verfügbar. Das Caching beschleunigt auch den Betrieb Ihrer App im Online-Modus, da zwischengespeicherte Elemente aus dem Cache genommen und nicht aus dem Netzwerk heruntergeladen werden.
Ein Service Worker läuft wie ein Web Worker als separater Thread im Hintergrund. Er ist unabhängig von der Anwendung, so dass Sie weder den Hauptthread blockieren noch die Arbeit Ihrer Anwendung beeinträchtigen. Er kann auch programmierte Operationen ausführen, selbst wenn die Anwendung oder der Browser geschlossen ist, so dass Sie Push-Benachrichtigungen senden können.
Die Ausführung in einem separaten Thread bedeutet auch, dass der Service Worker keinen Zugriff auf die DOM-Elemente, localStorage und AJAX hat. Er verwendet daher andere Web-API-Funktionen wie Fetch-API und Cache-API und arbeitet nur mit asynchronen Daten, die als Versprechen bezeichnet werden.
Große Bibliotheken wie React, Angular und Vue ermöglichen es Ihnen bereits, Ihre App mit einem Service Worker zu booten.
Die Zukunft des Erlebnisdesigns
Das Konzept der PWAs ist ein Leitgedanke für die Erstellung von Websites und die Bereitstellung eines neuen Werts für Endnutzer. Es ist eine Folge der Entwicklung des Internets: Was früher einfache Webentwicklung war, entwickelte sich zu responsivem Webdesign und bewegt sich nun in Richtung Progressive Web Apps.
Wenn Sie mehr über PWAs erfahren und sich auf die Fortschrittlichkeit der Webanwendungen einlassen möchten, finden Sie auf den folgenden Seiten weitere Informationen:
PWAdvent-Kalender (nützlich zu jeder Zeit des Jahres)
Managing content for PWAs
The easiest and most convenient way to make content available to PWAs is the headless approach, enabling the consumption of text, images, videos, and any other assets via API. Headless content management systems (CMSs) provide REST APIs to allow any frontend to fetch content; some also offer GraphQL to query specific content elements. The headless CMS at the heart of the Magnolia DXP, for example, offers a Delivery API, GraphQL, and audience trait parameters for headless personalization.
While many headless CMSs have neglected visual editing, Magnolia also offers a unique WYSIWYG editor that allows non-technical users to design content for PWAs using a GUI with in-line editing, drag-and-drop, and an omnichannel preview that shows content authors exactly how content will be displayed to visitors and users in the final digital experience.
Why not book a demo to learn more about how Magnolia works with PWAs?
