Logo

Eine progressive Webanwendung ( PWA ) ist eine Art Web-App, die als eigenständige Anwendung auf einem Gerät installiert werden kann . [ 1 ] PWAs werden mithilfe des Offline-Caches des Webbrowsers des Geräts installiert . [ 2 ]

Progressive Web Apps (PWAs) wurden ab 2016 als Alternative zu nativen (gerätespezifischen) Anwendungen eingeführt. Ihr Vorteil liegt darin, dass sie keine separate Bündelung oder Verteilung für verschiedene Plattformen erfordern. Sie können auf einer Vielzahl von Systemen, einschließlich Desktop- und Mobilgeräten , genutzt werden . Die Veröffentlichung der App in digitalen Vertriebssystemen wie dem Apple App Store , Google Play oder dem Microsoft Store unter Windows ist optional. [ 2 ]

Da eine PWA als Webseite oder Website bereitgestellt wird , die mit gängigen Webtechnologien wie HTML , CSS , JavaScript und WebAssembly erstellt wurde [ 3 ] , kann sie auf jeder Plattform mit einem PWA-kompatiblen Browser genutzt werden. Stand 2025 werden PWA-Funktionen von Google Chrome , Apple Safari , Brave , Firefox für Android , Microsoft Edge [ 4 ] [ 5 ] und Firefox für Windows [ 6 ] in unterschiedlichem Umfang unterstützt .

Geschichte

Vorgänger

Auf Apples Worldwide Developers Conference 2007 kündigte Steve Jobs an, dass das iPhone „Anwendungen ausführen würde, die mit Web-2.0-Internetstandards erstellt wurden“. [ 7 ] Ein Software Development Kit (SDK) war nicht erforderlich, und die Apps würden über die Safari -Browser-Engine vollständig in das Gerät integriert . [ 8 ] Dieses Modell wurde später auf den App Store umgestellt , um frustrierte Entwickler zu besänftigen. [ 9 ] Im Oktober 2007 kündigte Jobs an, dass im folgenden Jahr ein SDK veröffentlicht werden würde. [ 8 ] Infolgedessen verlagerte sich die überwiegende Mehrheit der iOS-Anwendungen in den App Store, obwohl Apple weiterhin Web-Apps unterstützte.

Seit Anfang der 2010er-Jahre ermöglichen dynamische Webseiten die Nutzung von Webtechnologien zur Erstellung interaktiver Webanwendungen . Responsives Webdesign und die damit verbundene Flexibilität hinsichtlich der Bildschirmgröße haben die Entwicklung von PWAs zugänglicher gemacht. Kontinuierliche Verbesserungen von HTML, CSS und JavaScript haben es Webanwendungen ermöglicht, ein höheres Maß an Interaktivität zu integrieren und so native Benutzererlebnisse auf Websites zu schaffen. [ 10 ]

2013 veröffentlichte Mozilla Firefox OS . Es war als Open-Source -Betriebssystem konzipiert , um Webanwendungen als native Apps auf Mobilgeräten auszuführen. Firefox OS basierte auf der Gecko -Rendering-Engine und nutzte die in HTML5 geschriebene Benutzeroberfläche Gaia. Die Entwicklung von Firefox OS wurde 2016 eingestellt [ 11 ] , und das Projekt wurde 2017 vollständig beendet [ 12 ]. Ein Fork von Firefox OS diente jedoch als Grundlage für KaiOS , eine Plattform für Feature-Phones [ 13 ] .

Erste Einführung

Im Jahr 2015 prägten die Designerin Frances Berriman und der Google Chrome- Entwickler Alex Russell den Begriff „Progressive Web Apps“ (PWA ) [ 14 ] , um Anwendungen zu beschreiben, die neue Funktionen moderner Browser nutzen, darunter Service Worker und Web-App-Manifeste . Diese ermöglichen es Nutzern, Web-Apps in ihrem nativen Betriebssystem zu PWAs zu aktualisieren . Google investierte daraufhin erhebliche Anstrengungen in die Förderung der PWA-Entwicklung für Android. [ 15 ] [ 16 ] Firefox führte 2016 die Unterstützung für Service Worker ein, Microsoft Edge und Apple Safari folgten 2018 [ 17 ] [ 15 ], wodurch Service Worker auf allen gängigen Systemen verfügbar wurden.

