Progressive Web Apps entwickeln / programmieren – eine ausführliche Anleitung im Jahr 2023

In diesem Blogartikel wird ausführlich erklärt wie Sie progressive Web Apps entwickeln bzw. erstellen können.

Technologische Grundlagen von PWAs

Hier kommt ein kurzer Überblick über die technischen Grundlagen von progressive Web Apps. Der Entwickler muss HTML, CSS und JavaScript beherrschen. Damit die App bei allen Bildschirm bzw. Displaygrößen gut aussieht muss der Entwickler responsive Webdesign umsetzen können. Damit die PWA wie eine App aussieht, benötigt diese ein App-Manifest. Zur Technologie einer PWA gehört auch die Installierbarkeit. Die Offline-Fähigkeit ist eine wichtige technologische Grundlage. Ein Service Worker sorgt dafür, dass die App installierbar ist und auch offline genutzt werden kann. Die Plattformunabhängigkeit, die Fähigkeit auf unterschiedlichen Betriebssystemen eingesetzt werden können ist eine sehr wichtige Technologische Grundlage.

Auffindbarkeit

Leider können PWAs in App Stores nicht gefunden werden. Weder im App Store von Google, Apple oder Microsoft. Es muss dafür gesorgt werden, dass PWAs in Suchmaschinen gefunden werden. Allerdings muss auch erwähnt werden, dass die Stores für ungeübte Nutzer nicht einfach zu verstehen sind. Aber wie kann eine PWA in Suchmaschinen gefunden werden? Die PWA kann bei Suchmaschinen indiziert werden. Sie können einen WordPress-Blogartikel für eine PWA schreiben und diesen für die Suchmaschine indizieren oder Sie erklären in einem YouTube-Video Ihre App und indizieren das Video. Aus meiner Sicht ist es für den Nutzer ein Vorteil, wenn er PWAs in der Suchmaschine suchen und finden kann. Wenn ich als Nutzer vor Endgeräten sitze, suche ich Apps lieber in der Suchmaschine wie in 3 unterschiedlichen App Stores.

Sind progressive Web Apps vollverwertige Apps?

progressive Web Apps, abgekürzt PWAs sind noch immer nicht so richtig in der Gesellschaft angekommen. Oft wird behauptet, dass PWAs eine „echten“ Apps sind. Es gibt Personen die behaupten, dass progressive Web Apps sind mobile Websites. Das ist falsch! Es gibt viele Unterschiede zwischen PWAs und mobile Websites. mobile Websites fehlt zum Beispiel die Installierbarkeit. PWAs besitzen ein umfangreiches, sehr gut durchdachtes Konzept. Viele Entwickler arbeiten sehr fleißig daran, die Möglichkeiten von PWAs stetig zu verbessern. Die Programmiersprache Javascript ist eine vollwertige Programmiersprache die dafür sorgt, dass PWAs nahezu alles können, was native Apps auch können. Es gibt ein paar wenige Fähigkeiten die nativen Apps können und PWAs nicht. Aber in vielen sind PWAs nativen Apps ebenbürtig. Ich möchte mit diesem Artikel versuchen Appentwickler von PWAs zu begeistern, jedoch sage ich auch ganz deutlich, dass native Apps auch toll sind. Auf jeden Fall möchte ich die Personen, welche behaupten, dass PWAs das gleich sind wie mobile Websites, davon überzeugen, dass eine PWA wesentlich mehr kann wie eine mobile Webseite! Die Entwicklung von progressive Web Apps ist kostengünstiger als die Entwicklung von native Apps. Eine PWA kann auf allen Betriebssystemen eingesetzt werden. Alle PWAs die ich programmiert habe können auf allen Endgeräten und Betriebssystemen eingesetzt bzw. installiert werden. Bei der Entwicklung von native Apps muss für jedes Betriebssystem eine eigene App programmiert werden. Eine native App kann nur in einem Betriebssystem installiert werden. Deswegen ist das programmieren von PWAs kostengünstiger.

Entwicklungsumgebung

