Progressive Web Apps

Definition Web

Das World Wide Web (kurz: Web) ist ein interaktives Informationssystem, welches dem Benutzer den Zugriff auf Bild-, Text-, Ton- und Videodateien ermöglicht, die durch Hypertext- oder Hypermedia-Links miteinander verbunden sind. Hyperlinks sind elektronische Verbindungen, die zusammengehörige Informationen miteinander verknüpfen, um dem Benutzer einen einfachen Zugang zu ihnen zu ermöglichen.

Definition App

App ist die Abkürzung für Application Software und bedeutet auf Deutsch Anwendungssoftware. Eine App wird verwendet um, Programme aus dem Internet für Endgeräte wie Laptops, Tablets und zu beschreiben. Beispiele für Apps sind Programme zur Bildbearbeitung, Spiele oder E-Mail Programme.

Der Begriff App wurde von Apple populär gemacht, als das Unternehmen im Jahr 2008, ein Jahr nach der Veröffentlichung des ersten iPhones, den App Store einführte. Als das iPhone und der App Store an Popularität gewannen, wurde der Begriff App zur Standardbezeichnung für mobile Anwendungen. Programme für Android und andere Betriebssystem werden ebenfalls als App bezeichnet.

Definition Web App

Web Apps sind Softwareanwendungen, die über einen Webserver bereitgestellt und auf einem Endgerät geladen werden. Ein Webserver ist ein System, das Inhalte oder Dienste für Endbenutzer über das Internet bereitstellt. Sie empfangen Daten, die auf einem Datenspeicher verarbeitet und dann in Datenbanken gespeichert werden.

Web Apps werden von Benutzern über einen Browser im Web, einem Programm zur Darstellung einer Website, mit einer aktiven Internetverbindung aufgerufen. Dadurch funktionieren Web Apps auf jedem gängigem Betriebssystem.

Definition Progressive Web App

Progressive Web Apps (PWA) stellen eine Weiterentwicklung der Web Apps dar. Der Begriff „progressiv“ stammt dabei aus dem Lateinischen und bedeutet auf Deutsch so viel wie „fortschreitend“.

Progressive Web Apps sind Websites, die schrittweise so erweitert werden, dass sie wie native Apps auf unterstützenden Plattformen funktionieren. Native (engl. angepasst) Apps sind Anwendungen, welche speziell für das Betriebssystems des Endgeräts angepasst und entwickelt werden. Native Apps erfordern vor der ersten Benutzung eine Installation über einen App Store. PWAs sind ein Hybrid aus Web Apps und Native Apps.

Progressive Web Apps bieten Zugang zu offenen Webtechnologien für plattformübergreifende Kombinierbarkeit, sie können somit auf verschiedenen Betriebssystemen, beispielsweise Android und iOS, aufgerufen werden. Außerdem bieten sie Benutzern ein natives, App-ähnliches Erlebnis, das für ihre Geräte angepasst ist.

Voraussetzungen einer PWA

Es gibt eine anhaltende Debatte darüber, was eine Web App "progressiv" macht und woher die Definition von PWA stammt. Im Minimum muss eine Web App Folgendes bieten, um als Progressive Web App qualifiziert zu werden:

HTTPS-Verbindung

Die App muss über eine verschlüsselte Verbindung bedient werden. PWAs werden mit der Idee entwickelt, die Sicherheit der Nutzer zu wahren. Dafür werden PWAs über eine gesicherte Verbindung, HTTPS , bereitgestellt, sodass unbefugte Benutzer nicht auf ihre Inhalte zugreifen können. HTTPS wird für die sichere Kommunikation über ein Computernetzwerk verwendet und ist im Internet weit verbreitet.

Service Worker

Während der Entwicklung einer PWA wird der Serive-Worker hinzugefügt. Ein Service-Worker ist eine moderne Browsertechnologie und basiert auf JavaScript. Ein Service-Worker übernimmt verschiedene Dienste für die ihm zugeordneten Seiten und ist aktiv, wenn ein Nutzer keiner dieser Seiten gestartet hat. Wenn eine App zum ersten Mal aufgerufen wird, wird der Service-Worker installiert. Danach ist die Funktion bei jedem Neustart der PWA einsatzbereit.

Web Manifest

Das Web Manifest stellt Informationen über eine PWA in einer JavaScript Object Notation (JSON)-Textdatei bereit. PWA-Manifeste enthalten u. a. den App-Namen, den Autor, die Version, die Beschreibung und eine Liste aller erforderlichen Ressourcen.

Funktionen einer PWA

Zu der Liste der wichtigsten Funktionen einer PWA gehören Folgende:

Progressiv

PWAs funktionieren für jeden Benutzer, unabhängig von der Wahl des Browsers.

Geschwindigkeit

Skeleton Screens, zu Deutsch Skelett Bildschirme, sorgen für eine schnellere Ladezeit. Beim Start einer App wird zuerst das Skelett, also das Grundgerüst der Seite angezeigt. Erst danach füllt sich das Gerüst mit dem restlichen Inhalt.

Responsive

PWAs passen sich jedem Formfaktor an: Desktop, Mobile, Tablet oder noch zu entwickelnde Formen.