Bis 2019 wurden PWAs von Desktop-Versionen einiger Browser unterstützt, darunter Microsoft Edge [ 18 ] (unter Windows ) und Google Chrome [ 19 ] (unter Windows, macOS , ChromeOS und Linux ).

Im Dezember 2020 stellte Firefox für Desktop die Implementierung von PWAs ein (insbesondere wurde die als experimentelle Funktion verfügbare Prototyp-Konfiguration „ Website-spezifischer Browser “ entfernt). Ein Firefox-Architekt merkte an: „Ich hoffe, wir senden damit das Signal, dass PWA-Unterstützung in absehbarer Zeit nicht für Desktop-Firefox verfügbar sein wird.“ [ 20 ] Mozilla unterstützt PWAs auf Android und plant, dies auch weiterhin zu tun. [ 21 ] Firefox Version 143.0, veröffentlicht im September 2025, führte die PWA-Unterstützung auch für Windows ein. [ 6 ]

Browserunterstützung

Browser Unterstützung Kommentar
WindowsmacOSLinuxAndroidiOS & iPadOS
Chrombasiert​ Ja Ja Ja Ja N / ADazu gehören Google Chrome , Microsoft Edge , [ 18 ] Brave , Opera , Vivaldi , [ 22 ] und andere .
FirefoxTeilweise Teilweise Teilweise Teilweise N / A
SafariN / ATeilweise [ 23 ]N / AN / ATeilweise [ 24 ]

Eigenschaften

Progressive Web-Apps (PWAs) sind so konzipiert, dass sie auf jedem Browser funktionieren, der die entsprechenden Webstandards unterstützt . Wie bei anderen plattformübergreifenden Lösungen besteht das Ziel darin, Entwicklern die Erstellung plattformübergreifender Anwendungen im Vergleich zu nativen Apps zu vereinfachen. [ 15 ] PWAs nutzen die Strategie der progressiven Verbesserung (Progressive Enhancement ).

Einige progressive Web-Apps (PWAs) nutzen einen Architekturansatz namens App Shell Model. [ 25 ] In diesem Modell speichern Service Worker die grundlegende Benutzeroberfläche oder „ Shell “ der responsiven Webanwendung im Offline -Cache des Browsers . Dadurch können PWAs mit und ohne Internetverbindung ein natives Nutzungserlebnis bieten. Dies kann die Ladezeit verbessern, indem ein statischer Rahmen als Grundlage dient – ​​ein Layout oder eine Architektur, in die Inhalte sowohl progressiv als auch dynamisch geladen werden können. [ 26 ]

Technische Kriterien

Die technischen Basiskriterien, nach denen eine Website als progressive Web-App gelten und somit von Browsern installiert werden kann, wurden von Russell im Jahr 2016 beschrieben [ 27 ] und seitdem aktualisiert: [ 28 ] [ 29 ].

  • Die App muss von einer sicheren Quelle stammen, über TLS bereitgestellt werden und darf keine gemischten Inhalte enthalten. Progressive Web-Apps müssen über HTTPS bereitgestellt werden , um die Privatsphäre der Nutzer, die Sicherheit und die Authentizität der Inhalte zu gewährleisten.
  • Registrieren Sie einen Service Worker mit einem Fetch-Handler. Progressive Web Apps (PWAs) benötigen Service Worker, um programmierbare Content-Caches zu erstellen. Im Gegensatz zum regulären HTTP- Webcache , der Inhalte nach der ersten Verwendung speichert und anschließend anhand verschiedener Heuristiken erkennt, wann sie nicht mehr benötigt werden, können programmierbare Caches Inhalte explizit vorab laden, bevor sie zum ersten Mal verwendet werden, und sie explizit verwerfen, sobald sie nicht mehr benötigt werden. [ 30 ] Diese Anforderung trägt dazu bei, dass Seiten auch offline oder in Netzwerken mit geringer Bandbreite zugänglich sind.
  • Verweisen Sie auf ein Web-App- Manifest . Das Manifest muss mindestens die folgenden fünf Schlüsseleigenschaften enthalten: name`<properties>` short_name, start_url`<properties>`, ` <properties>` und `<properties>` display(mit den Werten `<properties> standalone`, `<properties>` fullscreenoder `<properties>` minimal-ui) sowie ` icons<properties>` (mit Versionen in 192 px und 512 px). Die im Manifest enthaltenen Informationen ermöglichen es PWAs, einfach über eine URL geteilt und von Suchmaschinen gefunden zu werden. Zudem vereinfachen sie die Installation (PWAs können aber weiterhin in App-Stores von Drittanbietern gelistet werden ). [ 31 ] Darüber hinaus unterstützen PWAs Interaktionen und Navigation im Stil nativer Apps, wie z. B. das Hinzufügen zum Startbildschirm und das Anzeigen von Splash-Screens .