Um PWAs zu entwickeln empfehle ich als Entwicklungsumgebung, auch IDE genannt, empfehle ich Visual Studio Code. Die Entwicklung von PWAs mit Visual Studio Code ist sehr komfortabel. Die Entwicklung kann optimiert und sogar beschleunigt werden, wenn Sie bestimmte „Extensions“ zu deutsch „Erweiterungen“ installieren. 

Für Entwickler mit Körperbehinderung gibt es ebenfalls eine gute Nachricht: Visual Studio Code. 

Programmiersprachen

Wer progressive Web Apps entwickeln möchte muss HTML, CSS und JavaScript beherrschen. JavaScript ist sehr wichtig, weil mit JavaScript sorgt man dafür, dass Interaktion in die Progressive Web App kommt. Progressive Web Apps werden mit PWA oder PWAs abgekürzt.

Plattformunabhängigkeit

Progressive Web-Apps sind plattformunabhängig. Was ist eine Plattform? Eine Plattform ist ein Betriebssystem. Plattformunabhängig bedeutet progressive Web-Apps können in allen Betriebssystemen installiert und ausgeführt werden. Die progressive Web Apps die ich entwickle teste ich in folgenden Betriebssystemen:

• Windows
• Ubuntu
• MacOS
• Android
• IOS

Ebenso können diese Apps auf allen Endgeräten (Computer, Laptop, Smartphones, Iphones, Ipad und Tablets) aufgerufen oder installiert werden. Die Plattformunabhängigkeit ist ein großer Grund warum ich von Web-Apps so begeistert bin. 

In welchem Browser werden PWAs ausgeführt bzw. installiert?

In den Betriebssystemen Windows, Ubuntu, Android und MacOS werden PWAs im Browser Google Chrome aufgerufen oder installiert. Im Betriebssystem IOS ist es der Browser Safari. Werden PWAs im Browser aufgerufen, benötigen sie keinen Speicherplatz auf einem Endgerät.

Web Manifest

Das Web Manifest ist eine Textdatei im JSON-Format. Das Web Manifest legt das Aussehen der PWA fest. So kann ein Web Manifest aussehen:

{
  "lang": "de-DE",	
  "name": "Marlems Türme von Hanoi",
  "short_name": "Marlems Türme von Hanoi",
  "description": "Das Computerspiel Türme von Hanoi barrierefrei",
  "background_color": "#00ccff",
  "theme_color": "#00ccff",
  "display": "standalone",
  "orientation": "any",
  "scope": "/",
  "start_url": ".",
  "icons": [{
        "src": "tuermevonhanoi200.png",
        "type": "image/png",
        "sizes": "200x200",
        "purpose": "any maskable"},
        {
         "src": "tuermevonhanoi512.png",
         "type": "image/png",
         "sizes": "512x512",
         "purpose": "any maskable"}]
}

Das gegebene Webmanifest ist eine JSON-Datei, die Informationen über eine Webanwendung enthält. Es wird verwendet, um die Webanwendung zu beschreiben und einige Einstellungen zu definieren. Hier sind die Erklärungen zu den Einträgen im Webmanifest.

lang

„de-DE“`: Gibt die Sprache der Webanwendung an. Hier ist es Deutsch (Deutschland).

name

„Marlems Türme von Hanoi“`: Der Name der Webanwendung, in diesem Fall „Marlems Türme von Hanoi“.

short_name

„Marlems Türme von Hanoi“`: Eine sogenannter Kurzname der Webanwendung. In diesem Fall ist es gleich dem Namen.

description

„Das Computerspiel Türme von Hanoi barrierefrei“`: Eine Beschreibung der Webanwendung. Hier wird angegeben, dass es sich um das Computerspiel „Türme von Hanoi“ handelt und dass es barrierefrei ist.

background_color

„#00ccff“`: Die Hintergrundfarbe der Webanwendung. Hier ist es eine Farbe im Hexadezimalformat (#00ccff), die ein helles Blau darstellt.

theme_color

„#00ccff“`: Die Farbe des Themes der Webanwendung. Hier ist es ebenfalls die gleiche Farbe wie die Hintergrundfarbe.

display

