Progressive Web Apps barrierefrei entwickeln – Anleitung 2024

In diesem Blogartikel werden die Grundlagen erklärt, wie Sie progressive Web Apps entwickeln können.

Was sind Apps?

Apps sind Programme oder Anwendungen, die auf mobilen Geräten wie Smartphones oder Tablets installiert werden können. Apps dienen dazu, bestimmte Aufgaben zu erledigen, Informationen abzurufen oder Unterhaltung zu bieten. Man kann Apps aus dem entsprechenden App-Store herunterladen und auf seinem Gerät nutzen.

Was sind native Apps?

Native Apps sind spezielle Programme, die direkt für ein bestimmtes Betriebssystem wie Android oder iOS entwickelt wurden. Das bedeutet, sie sind genau auf die Funktionen und Eigenschaften des jeweiligen Systems zugeschnitten. Diese Apps werden über die App-Stores (Google Play Store oder Apple App Store) heruntergeladen und installiert. Native Apps können die Hardware und Software des Geräts optimal nutzen, wie die Kamera, GPS oder Push-Benachrichtigungen, wodurch sie in der Regel schnell und zuverlässig sind.

Einführung in progressive Web Apps (PWAs)

Eine progressive Web-App wird mit HTML, CSS und JavaScript programmiert. Sie ist eine Webseite, die sich wie eine App anfühlt. Sie funktioniert ähnlich wie eine normale App auf einem Smartphone oder Tablet, aber sie muss nicht aus einem App-Store installiert werden. Die App kann über einen Webbrowser aufgerufen werden. Progressive Web-Apps können auch offline genutzt werden und bieten eine schnellere Ladezeit. Progressive Web App wird abgekürzt mit PWA.

Für Anwender, im englischen User, ist die Nutzung eine progressive Web-Apps sehr einfach.

HTML, CSS und JavaScript – Was ist das?

HTML, CSS und JavaScript sind alle Programmiersprachen, die für die Entwicklung von PWAs verwendet werden. HTML (Hypertext Markup Language) wird verwendet, um die Struktur und den Inhalt einer Webseite zu definieren. Es wird verwendet, um Texte, Bilder, Links und andere Elemente auf einer Webseite anzuzeigen. CSS (Cascading Style Sheets) wird verwendet, um das Aussehen und das Layout einer Webseite zu gestalten. Mit CSS können Entwickler Schriftarten, Farben, Abstände und andere visuelle Eigenschaften einer Webseite festlegen. JavaScript wird verwendet, um interaktive Elemente einer Webseite zu erstellen. Mit JavaScript können Benutzeraktionen wie Klicks, Überfahren mit der Maus und Eingaben in Formularen verarbeitet werden, um dynamische und reaktionsschnelle Webseiten zu erstellen.

Vergleich zwischen Native Apps und progressive Web Apps

In diesem Abschnitt mache ich einen Vergleich zwischen native Apps und PWAs in Form einer Tabelle:

Merkmal	PWA	Native App
Plattformunabhängigkeit	Funktioniert auf allen Geräten mit Webbrowser	Nicht plattformunabhängig
Installation	Über den Webbrowser, kein App-Store nötig	Über App-Stores (Google Play Store, Apple App Store)
Zugriff auf Gerätedaten	Begrenzter Zugriff (GPS, Kamera, etc.)	Voller Zugriff auf alle Gerätefunktionen
Offline-Funktionalität	Ja, funktioniert auch offline	Ja, funktioniert auch offline
Update-Mechanismus	Automatische Updates im Hintergrund	Manuelle Updates über den App-Store
Entwicklungskosten	Niedrig, da eine einzige Codebasis	Höher, da separate Versionen für iOS und Android benötigt werden
Leistung	Gut, aber tendenziell etwas langsamer als native Apps	Hervorragend, optimiert für die jeweilige Plattform

Responsive Webdesign

