PWA
Progressive Web Apps
vereinen die Vorteile
von Websites und Mobile Apps.
Progressive Web Apps
vereinen die Vorteile
von Websites und Mobile Apps.
Was sind Progressive Web Apps?
Progressive Web Apps sind ein noch relativ neuer Trend in der Webentwicklung. Viel spricht dafür, dass PWA die nächste große Welle in der Webentwicklung nach dem Responsive Design werden.
PWA vereinen die Vorteile von herkömmlichen Websites mit denen von Mobile Apps. Wie Websites werden sie über eine URL im Browser geladen. Sie sind somit über Suchmaschinen auffindbar und können Suchmaschinen-Optimierung (SEO) betreiben. Der User muss also nicht wie bei Mobile Apps den Umweg über einen App Store gehen, um PWA zu nutzen. Auf mobilen Endgeräten fühlen sich PWA ähnlich wie Mobile Apps an. Zudem bieten sie Funktionalitäten, wie man sie bisher nur von Mobile Apps kannte – beispielsweise Offline-Funktionen und Push Notifications.
PWA sind also für Betreiber von Websites oder Web Apps eine attraktive Möglichkeit, besser auf den immer mehr steigenden Anteil mobiler Internetnutzung zu reagieren. Dabei sind sie deutlich schneller und damit kostengünstiger in der Entwicklung und Wartung.
Progressive Web Apps im Detail
Progressive Web Apps basieren nicht auf einer bestimmten Technologie. Sie definieren sich statt dessen über eine Reihe von Merkmalen, die mit verschiedenen Technologien erreicht werden können. Man kann PWA im Wesentlichen über die folgenden Aspekte charakterisieren:
Eine PWA funktioniert grundsätzlich in jedem Browser auf jedem Betriebssystem. Dabei bietet sie bei ihrem Aufruf nur den Teil ihres Funktionsspektrums an, der im ausführenden Browser auch unterstützt wird. (Der Begriff Progressive orientiert sich am Webdesign Ansatz des Progressive Enhancement.)
Eine PWA passt sich an verschiedene Bildschirmgrößen an. Unserer Meinung nach ist hier deutlich mehr Flexibilität notwendig als der aktuelle responsive Standard bietet, der sich im Web bereits flächendeckend durchgesetzt hat. Vielmehr soll sich eine PWA auf mobilen Endgeräten tatsächlich wie eine App anfühlen. Es geht um Konzepte wie Splash-Screens, Page-Transitions, Wischgesten, mobile Menü-Steuerung etc. Auch sollte das spezielle mobile Nutzungsinteresse in der mobilen Version einer PWA im Zentrum stehen. Bei Fruyts sprechen wir daher auch von Responsive UX-Design.
Eine PWA bietet dem User immer ein gewisses Spektrum an relevanten Inhalte und Funktionen an. Und zwar unabhängig davon, welche und ob eine Netzwerkverbindung besteht. Dazu benötigt die PWA wie eine Mobile App Offline-Funktionalität. (Sie muss außerdem leichtgewichtig sein. Dazu mehr im nächsten Punkt.)
Der Umfang der Offline-Funktionalität hängt vom Zweck der PWA ab. Für manche PWA ist es sinnvoll, ihren vollen Funktionsumfang auch offline bereitzustellen. Für andere reicht es aus, den User lediglich darauf hinzuweisen, dass er offline ist und er eine Netzwerkverbindung herstellen soll. In keinem Fall jedoch, sollte eine PWA überhaupt nicht laden oder nicht responsive auf das Endgerät reagieren.
Eine PWA muss schnell laden. So ermöglicht sie sanfte Seitenübergänge und flüssiges Scrollen. Dazu braucht sie sowohl einen schnellen Webserver als auch eine kluge Architektur und leichtgewichtigen Code.
Das App-Icon einer PWA kann auf dem Home-Screen des mobilen Geräts abgelegt werden. Wird die PWA über das Icon aufgerufen, kann sie wie eine Mobile App im Full Screen oder Stand Alone Modus betrieben werden. Dann sieht man das Browser-Fenster nicht mehr.
Hier wird als zentrales Feature immer die Möglichkeit genannt, dem User Push-Notifications zukommen zu lassen. Wie eine Mobile App kann die PWA also mit dem User interagieren, auch wenn sie gerade nicht ausgeführt wird. Aber der Punkt ist übergreifend gemeint: PWA sollen insgesamt eine intensive und aktivierende Nutzungserfahrung anbieten und sich damit von herkömmliche Websites abheben.
PWA werden konsequent über HTTPS ausgeliefert. Je nach Funktionalität werden sie zusätzlich abgesichert.