„standalone“`: Gibt an, wie die Webanwendung auf dem Gerät dargestellt werden soll. Hier ist „standalone“ angegeben, was bedeutet, dass die Anwendung eigenständig, also ohne Browser-UI, angezeigt werden soll. Folgende Einträge kann es für display geben: Gerne! Neben dem Eintrag `“display“: „standalone“`, den wir bereits besprochen haben, gibt es noch weitere mögliche Werte für den Eintrag `“display“` im Webmanifest. Hier sind die häufigsten:

• `“fullscreen“`: Die Webanwendung wird im Vollbildmodus angezeigt und verdeckt die gesamte Oberfläche des Browsers oder Geräts.
• `“standalone“`: Die Webanwendung wird im eigenständigen Modus angezeigt, ohne Browser-UI wie Adressleiste oder Navigationsknöpfe.
• `“minimal-ui“`: Die Webanwendung wird ähnlich wie „standalone“ dargestellt, jedoch mit minimalen Benutzeroberflächenelementen wie der Adressleiste, die beim Scrollen ausgeblendet werden.
• `“browser“`: Die PWA wird im normalen Browserfenster geöffnet, ohne den eigenständigen Modus oder Vollbildmodus zu aktivieren.
• `“minimal-ui | fullscreen | standalone | browser“`: Ein kombinierter Wert, der anzeigt, dass die Webanwendung flexibel ist und je nach den Einstellungen und Vorlieben des Benutzers in einem der angegebenen Modi geöffnet wird.

Die Wahl des richtigen „display“-Werts hängt von der Art der PWA und der beabsichtigten Benutzererfahrung ab. Eine PWA kann mehrere Display-Modi unterstützen, um sich verschiedenen Geräten und Nutzungsszenarien anzupassen. Beachte, dass nicht alle Browser alle Display-Modi unterstützen. Die Unterstützung kann je nach Browser und Gerät variieren.

orientation

`“orientation“: „any“`: Definiert die sogenannte Ausrichtung der PWA. Hier ist „any“ angegeben, was bedeutet, dass die Ausrichtung frei ist und die Anwendung in jeder Orientierung genutzt werden kann. Für orientation kann es folgende Einträge geben:

• `“any“`: Die PWA kann in jeder Ausrichtung verwendet werden. Dies ist die flexibelste Option.
• `“natural“`: Die PWA wird in ihrer natürlichen Ausrichtung angezeigt, die vom Gerät bestimmt wird.
• `“landscape“`: Die PWA wird nur im Querformat (Landscape-Modus) unterstützt.
• `“portrait“`: Die PWA wird nur im Hochformat (Portrait-Modus) unterstützt.
• `“portrait-primary“`: Die App wird im Hochformat angezeigt, wobei die primäre Ausrichtung des Geräts berücksichtigt wird.
• `“portrait-secondary“`: Die App wird im Hochformat angezeigt, wobei die sekundäre Ausrichtung des Geräts berücksichtigt wird.
• `“landscape-primary“`: Die App wird im Querformat angezeigt, wobei die primäre Ausrichtung des Geräts berücksichtigt wird.
• `“landscape-secondary“`: Die App wird im Querformat angezeigt, wobei die sekundäre Ausrichtung des Geräts berücksichtigt wird.

Die Verwendung des „orientation“-Eintrags ermöglicht es, die bevorzugte Ausrichtung der App anzugeben und sicherzustellen, dass sie entsprechend angezeigt wird. Beachten Sie bitte, dass dieser Eintrag keine absolute Einschränkung für die Ausrichtung darstellt, sondern lediglich eine Empfehlung. Somit kann die tatsächliche Ausrichtung durch die Geräteeinstellungen und die Benutzervorlieben beeinflusst werden.

scope

Die URL-Scope der App. Hier ist es „/“ angegeben, was bedeutet, dass die App im Hauptverzeichnis der Website verfügbar ist.

start_url

„.“`: Die Start-URL der App. Hier ist „.“ angegeben, was bedeutet, dass die Anwendung von der Root-Domain aus gestartet wird.

icons