Responsive Webdesign bezieht sich darauf, dass eine Webseite so gestaltet ist, dass sie sich automatisch an verschiedene Bildschirmgrößen und Geräte anpasst, um eine optimale Benutzererfahrung zu gewährleisten. Bei PWAs  ist Responsive Webdesign besonders wichtig, da diese Apps auf unterschiedlichen Geräten und Bildschirmgrößen funktionieren müssen. Durch Responsive Webdesign wird sichergestellt, dass die App auf jedem Gerät richtig dargestellt wird und die Nutzer eine konsistente und benutzerfreundliche Erfahrung haben, unabhängig vom genutzten Endgerät. Das Responsive Webdesign wird mit CSS umgesetzt.

Eine progressive Web-App ist in jedem Betriebssystem installierbar

Progressive Web-Apps können auf jedem Betriebssystem installiert werden, da sie unabhängig von einem bestimmten Store sind. Dadurch entfällt der Zwischenschritt des Downloads aus einem App-Store und die Nutzer können direkt auf die App zugreifen. Dies macht PWAs besonders benutzerfreundlich und einfach zu handhaben. Eine PWA kann auf folgenden Betriebssystemen installiert werden:

• Android
• iOS (ab Version 11.3)
• Windows
• Mac OS
• Linux

Das Unternehmen Google hat auch einen Browser entwickelt, er heißt “Chrome”. Der Browser Google Chrome kann in allen Betriebssystemen installiert werden. Browser Chrome ist der beste Browser wenn es darum geht PWAs auszuführen oder zu installieren.

Progressive Web-Apps können im Browser ausgeführt werden

Ein Browser ist ein Programm, das es ermöglicht, im Internet zu surfen und Webseiten anzuzeigen. Man gibt eine Webadresse ein und der Browser lädt die Seite, die dann auf dem Bildschirm angezeigt wird. Man kann im Browser auch Links anklicken, um auf andere Webseiten zu gelangen. Es gibt verschiedene Browser wie z.B. Google Chrome, Mozilla Firefox oder Safari.

Progressive Web-Apps können installiert werden, müssen aber nicht installiert. Progressive Web-Apps können auch im Browser ausgeführt. Dazu geben Sie die Webadresse der PWA in den Browser ein und drücken die Taste “Enter”. Jetzt kann die Web-App aufgeführt bzw. genutzt werden.

Der Service Worker: Ein unverzichtbarer Helfer für progressive Web Apps

Ein Service Worker, auf deutsch „Hintergrunddienst“ ist ein JavaScript-Skript, das im Hintergrund eines Webbrowsers läuft, getrennt von der eigentlichen Webseite. Seine Hauptaufgabe besteht darin, bestimmte Funktionen zu ermöglichen, wie zum Beispiel:

Offline-Fähigkeit: Ein Service Worker kann Inhalte der Webseite zwischenspeichern (cachen). Das bedeutet, dass Nutzer auch ohne Internetverbindung auf Teile der Webseite zugreifen können.

Hintergrundsynchronisierung: Er kann Aufgaben im Hintergrund ausführen, wie das Synchronisieren von Daten, selbst wenn die Webseite gerade nicht aktiv ist.

Push-Benachrichtigungen: Ein Service Worker kann Push-Benachrichtigungen empfangen und anzeigen, auch wenn die Webseite nicht geöffnet ist.

Wie funktioniert ein Service Worker?

Registrierung: Zuerst muss der „Hintergrunddienst“ von der Webseite registriert werden. Dies geschieht in einem JavaScript-Code auf der Webseite. Wenn ein Nutzer die Webseite besucht, überprüft der Browser, ob ein Service Worker vorhanden ist, und registriert ihn gegebenenfalls.

Installation und Aktivierung: Nach der Registrierung wird der Service Worker installiert. Während dieser Phase kann er Ressourcen (z.B. HTML, CSS, JavaScript-Dateien) cachen. Nach der Installation wird er aktiviert und beginnt, Netzwerkanfragen der Webseite zu überwachen.

Interzeptoren: Sobald der Service Worker aktiviert ist, kann er Netzwerkanfragen abfangen. Wenn die Webseite eine Ressource anfordert (z.B. ein Bild oder eine Seite), kann der „Hintergrunddienst“ entscheiden, ob er diese Anfrage aus dem Cache bedient (offline), aus dem Netzwerk holt oder eine Kombination aus beidem verwendet.

Service Worker erstellen

Eine progressive Web Application auf allen Betriebssystemen installiert werden kann und auch ohne Interverbindung nutzbar ist benötigt eine progressive Web Applikation 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:

