Alles über Progressive Web Apps und deren Implementierung in Drupal 9

Das Internet wurde erstmals in den 1960er Jahren mit dem Ziel entwickelt, Militär und Wissenschaftlern eine bessere Kommunikation zu ermöglichen. Schon bald verwandelte sich das Web in den 1990er Jahren in ein revolutionäres Phänomen und ist seitdem nicht mehr aufzuhalten. Obwohl sich der Zweck des Webs ständig änderte, blieb ein konstanter Zweck die Bequemlichkeit.

Das Bedürfnis nach Bequemlichkeit führte zu vielen innovativen Wegen, um auf das Internet zuzugreifen. Native mobile Apps und Web-Apps sind zwei solcher Technologien, die das Surfen im Internet einfach und bequem gemacht haben. In diesem Artikel sprechen wir über Progressive Web Apps und wie Sie diese mit Drupal mit dem Drupal Progressive Web App Modul implementieren können. Aber bevor wir in all das eintauchen, schauen wir uns die Funktionen von nativen und Web-Apps an und wie progressive Web-Apps die Lücken schließen.

Funktionen nativer mobiler Apps

• Es handelt sich um plattformspezifische Apps. Das bedeutet auch, dass sie für jede neue Plattform (iOS, Android) neu erstellt werden müssen.
• Muss heruntergeladen werden.
• Normalerweise superschnell.
• Reich an Features und Funktionalitäten.
• Kann sich nahtlos in jedes Gerät einfügen und sich wie ein Teil davon anfühlen.
• Kann offline arbeiten.
• Sie können problemlos auf Gerätedaten, Gerätehardware und das lokale Dateisystem zugreifen.
• Teurer zu entwickeln, zu warten und zu aktualisieren.
• Sind aus Sicherheitsgründen vorab genehmigt und können in App-Stores heruntergeladen werden.
• Für Suchmaschinen schwer zu crawlen.

Funktionen von Web-Apps

• Ist nicht plattformabhängig. Sie benötigen lediglich einen Browser, um darauf zuzugreifen. Unterstützt die meisten modernen Browser. Muss nicht heruntergeladen werden.
• Kein spezielles SDK für deren Entwicklung. Das Frontend wird entweder mit HTML, CSS, JavaScript und einem LAMP oder einem MEAN-Stack für das Backend entwickelt.
• Kein Upgrade erforderlich. Geringere Entwicklungs- und Wartungskosten.
• Obwohl eine Authentifizierung erforderlich ist, ist die Sicherheit ein Problem, da sie für unbefugten Zugriff anfällig sein kann.
• Sie funktionieren nicht offline und können langsamer sein als native mobile Apps.
• Sie sind nicht in App Stores aufgeführt, daher kann es schwieriger sein, sie zu finden.

Was sind Progressive Web Apps und wie schließen sie die Lücke?

Kurz gesagt, native Web-Apps sind sehr leistungsfähig, haben aber keine Reichweite. Wohingegen Web-Apps eine größere Reichweite haben, aber keine Funktionen haben. Und hier kommen Progressive Web Apps ins Spiel, um die Lücken zu schließen.

Progressive Web Apps ist eine ideale Kombination der Vorteile von nativen Apps und Web-Apps. Mithilfe moderner Webfunktionen können Progressive Web Apps (PWA) den Benutzern App-ähnliche Erfahrungen bieten. Es kombiniert Funktionen der meisten modernen Browser mit den Vorteilen mobiler Erlebnisse. Sie können native App-ähnliche, extrem komplexe und installierbare Apps erstellen. Da Web Assembly mittlerweile von den meisten Browsern unterstützt wird, können PWAs in Sprachen nach Wahl des Entwicklers erstellt werden, wodurch der Umfang und die Flexibilität der angebotenen Funktionalitäten stark erhöht werden.

Funktionen von Progressive Web Apps