Verlinkbarkeit

PWAs können über eine URL geteilt werden, es wird im Gegensatz zu nativen Apps keine Installation der Anwendung erfordert.

Offline Funktionalität

Service Worker ermöglichen die Nutzung im Offline Betrieb oder in Netzwerken mit schlechter Qualität. Es wird somit während der Benutzung keine durchgehende Online Verbindung vorausgesetzt.

Suchmaschinenoptimierung

PWAs sind SEO-freundlich und können von Suchmaschinen gescannt werden.

Self-Update

Durch die Fähigkeit, sich automatisch zu aktualisieren, bleiben Apps immer auf dem aktuellen Stand.

Anwendungsbeispiele

Die Anwendung Uber von dem gleichnamigen US-amerikanischem Dienstleistungsunternehmen wurde als PWA gebaut. Als das Unternehmen vor einigen Jahren begann, in internationale Markte zu expandieren, wurde die Uber-App von Grund auf als PWA neu aufgebaut. Die Uber PWA wurde entwickelt, um die Buchung von Fahrzeugen in 2G-Netzen mit niedriger Geschwindigkeit zu ermöglichen. Die PWA basiert auf dem Konzept einer App-ähnlichen Erfahrung, die auf allen modernen Browsern zugänglich ist.

Ein weiteres Beispiel ist die PWA Trivago. Trivago ist eine Website für die Buchung von Reisen, die die Progressive Web App-Technologie nutzt, um ihren Kunden nahtlose Interaktionen zu bieten. Die PWA hat eine intuitive Oberfläche, die es den Reisenden leicht macht, entweder Preise verschiedener Hotels zu vergleichen, die Bewertungen zu lesen oder ein ausgewähltes Hotel zu buchen. Mit der Leistung der PWA stieg die Klickrate für Hotelbuchungen um 97%.

Im Jahr 2017 brachte Twitter, ein amerikanischer Social-Networking-Dienst, seine Progressive Web Application - Twitter Lite - auf den Markt. Twitter Lite ist eine verpackte Version von Twitter, die in mobilen App-Stores erhältlich ist. Außerdem ist die Web- (Desktop-) Version von Twitter progressiv.

Geschichte

Ursprünglich kann das Konzept der PWAs dem Gründer von Apple, Steve Jobs, zugeschrieben werden.

Während der Einführung des Apple iPhone im Jahr 2007 sagte Jobs voraus, dass Programmierer mit Web 2.0 (Websites, die den Schwerpunkt auf benutzergenerierte Inhalte legen) und Ajax (asynchrone Datenübertragung zwischen Browser und Server) Web-Erlebnisse erstellen können, die genauso wie eine Anwendung auf iPhones aussehen. Ein Jahr spätere jedoch wurde der Apple App Store eingeführt und native App begann die mobile Internetwelt zu dominieren.

Im Jahr 2015 benutzten die Designerin Frances Berriman und der Google Chrome Ingenieur Alex Russell den Begriff Progressive Web App zum ersten Mal. Damit haben sie Apps beschrieben, die neue Funktionen nutzen, mit denen Benutzer ihre Web Apps zu PWAs in ihrem nativen Betriebssystem aufwerten können.

Ein Jahr später, während der Google IO Konferenz, stellte Eric Bidelman, Senior Staff Developers Programs Engineer bei Google Chrome, Progressive Web Apps als neuen Standard in der Webentwicklung vor.

Im Jahr 2017 wurden PWAs auch auf den beiden häufigsten verwendeten Plattformen, Android und iOS unterstützt. Seit 2019 sind PWAs ebenfalls auf den Desktop Browser Google Chrome unter Windows, Chrome OS und Linux sowie Microsoft Edge unter Windows verfügbar. Besonders häufig werden PWAs von Nutzern aus der Internet- und Softwareindustrie, die von einer offenen Computer- und Informationstechnologie ihren Vorteil ziehen, angewendet.

Vorteile und Nachteile

Im Folgendem werden die Vorteile und Nachteile einer Progressive Web App tabellarisch dargestellt.

Ausblick

Immer mehr globale E-Commerce Unternehmen planen Investitionen in PWAs. Eine globale Umfrage von Statista aus Oktober 2019 ergab, dass 24 Prozent der befragten E-Commerce-Unternehmen planen, 2020 in PWAs zu investieren. Zusätzlich gaben 11 Prozent der E-Commerce-Unternehmen an, dass sie bereits über PWA verfügen. 29 Prozent der Unternehmen hatten keine Pläne, im Jahr 2020 in PWA zu investieren.

Softwareagentur TenMedia in Berlin

TenMedia ist eine Web- und Softwareagentur mit dem Fokus auf Datenbanken, Individualsoftware, Apps und Online Plattformen in Berlin Mitte am Alexanderplatz.

Seit 2011 setzten wir Kundenideen in den Bereichen Web- und Softwareentwicklung um und verwenden modernste Technologien. Dabei entwickeln wir stets individuelle Lösungen und verzichten auf Standardsoftware.

Sollten Sie eine Idee für ein Projekt oder Fragen haben, steht unser Team per Telefon, E-Mail oder persönlich in unserem Büro in Berlin Mitte gerne zur Verfügung.