Technologien

Es gibt viele gängige Technologien zur Erstellung progressiver Web-Apps (PWAs). Eine Webanwendung gilt als PWA, wenn sie die Installationskriterien erfüllt, also offline funktioniert und zum Startbildschirm des Geräts hinzugefügt werden kann. Um diese Definition zu erfüllen, benötigen alle PWAs mindestens ein Manifest und einen Service Worker. [ 32 ] [ 33 ] [ 34 ] Weitere Technologien können zur Datenspeicherung, Serverkommunikation oder Codeausführung verwendet werden.

Manifest

Das Web-App-Manifest [ 35 ] ist eine Spezifikation des World Wide Web Consortium (W3C), die ein JSON- basiertes Manifest (üblicherweise manifest.json genannt) [ 31 ] definiert , um Entwicklern einen zentralen Ort für die Speicherung von Metadaten zu bieten , die mit einer Webanwendung verknüpft sind, einschließlich:

  • Der Name der Webanwendung
  • Links zu den Symbolen oder Bildobjekten der Web-App
  • Die bevorzugte URL zum Starten oder Öffnen der Web-App
  • Die Konfigurationsdaten der Web-App
  • Standardausrichtung der Web-App
  • Die Option zur Einstellung des Anzeigemodus, z. B. Vollbild.

Diese Metadaten sind entscheidend dafür, dass eine App zum Startbildschirm hinzugefügt oder neben den nativen Apps aufgelistet wird.

iOS-Unterstützung

iOS Safari implementiert Manifeste teilweise, während die meisten PWA-Metadaten über Apple-spezifische Erweiterungen der Meta-Tags definiert werden können. Mithilfe dieser Tags können Entwickler die Vollbildanzeige aktivieren, Symbole und Startbildschirme definieren und einen Namen für die Anwendung festlegen. [ 36 ] [ 37 ]

Servicekräfte

Ein Service Worker ist ein Web-Worker , der einen programmierbaren Netzwerk-Proxy implementiert und auf Web-/HTTP-Anfragen des Hauptdokuments antworten kann. Er kann die Verfügbarkeit eines Remote-Servers prüfen, Inhalte zwischenspeichern, sobald dieser Server verfügbar ist, und diese Inhalte später an das Dokument ausliefern. Service Worker arbeiten, wie alle anderen Web-Worker auch, unabhängig vom Kontext des Hauptdokuments. Sie können Push-Benachrichtigungen verarbeiten und Daten im Hintergrund synchronisieren, Ressourcenanfragen zwischenspeichern oder abrufen, Netzwerkanfragen abfangen und zentralisierte Aktualisierungen empfangen, unabhängig von dem Dokument, das sie registriert hat – selbst wenn dieses Dokument nicht geladen ist. [ 38 ]