`“icons“: […]`: Eine Liste von Icons, die für die App verwendet werden können. Hier sind zwei Icons angegeben, eins mit der Größe 200×200 und eins mit der Größe 512×512, beide im PNG-Format. Die „purpose“ (Zweck) Eigenschaft ist auf „any maskable“ gesetzt, was bedeutet, dass die Icons auf verschiedene Weisen maskiert werden können, um sie an das Design des Geräts anzupassen.

Mein Web Manifest bekommt immer den Dateinamen „manifest.webmanifest“ .Das Web Manifest muss in der HTML-Datei „index.html“ verlinkt werden. Damit Ihre progressive Web-Apps nachdem installieren richtig gut aussieht ist es wichtig, dass Sie das Web Manifest sorgfältig ausfüllen. Das kann wie folgt umgesetzt werden im head-bereich:

<head>
<link rel="manifest" href="https://www.tuerme-von-hanoi.de/manifest.webmanifest"/>
</head>

In diesem Video erkläre ich wie Sie ein Web Manifest erstellen:

App-Like Aussehen

Progressive Web Apps sollen wie native Apps aussehen. Damit das klappt, müssen Sie folgendes beachten:

Damit die progressive Web App immer die Schrift des jeweiligen Betriebssystems verwendet kann in der CSS-Datei die Schrift wie folgt angegeben werden: font-family: -apple-system, BlinkMacSystemFont, „Segoe UI“, Helvetica, Arial, sans-serif, „Apple Color Emoij“, „Segoe UI Emoji“, „Segoe UI Symbol“; Damit die App-Oberfläche von der Darstellung native aussieht verwendete ich bei Display den Eintrag standalone . „display“: „standalone“, In Sachen Farbgestaltung können die Farben von Material Design verwenden: Material Design .

Somit ist es möglich, dass PWAs genauso gut aussehen wie native Apps. 

In diesem Video erkläre ich AppLike-Aussehen:

App-Icon

Web-apps benötigen 5 App-Icons. Das Bildformat muss .png sein. Die App-Icons benötigen folgende Größen:

• 120×120
• 152×152
• 180×180
• 200×200
• 512×512

In folgendem Video erkläre ich alles wissenswerte über das Thema App-Icon:

Service Worker erstellen

Eine progressive Web App auf allen Betriebssystemen installiert werden kann und auch ohne Interverbindung nutzbar ist benötigt eine progressive Web App einen Service Worker. Damit der Service-Worker erstellt werden kann müssen Sie die Google Workbox installieren. Damit Sie die Google Workbox installieren können Node.js installiert sein. Node.js kann von dieser Webseite heruntergeladen werden: https://nodejs.org/en Die Installation kann eine Weile dauern ist aber sehr einfach. Nachdem Sie Node.js installiert haben, können Sie die Google Workbox installieren. Um die Google Workbox zu installieren öffnen Sie die Eingabeaufforderung. Wechseln Sie in das Verzeichnis in dem sich ihre progressive Web App befindet. Mit folgendem Kommando starten Sie die Google Workbox: workbox wizard folgende Fragen müssen beantwortet werden:

? What is the root of your web app (i.e. which directory do you deploy)? Manually enter path
? Please enter the path to the root of your web app: .
? Which file types would you like to precache? css, svg, html, js, wav
? Where would you like your service worker file to be saved? sw.js
? Where would you like to save these configuration options? workbox-config.js
? Does your web app manifest include search parameter(s) in the ’start_url‘, other than ‚utm_‘ or ‚fbclid‘ (like ‚?source=pwa‘)? No 

Geben Sie jetzt folgendes Kommando ein und drücken danach die Tasten Enter:

workbox generateSW workbox-config.js 

Bei mir wurden jetzt diese 5 Dateien erstellt:

• sw.js
• sw.js.map
• workbox-6abf7752.js
• workbox-6abf7752.js.map
• workbox-config.js

Bei Ihnen können die Dateien zum Teil anders heißen, aber es werden 5 Dateien erstellt. Damit der Service Worker installiert werden kann, muss in der index.html-Datei folgender Javascript-Code eingefügt werden:

