PWA Tester

Was prüft der GOAI PWA Tester?

Unser Werkzeug untersucht automatisch drei wesentliche Bestandteile einer PWA und gibt für jeden Bereich einen Wert in Prozent an.

Web App Manifest (20 Prüfungen)

Das Manifest ist die JSON-Datei, die die Identität Ihrer PWA festlegt. Wir prüfen die verpflichtenden Felder (name, short_name, start_url, display mode, Symbole 192x192 und 512x512, share_target), die empfohlenen Felder (screenshots, Beschreibung, Farben, shortcuts, Kategorien, IARC rating) und die freiwilligen Felder (protocol handlers, Edge Side Panel).

Service Worker (6 Prüfungen)

Der Service Worker ist der Motor hinter jeder funktionierenden PWA. Wir prüfen, ob er richtig registriert und erreichbar ist und ob er Handler für fetch (Abfangen von Anfragen), push (Benachrichtigungen), install (Nutzung ohne Verbindung mit Cache) und background sync (Abgleich im Hintergrund) hat.

Funktionen der Anwendung (8 Prüfungen)

Zu den fortgeschrittenen Prüfungen gehören: Verbindung über HTTPS, maskierbares Symbol (für adaptive Symbole unter Android), display_override, launch_handler, festgelegter scope, Unterstützung für Windows Widgets, file handlers und note taking.

Wie funktioniert er?

1. Adresse eingeben - jede beliebige Website, nicht nur Ihre eigene.
2. Automatische Prüfung - das Werkzeug lädt die Seite, das Manifest und den Service Worker herunter, prüft die tatsächlichen Maße der Symbole und wertet jedes Feld nach den Vorgaben des W3C aus.
3. Bericht sofort - Sie erhalten einen Gesamtwert mit Einzelheiten zu jeder Prüfung: ✅ bestanden, ❌ nicht bestanden oder ⚠️ Hinweis, dazu eine JSON-Vorschau des Manifests.

Warum eine PWA wichtig ist

Eine PWA (Progressive Web App) macht aus Ihrer Website eine installierbare Anwendung, die ohne Verbindung läuft, Push-Benachrichtigungen sendet und auf jedem Gerät ein Erlebnis wie eine native App bietet. Die wichtigsten Vorteile:

• Installation ohne App Store - die Nutzer installieren die Anwendung unmittelbar aus dem Browser
• Nutzung ohne Verbindung - die wesentlichen Inhalte bleiben auch ohne Internet erreichbar
• Push-Benachrichtigungen - Sie bleiben mit Ihren Besuchern in Verbindung, auch nachdem sie die Website verlassen haben
• Bessere Leistung - schnelles Laden durch klugen Cache
• Optimiertes SEO - Google bevorzugt Websites mit funktionierender PWA

Ein Werkzeug nach den Kriterien von PWABuilder

Unsere Prüfungen richten sich nach den Vorgaben von PWABuilder (von Microsoft), demselben Werkzeug, das Entwickler weltweit zur Prüfung von PWAs nutzen. Der Unterschied? Der GOAI PWA Tester ist kostenlos, auf Deutsch und liefert Ergebnisse sofort, ohne Anmeldung.

Brauchen Sie eine PWA für Ihre Website? Sprechen Sie uns an, wir helfen Ihnen bei der Umsetzung.

Wir erstellen PWAs für jede Art von Website, mit Ihren Daten, Ihrer Marke und den von Ihnen gewünschten Angaben.

So testen Sie eine PWA in Google Chrome

Google Chrome bringt eingebaute Werkzeuge mit, um PWAs zu prüfen und Fehler zu finden. Die Schritte:

Schnelle Prüfung

1. Öffnen Sie die Website, die Sie prüfen möchten, in Chrome
2. Drücken Sie F12 (oder Rechtsklick, Untersuchen), um die DevTools zu öffnen
3. Wechseln Sie oben auf den Reiter Application

Manifest prüfen

Im geöffneten Bereich sehen Sie unter Manifest:

• Identity - Name der Anwendung, Kurzname, Beschreibung
• Presentation - Anzeigemodus, Ausrichtung, Farben (theme color, background color)
• Icons - alle angegebenen Symbole mit ihren Maßen
• Protocol Handlers - die von der Anwendung angemeldeten Protokolle

Gibt es Fehler, zeigt Chrome sie in roter Schrift unter Errors and warnings an.

Service Worker prüfen

Ebenfalls im Reiter Application sehen Sie unter Service Workers:

• Status - ob der Service Worker aktiv ist und läuft
• Source - die Quelldatei (etwa sw.js)
• Offline - setzen Sie hier den Haken, um eine fehlende Internetverbindung nachzustellen und das Verhalten ohne Verbindung zu prüfen

Cache Storage prüfen

Unter Cache Storage sehen Sie, welche Ressourcen der Service Worker für die Nutzung ohne Verbindung gespeichert hat. Hier sollte zumindest die Ausweichseite für den Offlinebetrieb erscheinen.

Installation nachstellen

So prüfen Sie den Ablauf der Installation:

1. Rufen Sie die Website in Chrome auf
2. Suchen Sie in der Adressleiste das Symbol für die Installation (ein Bildschirm mit Pfeil nach unten)
3. Alternativ wählen Sie im Chrome-Menü (die drei Punkte oben rechts) Installieren oder Install app
4. Die Anwendung wird installiert und erscheint im Startmenü, auf dem Desktop oder in der Liste der Anwendungen

Die Geschichte der PWAs, wem das Lob gebührt

Das Konzept der Progressive Web App (PWA) wurde 2015 von Alex Russell und Frances Berriman, zwei Ingenieuren bei Google, offiziell eingeführt. Der Begriff beschrieb eine neue Art von Webanwendungen, die sich auf dem Gerät installieren lassen und ohne Verbindung laufen, ganz ohne App Store.