Service Worker durchlaufen einen dreistufigen Lebenszyklus: Registrierung, Installation und Aktivierung. Bei der Registrierung wird dem Browser der Speicherort des Service Workers mitgeteilt, um die Installation vorzubereiten. Die Installation erfolgt, wenn für die Webanwendung noch kein Service Worker im Browser installiert ist oder wenn ein Update für den Service Worker verfügbar ist. Die Aktivierung findet statt, wenn alle Seiten der PWA geschlossen sind, um Konflikte zwischen der vorherigen und der aktualisierten Version zu vermeiden. Dieser Lebenszyklus trägt außerdem zur Konsistenz beim Wechsel zwischen verschiedenen Versionen eines Service Workers bei, da pro Domain nur ein einziger Service Worker aktiv sein kann. [ 38 ]

WebAssembly

WebAssembly ermöglicht die Ausführung von vorkompiliertem Code in einem Webbrowser nahezu in nativer Geschwindigkeit. [ 39 ] Dadurch können in Sprachen wie C geschriebene Bibliotheken in Webanwendungen integriert werden. WebAssembly wurde 2015 angekündigt und erstmals im März 2017 veröffentlicht. Am 5. Dezember 2019 wurde es vom W3C empfohlen [ 40 ] [ 41 ] und erhielt 2021 den Programming Languages ​​Software Award von ACM SIGPLAN. [ 42 ]

Datenspeicherung

Progressive Web App-Ausführungskontexte werden nach Möglichkeit entladen, daher müssen progressive Web Apps den Großteil ihres langfristigen internen Zustands (Benutzerdaten, dynamisch geladene Anwendungsressourcen) auf eine der folgenden Arten speichern:

Webspeicher
Web Storage ist eine WHATWG-Standard-API, die die Speicherung von Schlüssel-Wert-Paaren in modernen Browsern ermöglicht. Die API besteht aus zwei Objekten: einem Objekt, sessionStoragedas die Speicherung nur während der Sitzung ermöglicht und die Daten nach Beendigung der Browsersitzung gelöscht werden, und localStorageeinem Objekt, das die Speicherung über Sitzungen hinweg ermöglicht. [ 43 ]
Indexed Database API
Die Indexed Database API ist eine W3C-Standard-Datenbank-API, die in allen gängigen Browsern verfügbar ist. Sie wird von modernen Browsern unterstützt und ermöglicht die Speicherung von JSON- Objekten und beliebigen, als Zeichenkette darstellbaren Strukturen. [ 44 ] Die Indexed Database API kann mit einer Wrapper-Bibliothek verwendet werden , die zusätzliche Konstrukte bereitstellt.

Vergleich mit nativen Apps

2017 veröffentlichte Twitter Twitter Lite, eine PWA-Alternative zu den offiziellen nativen Android- und iOS -Apps. Laut Twitter benötigte Twitter Lite nur 1–3 % des Speicherplatzes der nativen Apps. [ 45 ] Starbucks bietet eine PWA an, die 99,84 % kleiner ist als die entsprechende iOS-App. Nach der Einführung der PWA verdoppelte Starbucks die Anzahl der Online-Bestellungen, wobei Desktop-Nutzer etwa genauso häufig bestellten wie Nutzer der mobilen App. [ 46 ]

Eine 2018 von Forbes veröffentlichte Studie ergab, dass Nutzer der Pinterest -PWA 40 % mehr Zeit auf der Seite verbrachten als auf der vorherigen mobilen Website. Die Werbeeinnahmen stiegen um 44 % und die Nutzerinteraktionen um 60 %. [ 47 ] Flipkart verzeichnete, dass 60 % der Kunden, die die native App deinstalliert hatten, zur Flipkart-PWA zurückkehrten. Lancôme konnte die Zeit bis zur Interaktion auf der Seite um 84 % reduzieren, was zu einem Anstieg der Conversions um 17 % und der mobilen Sitzungen auf iOS um 53 % mit der PWA führte. [ 48 ]

Veröffentlichung über App Stores

Da eine PWA keine separate Bündelung oder Verteilung für verschiedene Plattformen erfordert und Nutzern über das Web zur Verfügung steht, müssen Entwickler sie nicht über digitale Vertriebssysteme wie den Apple App Store , Google Play , Microsoft Store oder Samsung Galaxy Store veröffentlichen . Die großen App-Stores unterstützen die Veröffentlichung von PWAs in unterschiedlichem Umfang. [ 2 ] Google Play, Microsoft Store [ 49 ] und Samsung Galaxy Store unterstützen PWAs, der Apple App Store jedoch nicht. Der Microsoft Store veröffentlicht einige geeignete PWAs automatisch (auch ohne Anfrage der App-Autoren), nachdem er sie über die Bing- Indexierung gefunden hat. [ 50 ]