if ('serviceWorker' in navigator) 
{ navigator.serviceWorker.register('sw.js').then(function(reg) 
{ Registrierung erfolgreich console.log('Registrierung erfolgreich.'); }).catch(function(error) 
//Wenn was schief gelaufen ist
{ Registrierung fehlgeschlagen console.log('Registrierung fehlgeschlagen mit ' + error); }); };

Was ist ein Web App Manifest?

Das Web App Manifest ist eine JSON-Datei, die in einer Progressive Web App verwendet wird, um der Anwendung verschiedene Eigenschaften zu geben. Es enthält grundlegende Informationen und Einstellungen, die dem Browser helfen, die PWA auf dem Gerät des Benutzers wie eine native App zu behandeln.

Was steht in einem Web App Manifest?

Die Datei ist im JSON-Format und enthält verschiedene Felder, die folgende Informationen definieren können:

name: Der vollständige Name der App, der beispielsweise im App-Launcher angezeigt wird.

short_name: Eine kürzere Version des Namens, die auf dem Startbildschirm verwendet wird.

Icons: Eine Liste von Icons in verschiedenen Größen, die die App repräsentieren. Diese Icons werden verwendet, wenn die App auf dem Startbildschirm oder in anderen Kontexten angezeigt wird.

start_url: Die URL, die geladen wird, wenn die App gestartet wird. Dies ist normalerweise die Startseite der PWA.

display: Bestimmt, wie die App angezeigt wird. Es gibt verschiedene Modi wie „fullscreen“ (Vollbild), „standalone“ (wie eine native App, ohne Browser-UI), „minimal-ui“ (mit minimaler Browser-UI) und „browser“ (wie eine normale Webseite).

theme_color: Die Farbe der Benutzeroberfläche der App, wie die Statusleiste.

background_color: Die Farbe des Hintergrunds, die beim Starten der App angezeigt wird.

orientation: Gibt die bevorzugte Bildschirmorientierung der App an, z.B. „portrait“ (Hochformat) oder „landscape“ (Querformat).

Hier ein Beispiel für ein Manifest:

{ "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"}]}

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

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

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:

Offline-Fähigkeit

“Offline-fähig” bedeutet, dass eine Progressive Web App auch ohne Internetverbindung verwendet werden kann. Das heißt, man kann die App nutzen, selbst wenn das Smartphone, Iphone, Tablet oder Ipad gerade keine Verbindung zum Internet hat.

Ein Beispiel: Stellen Sie sich vor, Sie machen eine längere Zugreise, zum Beispiel von Stuttgart nach Hamburg. Während der Fahrt verwenden Sie eine PWA. Der Zug fährt durch ein Gebiet, in dem Sie mit Ihrem Handy keinen Internetzugang haben. In dieser Situation können Sie Ihre PWA trotzdem nutzen, weil sie auch ohne Internetverbindung funktioniert.

In diesem Video erkläre ich die Offline-Fähigkeit:

Push-Benachrichtigungen

Push-Benachrichtigungen sind automatische Nachrichten, die von einer Progressive Web App an den Nutzer gesendet werden. Sie erscheinen auf dem Bildschirm des Geräts, auch wenn die App gerade nicht geöffnet ist. Mit diesen Benachrichtigungen können Nutzer über neue Inhalte, Angebote oder wichtige Informationen informiert werden.

Plattformunabhängigkeit

Ein progressive Web App ist plattformunabhängig. Das bedeutet, dass die Progressive Web App auf verschiedenen Geräten und Betriebssystemen funktioniert, ohne dass der App-Code speziell angepasst werden muss. Das heißt, sie läuft sowohl auf Android, iOS, Windows oder anderen Systemen. Dies sorgt für eine bessere Benutzerfreundlichkeit und eine größere Reichweite der Anwendung.

Die Plattformunabhängigkeit von progressiven Web-Apps ist für mich, Markus Lemcke, ein absolutes Highlight! Dank dieser Eigenschaft kann ich meine barrierefreien progressiven Web-Apps sowohl auf meinem Laptop mit Windows-Betriebssystem als auch auf meinem Smartphone mit Android-Betriebssystem nutzen.

