PWA (Progressive Web App) statt mobile Website

Dank dem Responsive Design ist heute nahezu fast jede Website auch mobil sehr gut nutz- und bedienbar.

Dennoch können sie nicht die Funktionen bieten, die eine PWA (Progressive Web App) direkt mitbringt.

PWA=Mix aus mobiler Website und nativer App

Doch was ist eine Progressive Web App eigentlich genau? Darauf sind wir bereits in diesem Artikel eingegangen. Dennoch wollen wir uns noch einmal kurz anschauen, was die herausragenden Unterschiede zu einer mobilen Website sind.

Das folgende Bild stellt eine ganz normale Ansicht einer mobilen Website dar.

Vorteile einer Progressiven Web App (PWA)

Die Vorteile einer progressiven Web App (PWA) sind:

• Als App auf dem Startbildschirm des Smartphones hinzufügbar
• Pushnachrichten-Versand
• Offline nutzbar
• Kein Browser-Interface. Die App wird komplett auf dem Bildschirm angezeigt
• Sticky Footer (klebriger Footer) am Fuß der App mit Shortcuts wie bei einer nativen App
• Öffnet sich ohne Ladezeit (ab dem zweiten Besuch. Beim Erstbesuch muss die App kurz geladen werden)
• kann sowohl auf Android-, wie auch auf iOS-Geräten genutzt werden. Dafür ist kein App-Store notwendig.
• QR-Code Generator zum Erstellen eines app-eigenen QR-Codes zum Aufrufen der App. Dieser QR-Code kann offline wie online verwendet werden. Per Download steht der QR-Code für jede Art von Druckerzeugnis zur Verfügung. z.B. für Geschäftsbriefbögen, Flyer, Werbeartikel usw.
• Suchmaschinenrelevant, da die Apps browser-basiert sind und in den Suchmaschinen dadurch gelistet werden.
• Eigene Domain/Subdomain nutzbar

Wie du siehst, verfügt eine PWA über sehr nützliche Funktionen. Damit ersetzt sie zwar keine umfangreichen nativen Apps, aber das muss sie ja auch nicht. Dadurch sind Entwicklungs- und Folgekosten natürlich extrem gering.

Wie wird aus einer mobilen Website eine PWA?

Damit aus einer mobilen Website nun eine PWA wird, muss das Website-System natürlich eine entsprechende Funktion bieten. Ob dein System dafür geeignet ist, erfährst du über den Systemanbieter oder deinen Webmaster.

Wir nutzen den Worldsoft Site Wizard als Website-System und darin ist eine PWA enthalten.

Wie wird aus der mobilen Website eine PWA für den User?

Zunächst muss die PWA im Website-System aktiviert und eingestellt sein. Sodann erhalten User, die deine Website auf dem Smartphone betrachten, zwei Benachrichtigungen, wie im ersten Bild dieses Artikels zu sehen ist:

1. Benachrichtigungen erlauben, bzw. abonnieren
2. Auf dem Smartphone installieren

Diese Benachrichtigungen erscheinen auf Android-Geräten automatisch. Bei iOS-Geräten muss das Hinzufügen zum Startbildschirm beispielsweise über die Funktionstasten im Footer des Smartphones hinzugefügt werden.

Werden die Benachrichtigungen ignoriert, bleibt es natürlich bei der normalen mobilen Ansicht der Website.

Fügt man die Website dem Startbildschirm hinzu, wechselt im Hintergrund das Website-System von der mobilen Ansicht auf die PWA. Die Inhalte der Website werden dabei komplett übernommen. Auch ein eventueller Online Shop. Das erleichtert das Bearbeiten der Website. Inhalte müssen nur einmal gepflegt werden!

Auf dem Smartphone erscheint die Website dann mit einem sogenannten Sticky Footer. Übersetzt bedeutet Sticky klebrig. Der Footer klebt demnach förmlich am Ende des Bildschirms unabhängig davon, wie weit man die eigentliche Seite nach unten scrollen kann.

In diesem Footer findet man Shortcuts (Tastenkürzel), über die man per Fingertip vordefinierte Aktionen durchführen kann. Im obigen Bild sind dies diverse Kontaktmöglichkeiten, die es dem Nutzer einfach machen sollen, das betreffende Unternehmen zu kontaktieren.

In unserer App sind dies E-Mail, Videoberatung und Telefon. Diese Shortcuts sind aber frei definierbar.

Woran erkennt man die App die auf dem Smartphone

Für die App selbst wird bei deren Einstellung ein App-Icon hochgeladen. Dies kann jedes beliebige Bild sein. Am sinnvollsten ist aber für Unternehmen das eigene Logo oder ein Bild, was man für die Website als Favicon gewählt hat.

Wird die App dem Startbildschirm hinzugefügt, erscheint das Icon dort, wie im folgenden Bild zu sehen ist.

Auch der App-Kurztitel ist unterhalb des Icons zu finden, damit Nutzer das Icon/die App auch zuordnen können. Das ist bei den nativen Apps, wie Facebook, WhatsApp etc., nicht anders.

Mit Pushnachrichten das eigene Marketing puschen

Wie bereits erwähnt, sind Pushnachrichten ein unschätzbares Marketingtool. Hierüber können App-User über Neuigkeiten, Angebote, Produktionsstände, Lieferungen und vieles mehr informiert werden. Das dürfte für jedes Business interessant sein.

Welche Marken nutzen PWA?

Zum Schluss noch einige Marken, die bereits eine PWA nutzen und damit ein Zuwachs an Conversion und Nutzern verzeichnen.

• About you (Fashion-Label)
• Tinder
• Pinterest
• BMW
• Facebook (Lite-Version der nativen App)
• Alibaba-Group
• trivago
• Forbes
• Starbucks-Kaffee
• Oppenländer Optik (als einer der ersten Optiker in Deutschland)
• Kompetenz-Service-Zentrum
• Wir ;)))

Fazit

Aufgrund seiner vielen Funktionsmöglichkeiten und Vorteile werden Progressive Web Apps zukünftig sicherlich mobile Websites ersetzen. Auch aus Kostengründen sind PWA absolut erschwinglich. Ob als Stand-Alone-Produkt oder in Verbindung mit der eigenen Website - hier sollten gerade die vielen Einzel- und Kleinunternehmen sich den Stand der Technik zu nutze machen und ihre mobilen Website, sofern möglich, auf PWA umstellen.

Solltest du dazu Fragen haben, stehen wir dir unter den angegebenen Kontaktmöglichkeiten auf dieser Seite jederzeit gerne zur Verfügung.