Diese 5 Dateien für den Service Worker und index.html-Datei müssen Sie per FTP in das Verzeichnis hochladen in dem sich die HTML, CSS und Javascript-Dateien Ihrer progressive Web App befinden. Um überprüfen zu können ob der Service Worker funktioniert öffnen Sie den Browser Google Chrome. Klicken Sie rechts oben auf die 3 senkrechten Punkte. Wählen Sie das Menü „Weitere Tools“, „Entwicklertools“. Suchen Sie oben im Menü den Menüpunkt „App“. Wählen Sie auf der linken Seite den Eintrag „Service Workers“. Falls Sie zunächst mal keine Daten sehen, drücken Sie die Taste F5 für Aktualisieren oder klicken Sie mit der Computermaus auf das Symbol „Diese Seite neu laden“. Jetzt sollten Sie die Daten des Service Workers sehen.

In diesem Video erkläre ich wie Sie einen Service Worker erstellen:

Offline-Fähigkeit

Progressive Web Apps sind offline fähig. Was heißt das? Sie können PWAs nutzen auch wenn Ihr Endgerät keine Verbindung zum Internet hat. Wie funktioniert das? Wenn Sie eine PWA zum ersten Mal starten und Ihr Endgerät hat Verbindung zum Internet, dann sorgt der Service Worker dafür, dass alle Dateien die zur Ausführung der App benötigt werden in den Browser-Cache geladen werden. Von diesem Moment an ist die App nutzbar, auch wenn Ihr Endgerät keine Verbindung zum Internet hat. Wenn Ihr Endgerät offline ist, kann eine progressive Web App trotzdem genutzt werden.

Progressive Web Apps validieren

Nachdem Programmieren ist es wichtig zu überprüfen ob Sie alles richtig gemacht haben. Das überprüfen von progressive Web-Apps heißt im Fachchinesisch validieren. Progressive Web-Apps können Sie mit dem Tool Google Lighthouse durchführen. Geben Sie zuerst die Webadresse Ihrer progressive Web App ein. Klicken Sie auf die 3 Punkte rechts oben im Browser. Wählen Sie das Menü „Weitere Tools“, dann auf „Entwicklertools“. Wählen Sie oben im Menü „>>“, dann „Lighthouse“. Wählen Sie links bei Modus „Navigation (Standard)“. Klicken Sie unten alle „Kategorien“ an. Wählen Sie rechts bei „Gerät“, „Mobil“. Klicken Sie jetzt auf den Schalter „Seitenaufbau analysieren“. Wenn Sie in allen Kategorie Kreisen die Zahl 100 sehen und bei PWA ein +, dann haben Sie alles richtig gemacht und Ihre App ist fehlerfrei.

In diesem Video erkläre ich wie Sie progressive Web Apps validieren können:

Barrierefreiheit

Das es in diesem Artikel um das erstellen von progressive Web Apps geht, behandel ich das Thema Barrierefreiheit sehr kurz. Für Menschen mit Behinderungen und Senioren ist es wichtig, dass PWAs barrierefrei sind. Folgende barrierefreie Kriterien sollten ihre PWAs erfüllen:

• Screenreadertauglichkeit
• Skalierbare Schriftgröße
• Tastaturbedienbarkeit
• Deutliche Hervorhebung des Tastaturfokus
• Barrierefreier Farbkontrast
• Eine Mindestgröße für Bedienelemente für Menschen mit motorischen Einschränkungen

User Experience

User Experience ist ein sehr komplexes Thema. Ich werde mich benühen in diesem Artikel User Experience kurz und einfach zu erklären. Das Konzept der User Experience bei Web-Apps umfasst die gesamte Wahrnehmung und die Erfahrung, die ein User beim Nutzen einer PWA macht. Dazu zählen etwa die Navigation, die Responsivität und die Reaktivität. Um es mal ohne Fachchinesisch auszudrücken: Web Apps haben eine gute User Experience, wenn der User sehr schnell lernen kann wie Web Apps bedient werden und ihm die Bedienung von Web Apps Spaß macht.

Schlussbemerkung

Progressive Web Apps sind eine coole alternative zu native Apps. Ich hoffe ich kann mit diesem Artikel einen einfachen Einstieg geben um progressive Web Apps zu entwickeln bzw. zu erstellen.

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .