PWA – Progressive Web Apps verstehen

Eine Progressive Web App (PWA) ist eine App, die Funktionen sowohl einer Web-App als auch einer nativen App in einer einzigen Anwendung vereint. Es verfügt über die Funktionen einer nativen App und gleichzeitig über die Reichweite einer Web-App. Eine PWA sieht aus wie jede andere App, d. h. sie verfügt über ein Symbol auf dem Startbildschirm, im App-Launcher oder im Startmenü, wird in einem eigenständigen Fenster geöffnet und funktioniert offline. Die Installation kann entweder über einen Browser oder über den App Store erfolgen.

Progressive Web Apps (PWAs) sind Web-Apps, die mit modernen APIs erstellt und erweitert werden, um verbesserte Funktionen, Zuverlässigkeit und Installierbarkeit zu bieten und gleichzeitig jeden überall und auf jedem Gerät mit einer einzigen Codebasis zu erreichen.

Funktionen der Web-App in PWA :

• Verknüpfbarkeit
• Standardmäßig zugänglich
• Allgegenwärtig
• Einfach bereitzustellen
• Einfach zu aktualisieren
• Jeder kann veröffentlichen

• Offlinefähig
• Hochleistung
• Geräteintegration
• Eigenständiges Erlebnis
• Installiertes Symbol
• Reich und zuverlässig

Alle PWAs sind im Kern Websites, daher müssen sie über eine solide Grundlage in Responsive Design, Mobile und allem voran, intrinsischem Design und Web-Performance verfügen.

Sich anpassendes Design

Responsive Webdesign ist ein Designansatz, der dafür sorgt, dass Websites auf allen Bildschirmgrößen und Auflösungen dargestellt werden und so ein gutes Benutzererlebnis für alle gewährleistet wird.

Responsive Webdesign umfasst drei technische Komponenten:

1. Fluidgitter
2. Flexible Medien
3. Medien-Anfragen

Beim Design für die Flexibilität des Webs muss alles berücksichtigt werden: Mobile First, Content First und Offline First. Der Mobile-First-Ansatz zwingt Sie dazu, sich bei jeder Ansicht der Website nur auf die wesentliche Aufgabe zu konzentrieren, die ein Benutzer dort erledigen möchte, und die unnötigen Dinge zu ignorieren. Nach dem „Content First“-Prinzip liegt unser Hauptaugenmerk auf dem Inhalt.

Intrinsisches Design

• Mobil als fokussierende Einschränkung für die Benutzererfahrung.
• Betonung von Inhalten und Kernfunktionen im Designprozess.
• Schrittweise Erweiterung mit erweiterten Funktionen, sofern verfügbar.

Sie können das Layout wirklich an den Inhalt anpassen, den wir haben, und an das Design, das wir erstellen möchten.

- Jen Simmons

Dies ermöglicht es Designern, eine gewisse Kontrolle über das Layout zurückzugewinnen, allerdings auf eine Weise, die den neuesten Webdesign-Prinzipien entspricht. Sie können Ihr Design so umsetzen, dass es mit dem Inhalt interagiert, ohne dass Sie die Platzierung jedes einzelnen Pixels kontrollieren müssen. Bei der Kontrolle im Web geht es darum, die Regeln zu schreiben, die ein Browser verwendet, um Ihr Erlebnis zusammenzustellen und es für jeden Benutzer in Ihrer PWA einzigartig zu gestalten.

Webleistung

Web-Performance-Metriken messen heute, wie schnell Ihr erster Inhalt auf dem Bildschirm erscheint, wie interaktiv Ihre Website ist und wie Benutzer das Erlebnis wahrnehmen.

Web Vitals konzentrieren sich auf drei Schlüsselbereiche, die die Leistung und Wahrnehmung des Webs beeinflussen:

• Wird geladen
• Interaktiv
• Visuelle Stabilität