Siehe auch

Referenzen

  1. ^ „Was sind Progressive Web Apps? PWA-Leitfaden für Anfänger“ . freeCodeCamp.org . 18.01.2024 . Abgerufen am 06.05.2024 .
  2. ^ a b c "Progressive Web Apps | Software AG" . techradar.softwareag.com . Abgerufen am 25.09.2020 .
  3. ^ Ltd, Cybellium. Mastering Front-end development . Cybellium Ltd. S. 273. ISBN 979-8-8668-4882-9Die
  4. ^ "Kann ich PWA verwenden?" . CanIUse . Abgerufen am 27. Januar 2021 .
  5. ^ "Ist der Servicemitarbeiter bereit?" . Jake Archibald.
  6. ^ a b „Firefox 143.0, Alle neuen Funktionen, Updates und Fehlerbehebungen anzeigen“ . 16. September 2025. Abgerufen am 2. November 2025 .
  7. ^ Jobs, Steve; Apple (11. Juni 2007). „iPhone wird Web 2.0-Anwendungen von Drittanbietern unterstützen“ . Apple .
  8. ^ a b Ritchie, Rene (5. März 2018). „App Store Year Zero: Unsweet web apps driven iPhone to an SDK“ . iMore . Abgerufen am 23. Mai 2019 .
  9. ^ „Jobs’ ursprüngliche Vision für das iPhone: Keine nativen Apps von Drittanbietern“ . 9to5Mac . 21. Oktober 2011. Abgerufen am 22. Mai 2019 .
  10. ^ Marcotte, Ethan (25. Mai 2010). „Responsive Web Design“ . A List Apart . Abgerufen am 25. Mai 2010 .
  11. ^ „Mozilla beendet die kommerzielle Entwicklung von Firefox OS – gHacks Tech News“ . gHacks Technology News . 27.09.2016 . Abgerufen am 05.05.2022 .
  12. ^ Hoffman, Chris; PCWorld | (28.09.2016). „Mozilla stellt die kommerzielle Entwicklung von Firefox OS ein“ . PCWorld . Abgerufen am 17.03.2021 .
  13. ^ „KaiOS, eine Feature-Phone-Plattform, die auf den Überresten von Firefox OS basiert, fügt Facebook-, Twitter- und Google-Apps hinzu“ . TechCrunch . 26. Februar 2018. Abgerufen am 17. März 2021 .
  14. ^ Russell, Alex (15. Juni 2015). „Progressive Web Apps: Escaping Tabs Without Losing Our Soul“ . Abgerufen am 15. Juni 2015 .
  15. ^ abcEvans, Jonny (26 January 2018). "Apple goes back to the future with web apps". Computerworld. Retrieved 23 May 2019.
  16. ^Ladage, Aaron (17 April 2018). "Progressive Web Apps Are Here and They're Changing Everything". DEG. Retrieved 23 May 2019.
  17. ^"Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2021-05-16.
  18. ^ ab"Progressive Web Apps on Windows overview". Microsoft Edge Documentation. 13 March 2021. Retrieved 13 March 2021.
  19. ^LePage, Pete (4 June 2019). "Progressive Web Apps on Desktop". Google Developers. Retrieved 13 September 2019.
  20. ^Newman, Jared (2021-01-26). "Firefox just walked away from a key piece of the open web". Fast Company. Retrieved 2021-01-27.
  21. ^"eBay PWA". Mozilla. Retrieved 25 December 2024.
  22. ^"Get your PWA on". Vivaldi Browser. 2021-10-07. Retrieved 2021-10-11.
  23. ^Angle, Patrick; Avenard, Jean-Yves; Caceres, Marcos; Cannon, Ada Rose; Carlson, Eric; Davidson, Garrett; Davis, Jon; Dubost, Karl; Eidson, Brady (2023-06-06). "News from WWDC23: WebKit Features in Safari 17 beta". WebKit. Retrieved 2023-06-14.
  24. ^Angle, Patrick; Caceres, Marcos; Caliman, Razvan; Davis, Jon; Eidson, Brady; Hatcher, Timothy; Niwa, Ryosuke; Simmons, Jen (2023-03-27). "WebKit Features in Safari 16.4". WebKit. Retrieved 2023-06-14.
  25. ^"The App Shell Model".
  26. ^Osmani, Addi. "The App Shell Model | Web Fundamentals". Google Developers. Retrieved 23 May 2019.
  27. ^Russell, Alex (12 September 2016). "What, Exactly, Makes a Progressive Web App". Retrieved October 18, 2016.
  28. ^"What does it take to be installable?". web.dev. Retrieved 2021-05-19.
  29. ^ "Progressive Web App" . web.dev . Abgerufen am 15. Juni 2015 .
  30. ^ „Service Worker Caching und HTTP Caching“ . web.dev . Abgerufen am 19.05.2021 .
  31. ^ a b W3C "Web App Manifest", Working Draft , abgerufen am 12. September 2016.
  32. ^ „Auffindbar“ . Mozilla Developer Network . Abgerufen am 24.04.2017 .
  33. ^ „Netzwerkunabhängig“ . Mozilla Developer Network . Abgerufen am 24.04.2017 .
  34. ^ „Sofort ladende Web-Apps mit einer Application Shell Architecture“ . Google Developers . Abgerufen am 24.04.2017 .
  35. ^ „Web Manifest Docs on MDN“ . MDN Web Docs . 8. August 2025.
  36. ^ „Was ist neu in iOS 12.2 für Progressive Web Apps?“ . Medium . 27. März 2019.
  37. ^ „Konfigurieren von Webanwendungen“ . Safari-Webinhaltsleitfaden .
  38. ^ a b „Einführung in Service Worker | Web“ . Google Developers . 1. Mai 2019. Abgerufen am 23. Mai 2019 .
  39. ^ „WebAssembly-Konzepte“ . MDN . Abgerufen am 14. August 2018 .
  40. ^ World Wide Web Consortium. „WebAssembly Core Specification“ . World Wide Web Consortium (W3) . Abgerufen am 6. Mai 2024 .
  41. ^ „WebAssembly 1.0 wird zur W3C-Empfehlung und ist die vierte Sprache, die nativ in Browsern ausgeführt werden kann“ . InfoQ . Abgerufen am 6. Mai 2024 .
  42. ^ „Programming Languages ​​Software Award“ . www.sigplan.org . Abgerufen am 6. Mai 2024 .
  43. ^ „Web Storage API“ . MDN . Abgerufen am 14. August 2018 .
  44. ^ „Konzepte hinter IndexedDB“ . MDN . Abgerufen am 14. August 2018 .
  45. ^ Shankland, Stephen (30. Juli 2020). „Die Twitter-App hilft dabei, zu verhindern, dass Smartphones das Web ersticken . “ CNET . Abgerufen am 11. Februar 2023 .
  46. ^ „12 beste Beispiele für Progressive Web Apps (PWAs) im Jahr 2021“ . SimiCart . 22.02.2021 . Abgerufen am 16.05.2021 .
  47. ^ Osmani, Addy (30. November 2017). „Eine Fallstudie zur Performance einer progressiven Web-App auf Pinterest“ . ChromiumDev-Team . Abgerufen am 10. Februar 2023 .
  48. ^ Gazdecki, Andrew (9. März 2018). „Warum progressive Web-Apps native mobile Apps ersetzen werden“ . Forbes . Abgerufen am 10. Februar 2023 .
  49. ^ MSEdgeTeam. „Veröffentlichen Ihrer Progressive Web App im Microsoft Store – Microsoft Edge-Entwicklung“ . docs.microsoft.com . Abgerufen am 16.05.2021 .
  50. ^ „Die erste Ladung progressiver Web-Apps für Windows 10 ist da . “ Windows Central . 7. April 2018. Abgerufen am 16. Mai 2021 .