Überprüfung von Progressive Web Apps

Nachdem Sie Ihre Progressive Web App programmiert haben, sollten Sie überprüfen, ob alles korrekt funktioniert. Diese Überprüfung wird „validieren“ genannt. Dafür können Sie das Tool Google Lighthouse verwenden.

Google Lighthouse überprüft eine progressive Web App nach folgenden Kriterien bzw. Kategorien:

• Leistung
• Barrierefreiheit
• Best Practices
• SEO
• PWA

Hier eine Anleitung:

1. Geben Sie die Webadresse Ihrer Progressive Web App ein.
2. Klicken Sie oben rechts im Browser auf die drei Punkte.
3. Wählen Sie „Weitere Tools“ und dann „Entwicklertools“.
4. Klicken Sie oben im Menü auf „>>“ und dann auf „Lighthouse“.
5. Wählen Sie links bei Modus „Navigation (Standard)“.
6. Aktivieren Sie unten alle „Kategorien“.
7. Wählen Sie rechts bei „Gerät“ die Option „Mobil“.
8. Klicken Sie auf den Schalter „Seitenaufbau analysieren“.

Wenn in allen Kategorien die Zahl 100 und bei PWA ein + angezeigt wird, 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

Da es in diesem Artikel um die Grundlagen geht wie man eine progressive Web App erstellt bzw. programmiert, behandele ich das Thema Barrierefreiheit sehr kurz. Für Menschen mit Behinderungen und Senioren ist es wichtig, dass PWAs barrierefrei sind.

Für die Umsetzung der Barrierefreiheit nutze ich folgende Richtlinien:

• Web Content Accessibility Guidelines (WCAG) 2.2
• Richtlinie EN 301 549

Folgende barrierefreie Kriterien sollten ihre PWAs erfüllen:

Screenreadertauglichkeit

Ein Screenreader ist eine Funktion, die blinden Menschen vorliest, was auf dem Bildschirm angezeigt wird. Die Screenreadertauglichkeit einer App bedeutet, dass die Oberfläche der App so gestaltet wurde, dass der Screenreader die blinden Nutzer darüber informieren kann, wie die App aussieht.

Tastaturbedienbarkeit

Eine progressive Web-App kann auch auf einem Laptop oder Computer genutzt werden. Für blinde Menschen ist es wichtig, dass die gesamte App ohne Maus, sondern nur mit der Tastatur bedienbar ist.

Deutliche Hervorhebung des Tastaturfokus

Wenn Menschen mit einer Sehbehinderung eine progressive Web-App auf einem Laptop oder Computer mit der Tastatur bedienen, ist es wichtig, dass deutlich erkennbar ist, welches Element gerade aktiv ist, wie z.B. ein Eingabefeld oder Schalter.

Skalierbare Schriftgröße

Für Menschen mit einer Sehbehinderung ist es wichtig, dass die Schriftgröße skalierbar, einfach ausgedrückt anpassbar ist. Deswegen muss beim Programmieren mit CSS darauf geachtet werden, dass die Schriftgröße in relative Einheiten wie %, em oder rem angegeben wird.

Barrierefreier Farbkontrast

Ein barrierefreier Farbkontrast zwischen Schrift- und Hintergrundfarbe ist wichtig, damit Menschen mit Sehbehinderungen oder Farbsehschwächen den Text problemlos lesen können. Der Farbkontrast kann mit der kostenlosen Software Colour Contrast Analyzer (CCA) .

Eine Mindestgröße für Bedienelemente für Menschen mit motorischen Einschränkungen

Menschen mit eingeschränkter Handmotorik brauchen größere Schaltflächen, da sie ihre Hände nicht präzise bewegen können. In meinen progressiven Web Apps bekommen Eingabefelder und Schaltflächen die Höhe 3.5 rem. Dies ist die Umrechnung der Angabe des Prüfschritts „Criterion 2.5.8 Target Size (Minimum)“ in der WCAG 2.2 .

Schlussbemerkung

Barrierefreie progressive Web Apps programmieren ist eine tolle Sache und ich hoffe, dass diese Anleitung dazu führt, dass in Zukunft viele barrierefreie prpgressive Web Apps programmiert werden.

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 .