Progressive Web Apps

Eine Progressive Web App ist eine Anwendungssoftware, die über das Web bereitgestellt wird und die User Experience auf mobilen Endgeräten verbessern soll.
Zwei Männer stehen vor einem Whiteboard mit bunten Notizen
© REDPIXEL

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.

Vorteile

  • Wenig Speicherplatzverbrauch
  • Automatische Aktualisierung
  • Plattformunabhängig
  • Offline Funktionalität

Nachteile

  • Erhöhter Akkuverbrauch
  • Fehlender Zugriff auf Bluetooth, Kontakte, Kalender und NFC (Nahfeldkommunikation)
  • Keine Positionierung im App Store
  • Nicht alle Betriebssysteme werden unterstützt

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.

Gefällt dir, was du siehst? Teile es!
Neueste Beiträge
Ein kleiner weißer Serviceroboter reicht an einem warm beleuchteten Schreibtisch eine Tasse, im Hintergrund sitzt eine erwachsene Person auf dem Sofa. Ein Sinnbild dafür, wie sich KI datenschutzkonform nutzen lässt – auch dort, wo künstliche Intelligenz nah an persönlichen Daten und am Alltag agiert.
KI datenschutzkonform nutzen: Der Praxis-Fahrplan für 2026
KI datenschutzkonform zu betreiben entscheidet 2026 darüber, ob künstliche Intelligenz zum Wettbewerbsvorteil oder zum Haftungsrisiko wird. Verantwortliche in Unternehmen und Behörden brauchen klare Antworten: Welche Tools sind erlaubt, was ändert sich zum August, und wie lässt sich KI-Datenschutz im Unternehmen praktisch umsetzen? Dieser Beitrag liefert den Fahrplan für den Alltag.
Weiterlesen... Lesezeit: 6 Min.
Die Erde vom Weltall betrachtet. Die Sonnenstrahlen bahnen sich ihren Weg daran vorbei. Ein Satellit für Erdbeobachtung schwebt darüber.
Satellitendaten im Alltag: Wie Erdbeobachtungs-Software Felder, Städte und Klima verändert
Wenn ein Landwirt seine Subventionsunterlagen einreicht, hat ein Satellit bereits gemessen, ob das Feld tatsächlich die gemeldete Kultur trägt. Wenn Stadtplaner Hitzeinseln identifizieren, laufen die Analysen über Satellitendaten. Wenn nach einer Überschwemmung Hilfe koordiniert wird, arbeiten Einsatzkräfte mit in Echtzeit aktualisierten Karten aus dem Orbit. Was all das verbindet: Software, die rohe Sensordaten in entscheidungsrelevantes Wissen verwandelt — und die in immer mehr Bereichen des öffentlichen und wirtschaftlichen Lebens unsichtbar Einzug hält.
Weiterlesen... Lesezeit: 4 Min.
Ein Philosoph in Toga unterhält sich auf Augenhöhe mit einem humanoiden Roboter – ein Sinnbild dafür, wie bewährte Legacy-Systeme und moderne KI bei der Modernisierung zusammenfinden.
Legacy-Modernisierung mit KI: Altsysteme digital recyceln
Legacy-Modernisierung gilt als Mammutaufgabe – doch künstliche Intelligenz verspricht, Altsysteme in Quartalen statt Jahren zu erneuern. Dieser Beitrag ordnet ein, was KI beim Modernisieren von Altsystemen wirklich leistet, wo sie scheitert und wie sich Legacy-Software mit KI realistisch modernisieren lässt – ohne teure Fehlentscheidungen.
Weiterlesen... Lesezeit: 5 Min.
Zufällige Beiträge
Ein Alpaka steht im Stall. Es blickt treu in die Kamera. Ein Symbolbild für fairen Handel in Südamerika.
Blockchain-Technologie: Wird fairer Handel transparenter?
Die Blockchain-Technologie wird in erster Linie mit der Kryptowährung Bitcoin in Verbindung gebracht. Doch auch darüber hinaus gibt es für dieses Datenbanksystem vielfältige Anwendungsmöglichkeiten. Der Technik-Riese IBM will mittels Blockchain nachhaltiges Wirtschaften fördern. NGOs und Kooperativen träumen von einer Revolutionierung des fairen Handels. Aber wie genau funktioniert dieses System? Und was ist eigentlich Blockchain? Eine Erklärung liefert unser Artikel zum Thema: Blockchain-Technologie und fairer Handel.
Weiterlesen... Lesezeit: 5 Min.
Mehrere kleine Roboter sitzen nebeneinander mit Headsets am Tisch. Sie sind Robo Advisor.
Wie sicher sind Robo Advisor?
Robo Advisor versprechen eine vereinfachte Vermögensverwaltung. Wer sein Geld gewinnbringend und sicher anlegen will, findet hier neue Optionen. Doch welche Garantien gibt es im digitalen Raum? Dieser Artikel taucht tief in das Konzept Robo Advice ein. Er beleuchtet die Mechanismen, die das investierte Kapital schützen, und klärt über die Rahmenbedingungen auf.
Weiterlesen... Lesezeit: 6 Min.
Riesige Stapel alter Dokumente füllen den Raum. Ein Mann im Anzug steht rücklings davor. Er muss das Archiv digitalisieren und weiß nicht, wo er anfangen soll.
Archiv digitalisieren: Leitfaden für Bestands- und Rechteinhaber
Ein Archiv digitalisieren lohnt sich besonders dort, wo Material altert, aber der Wert bleibt: Papier wird spröde, Farben kippen, Film und Bänder werden empfindlich. Dieser Artikel zeigt, wie Bestände geplant digitalisiert, nachvollziehbar übergeben und dauerhaft gesichert werden. Dazu gibt es einen verständlichen Überblick, wie sich ein Filmarchiv digitalisieren lässt
Weiterlesen... Lesezeit: 8 Min.
Zufällige Glossareinträge
Eine Frau im Business-Outfit liegt auf einer Wolke. Sie träumt von der guten Cloud-Infrastruktur ihrer Firma.
Cloud-Infrastruktur und -Verwaltung
Die Cloud-Infrastruktur bildet das Fundament für das Cloud Computing. Damit gehört sie zur Basis der modernen Datenerfassung in Unternehmen. Viele Organisationen nutzen heutzutage automatisch ein Cloud-Netzwerk. Häufig sogar, ohne zu wissen, worum es sich dabei handelt oder wie es funktioniert. Im folgenden Artikel geben wir eine kleine Einführung zum Thema Cloud-Infrastruktur. Dabei bieten wir weniger technische Informationen als einen leicht verständlichen Überblick über Cloud-Systeme, ihre Anwendung und ihre verschiedenen Komponenten.
Weiterlesen... Lesezeit: 7 Min.
Ein junger blinder Mann sitzt mit einer Sonnenbrille vor seinem PC. Er profitiert davon wenn Unternehmen eine barrierefreie Website erstellen lassen.
Barrierefreie Website
Eine barrierefreie Website bietet im digitalen Raum uneingeschränkten Zugang für alle Menschen – unabhängig von Behinderung, Alter, Sprache oder technischer Ausstattung. Barrierefreie Internetseiten bündeln innovative Konzepte aus Webentwicklung und Usability-Forschung, um Nutzerinteressen und gesetzliche Vorgaben optimal zu verbinden.
Weiterlesen... Lesezeit: 2 Min.
Hamburgs Fluss mit Elbphilharmonie im Hintergrund
IT Systemhaus Hamburg
IT Systemhäuser vereinen Soft- und Hardwarekomponenten und stellen Unternehmen dar, die IT-Dienstleistungen anbieten und sich um alle technischen Belange – auch nach der Erstellung bspw. einer Softwarelösung – kümmern. Wer auf der Suche nach einem IT-Dienstleistungsanbieter mit passendem Service und kompetenter Betreuung in Hamburg ist, dem wird eine große Anzahl an Systemhäusern geboten.
Weiterlesen... Lesezeit: 5 Min.