• Sie sind plattform- und geräteunabhängig. Funktioniert wunderbar in jedem Browser.
• Sie laden schnell und sind extrem zuverlässig (auch bei geringer Internetgeschwindigkeit). Das Scrollen ist sehr glatt und flüssig.
• Kann auch offline arbeiten.
• Native App-ähnliche Push-Benachrichtigungen können aktiviert werden.
• Kann auf Gerätehardware und -daten wie native Apps zugreifen.
• Verknüpfungen können auf dem Startbildschirm des Benutzers hinzugefügt werden (anstatt sie herunterzuladen)
• Keine Notwendigkeit für komplexe Installationen. Kann die URLs leicht teilen.
• Responsiv auf allen Geräten.
• Sie sind einfacher und schneller zu entwickeln. Auch die Wartung ist einfach.

Bevor wir über das PWA-Modul in Drupal sprechen, schauen wir uns die Mindestanforderungen zum Erstellen einer PWA an -

• Sollte über HTTPS laufen.
• Sollte einen Service Worker enthalten – Service Worker ist ein Skript (Javascript), das über https im Browser ausgeführt wird und den Browserzugriff ermöglicht. Es bietet native App-ähnliche Funktionen wie Offline-Inhaltsbereitstellung, Push-Benachrichtigungen usw.
• Sollte ein Web-App-Manifest haben – das ist eine JSON-Datei, die Metadaten mit Informationen über die Web-App wie Name, Beschreibung, Autor und mehr enthält. Dies ist auch für die Suchmaschinenoptimierung nützlich.

Das PWA Drupal-Modul – So erstellen Sie progressive Web-Apps mit Drupal 9 (und 8)

Das Drupal PWA-Modul ist einfach zu installieren und wird mit dem Service Worker (für Caching und andere Offline-App-ähnliche Funktionen) und Manifest.js geliefert, die Sie konfigurieren können. Sie müssen jedoch sicherstellen, dass SSL installiert ist, bevor Sie mit dem PWA-Installationsprozess beginnen. Wenn Ihre Anforderung mit unzähligen Anpassungen sehr spezifisch ist, können Sie die PWA mithilfe von Frontend-Frameworks wie Angular oder React entwickeln und Ihren eigenen Service-Worker anpassen.

Installieren des PWA Drupal 9-Moduls

Mit Drupal 7 war die Installation des Progressive Web App Drupal-Moduls so einfach wie das Herunterladen und Aktivieren des Moduls. Sie können die Datei manifest.js über ein Konfigurationsformular generieren und validieren. In Drupal 9 können wir diese Funktionalität jedoch nicht direkt durch Aktivieren des PWA-Moduls integrieren. Der Grund dafür ist, dass Sie keine Option zum Konfigurieren der Datei manfest.js haben.

1. Installieren Sie das Modul, indem Sie das PWA Drupal-Modul herunterladen und aktivieren.

2. Wenden Sie für Drupal 9 diesen Patch an

3. Navigieren Sie anschließend zu Konfiguration -> PROGRESSIVE WEB APP -> PWA-Einstellungen und fügen Sie die erforderlichen Informationen hinzu.

Servicemitarbeiter

Zwischenzuspeichernde URLs – Hier können Sie die Seiten angeben, die auch offline verfügbar gemacht werden sollen. Die hier erwähnten URLs werden zwischengespeichert. Stellen Sie sicher, dass Sie den Cache leeren, wenn Sie hier Aktualisierungen vornehmen.
Auszuschließende URLs – Wenn Sie Seiten haben, die unbedingt nur mit dem Internet funktionieren müssen, erwähnen Sie sie hier.
Offline-Seite – Zeigen Sie Ihren Benutzern eine personalisierte Seite an, wenn sie offline gehen und die Seite nicht zwischengespeichert ist.

Manifest.json

Die Datei Drupal manifest.json ermöglicht es Benutzern, die PWA ihrem Startbildschirm hinzuzufügen. Es enthält Konfigurationen, die Sie ändern können, um das Verhalten Ihrer PWA zu ändern – wie Name, Anzeigename, Hintergrundfarbe, Ausrichtung und mehr.

Die Datei wird dem Head-Tag Ihrer Indexseite hinzugefügt.
<link rel="manifest" href = "/manifest.json">

Das folgende Bild zeigt die Option „Zum Startbildschirm hinzufügen“. Wenn Sie diese Option auswählen, wird ein Symbol auf dem Startbildschirm erstellt.