• Sicher: Eine sichere Verbindung (HTTPS) über die Website sorgt dafür, dass der Datenverkehr genauso sicher ist wie in einer nativen App. Ein sicherer Endpunkt ermöglicht es dem Servicemitarbeiter auch, im Namen der App sicher Maßnahmen zu ergreifen.
• Standardmanifest: Das Web-App-Manifest ist eine JSON-Datei, die definiert, wie die PWA als installierte Anwendung behandelt werden soll, einschließlich des Erscheinungsbilds und des grundlegenden Verhaltens innerhalb des Betriebssystems.
• Netzwerkunabhängig: Die App sollte unabhängig vom Netzwerk arbeiten können, dh sie sollte auch im Offline-Modus funktionieren können, wenn kein Netzwerk vorhanden ist.
• Reaktionsfähigkeit: Die Website sollte für verschiedene Bildschirme und Geräte reagieren.
• Browserübergreifend: Die Website sollte nahtlos auf mehreren Browsern funktionieren.
• Deep Linking: Jede Seite der Website sollte eine eindeutige URL haben.

Kern-PWA-Checkliste

Die Kern-PWA-Checkliste beschreibt, was eine App für alle Benutzer installierbar und nutzbar macht, unabhängig von Größe oder Eingabetyp.

• Fängt schnell an, bleibt schnell: Leistung spielt eine wichtige Rolle für den Erfolg jedes Online-Erlebnisses, da leistungsstarke Websites Benutzer besser ansprechen und binden als Websites mit schlechter Leistung. Websites sollten sich auf die Optimierung für benutzerzentrierte Leistungsmetriken konzentrieren.
• Funktioniert in jedem Browser: Benutzer können mit jedem beliebigen Browser auf Ihre Web-App zugreifen, bevor diese installiert wird.
• Reagiert auf jede Bildschirmgröße: Benutzer können Ihre PWA auf jeder Bildschirmgröße verwenden und der gesamte Inhalt ist in jeder Darstellungsgröße verfügbar.
• Bietet eine benutzerdefinierte Offline-Seite: Wenn Benutzer offline sind, sorgt die Beibehaltung ihrer PWA für ein nahtloseres Erlebnis, als zur Standard-Offline-Seite des Browsers zurückzukehren.
• Ist installierbar: Benutzer, die Apps auf ihren Geräten installieren oder hinzufügen, tendieren dazu, sich häufiger mit diesen Apps zu beschäftigen.

Bei der optimalen PWA-Checkliste geht es darum, Ihrer PWA das Gefühl zu geben, dass sie Teil des Geräts ist, auf dem sie läuft, und gleichzeitig die Vorteile zu nutzen, die das Web leistungsstark machen.

• Bietet ein Offline-Erlebnis: Wenn keine Konnektivität unbedingt erforderlich ist, funktioniert Ihre App offline genauso wie online.
• Ist vollständig zugänglich: Alle Benutzerinteraktionen erfüllen die Barrierefreiheitsanforderungen von WCAG 2.0 .
• Kann durch Suche entdeckt werden: Ihre PWA sollte auffindbar sein (kann von Crawlern entdeckt werden).
• Funktioniert mit jedem Eingabetyp: Ihre PWA kann gleichermaßen mit einer Maus, einer Tastatur, einem Stift oder einem Touch verwendet werden.
• Bietet Kontext für Berechtigungsanfragen: Wenn Sie um Erlaubnis zur Verwendung leistungsstarker APIs bitten, stellen Sie Kontext bereit und fragen Sie nur, wenn die API benötigt wird.
• Befolgt Best Practices für gesunden Code: Wenn Sie Ihre Codebasis gesund halten, können Sie Ihre Ziele einfacher erreichen und neue Funktionen bereitstellen.

Abschluss

Auch wenn PWA relativ neu ist, da es das Beste aus beiden Welten – Web-Apps und nativen Apps – bietet und außerdem die Kosten für die separate Erstellung für jedes Betriebssystem einspart, wird es schnell angenommen. Zu den beliebten PWAs gehören Spotify, Telegram, Trivago, Pinterest und Uber.

Ressourcen

1. https://web.dev/progressive-web-apps/
2. https://en.wikipedia.org/wiki/Progressive_web_app
3. https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
4. https://vuestorefront.io/pwa