Zeitleiste der PWA

• 2007 - Steve Jobs schlägt bei der Vorstellung des iPhone vor, Anwendungen als „Web Apps" über Safari bereitzustellen. Die Idee wird zugunsten des App Store (2008) verworfen.
• 2011 - Google führt den Chrome Web Store und das Konzept der „installable web apps" ein.
• 2013 - Mozilla bringt Firefox OS heraus, ein Betriebssystem, das ausschließlich auf Webtechniken beruht.
• 2014 - Das W3C veröffentlicht die Spezifikation Service Worker, den technischen Grundbaustein für den Betrieb ohne Verbindung.
• 2015 - Alex Russell und Frances Berriman (Google) prägen den Begriff „Progressive Web App" und legen die Kriterien fest: HTTPS, Service Worker, Web App Manifest.
• 2016 - Chrome 51 unterstützt PWAs unter Android vollständig. Opera und Samsung Internet ziehen schnell nach.
• 2017 - Microsoft kündigt PWA-Unterstützung in Windows 10 und Edge an. Twitter bringt Twitter Lite als PWA heraus.
• 2018 - Apple unterstützt Service Worker in Safari 11.1 (iOS 11.3). PWAs laufen damit auf allen wichtigen Plattformen.
• 2019 - Google bringt PWABuilder heraus (heute von Microsoft betreut) zur Prüfung und Erstellung von PWAs. Samsung, Starbucks und Pinterest setzen PWAs im großen Stil ein.
• 2020 - Die Corona-Pandemie beschleunigt die Verbreitung von PWAs, weil schnelle und überall nutzbare Anwendungen gebraucht werden.
• 2021 - Chrome führt die Richer Install UI mit Screenshots und Beschreibungen ein. Apple verbessert die PWA-Unterstützung in Safari.
• 2022-2023 - PWAs erhalten fortgeschrittene Funktionen: File Handling, Protocol Handlers, Window Controls Overlay, Web Share Target.
• 2024-2025 - Apple ergänzt Push-Benachrichtigungen für PWAs ab iOS 16.4. PWAs werden zum Standard für Unternehmensanwendungen und Onlinehandel.

Warum PWAs heute zählen

Über 30 % der Unternehmen der Fortune 500 setzen PWA-Techniken ein, und die Entwicklung geht weiter, je näher die Funktionen an jene nativer Anwendungen heranreichen.

Progressive Web Apps wurden bei Google entworfen, von den Ingenieuren Alex Russell und Frances Berriman, die den Begriff 2015 einführten.

Alex Russell veröffentlichte das Konzept im Juni 2015 in seinem Blog und beschrieb die wesentlichen Merkmale: Webanwendungen, die schrittweise aufbauen, sich anpassen, ohne Verbindung laufen, sich installieren lassen und sicher sind (HTTPS).

Zeitleiste:

• 2007 - Steve Jobs schlägt vor, iPhone-Anwendungen als Web Apps bereitzustellen (vor dem App Store)
• 2011 - Google führt den Chrome Web Store mit Webanwendungen ein
• 2014 - Google ergänzt Service Workers in Chrome (die technische Grundlage der PWA)
• 2015 - Alex Russell und Frances Berriman prägen den Begriff Progressive Web App
• 2015 - Google veröffentlicht die Spezifikation Web App Manifest
• 2016 - Opera und Firefox unterstützen PWAs
• 2018 - Microsoft unterstützt PWAs in Edge und im Windows 10 Store
• 2018 - Apple unterstützt Service Workers in Safari (iOS 11.3), ein wichtiger Moment, denn bis dahin liefen PWAs auf dem iPhone nicht
• 2019 - Samsung Internet unterstützt PWAs vollständig
• 2020 - Microsoft bringt PWABuilder heraus (das Werkzeug, das wir nachgebaut haben)
• 2021 - Google führt die Richer Install UI mit Screenshots im Manifest ein
• 2023 - Apple verbessert die PWA-Unterstützung unter iOS mit Push-Benachrichtigungen (iOS 16.4)
• 2024 - Apple versucht, PWAs in der EU abzuschaffen (wegen des DMA), nimmt die Entscheidung nach heftigem Widerspruch aber zurück
• 2025 - Die PWA wird zum ausgereiften Standard, den alle wichtigen Browser unterstützen

Wer die Standards betreut:

• W3C (World Wide Web Consortium) - die Spezifikation Web App Manifest
• WHATWG - die Spezifikation Service Workers
• Google - der stärkste Fürsprecher, Chrome hat die vollständigste Unterstützung
• Microsoft - PWABuilder, Einbindung in Windows 11 (Widgets, Taskleiste, Startmenü)
• Apple - wachsende Unterstützung, aber noch begrenzter als bei Android und Windows

Unsere Anwendung GOAI PWA Tester prüft also Standards, die sich über 10 Jahre entwickelt haben, von 2015 bis heute.

Test auf dem Handy

So prüfen Sie auf einem mobilen Gerät:

1. Öffnen Sie die Website in Chrome auf dem Telefon
2. Hat die Website einen Installationshinweis, erscheint er automatisch
3. Alternativ wählen Sie im Chrome-Menü Zum Startbildschirm hinzufügen
4. Die Anwendung erscheint wie eine native App auf dem Startbildschirm

Entfernen

• Windows - Einstellungen, Apps, Installierte Apps, die Anwendung suchen, Deinstallieren
• Android - lange auf das Symbol der Anwendung drücken, Deinstallieren
• Chrome - chrome://apps aufrufen, Rechtsklick auf die Anwendung, Remove from Chrome