Progressive Webanwendung

PWA -Logo

A Progressive Webanwendung (PWA), allgemein bekannt als a Progressive Web -App, ist eine Art von Anwendungssoftware geliefert durch die Netz, erstellt mit gemeinsamen Webtechnologien einschließlich Html, CSS, JavaScript, und WebAssembly. Es ist beabsichtigt, auf jeder Plattform zu arbeiten, die eine Standards verwendet, die konformen ist Browser, einschließlich beides Desktop und mobile Geräte.

Da eine progressive Web -App eine Art von Art von ist Website oder Webseite bekannt als a InternetanwendungSie benötigen keine separate Bündelung oder Verteilung. Entwickler können einfach die Webanwendung online veröffentlichen, sicherstellen, dass sie den Basis "Installierbarkeitsanforderungen" erfüllt, und Benutzer können die Anwendung zu ihrer Hinzufügung hinzufügen Startbildschirm. Veröffentlichung der App in digitalen Vertriebssystemen wie Apple App Store oder Google Play es ist optional.[1]

Ab 2021 werden PWA -Funktionen in unterschiedlichem Maße von unterstützt Google Chrome, Apfelsafari, Firefox for Android, und Microsoft Edge[2][3] aber nicht von Feuerfuchs Für Desktop.[4]

Browserunterstützung

Browser Die Unterstützung Kommentar
Fenster Linux Mac OS Android iOS
Chrom-basierend Ja Ja Ja Ja - Inklusive Google Chrome, Microsoft Edge,[5] Tapfer, Oper, Vivaldi,[6] und Andere.
Feuerfuchs Nein[4] Nein[4] Nein[4] Teilweise Nein
Safari - - Ja - Ja
(iOS 11.3+)[7]

Geschichte

Vorgänger

Beim Start von iPhone in 2007, Steve Jobs kündigte an, dass Web -Apps (entwickelt in HTML5 Verwendung Ajax Architektur) wäre das Standardformat für iPhone -Apps. Nein Softwareentwicklungskit (SDK) war erforderlich, und die Apps würden durch die vollständig in das Gerät integriert sein Safari Browsermotor.[8] Dieses Modell wurde später für den App Store als Mittel zur Verhinderung umgestellt Jailbreaker und frustrierte Entwickler zu beschwichtigen.[9] Im Oktober 2007 kündigte Jobs an, dass im folgenden Jahr ein SDK gestartet werden würde.[8] Obwohl Apple weiterhin Web -Apps unterstützte, verlagerte sich die überwiegende Mehrheit der iOS -Anwendungen in Richtung App Store.

Ab Anfang 2010 Dynamische Webseiten Ermöglichte Webtechnologien, um interaktiv zu erstellen Web Applikationen. Sich anpassendes Webdesignund die flexibilitätsgroße Flexibilität, die die PWA-Entwicklung bietet, zugänglicher. Die fortgesetzte Verbesserung von HTML, CSS und JavaScript ermöglichte es Webanwendungen, ein höheres Maß an Interaktivität zu berücksichtigen und native Erlebnisse auf einer Website möglich zu machen.[10]

Im Jahr 2013 veröffentlichte Mozilla Firefox OS. Es sollte ein beabsichtigt sein Open Source Betriebssystem Für das Ausführen von WebApps als native Apps auf mobilen Geräten. Firefox OS basierte auf dem Gecko Rendering Engine mit einer Benutzeroberfläche namens Gaia, geschrieben in HTML5. Die Entwicklung von Firefox OS endete 2016.[11] und das Projekt wurde 2017 vollständig eingestellt,[12] Obwohl eine Gabel von Firefox OS als Grundlage von verwendet wurde Kaios, eine Feature -Telefonplattform.[13]

Erste Einführung

Im Jahr 2015, Designer Frances Berriman und Google Chrome Ingenieur Alex Russell prägte den Begriff "progressive Web -Apps"[14] Beschreibung von Apps, die neue Funktionen nutzen, die von modernen Browsern unterstützt werden, einschließlich Servicearbeiter und Web -App manifestiert sichDadurch können Benutzer Web -Apps auf progressive Webanwendungen in ihrem nativen Upgrade aktualisieren Betriebssystem (OS). Google hat dann erhebliche Anstrengungen unternommen, um die PWA -Entwicklung für Android zu fördern.[15][16] Firefox führte 2016 die Unterstützung für Servicearbeiter ein, und Microsoft Edge und Apple Safari folgten 2018.[17][15] Servicearbeiter auf allen wichtigen Systemen zur Verfügung stehen.

Bis 2019 wurden PWAs von Desktop -Versionen der meisten Browser unterstützt, einschließlich Microsoft Edge[5] (an Fenster) und Google Chrome[18] (unter Windows, Mac OS, Chrome OS und Linux).

Im Dezember 2020 hat Firefox für Desktop die Implementierung von PWAs aufgegeben (insbesondere den Prototyp entfernt ".ortsspezifischer Browser"Konfiguration, die als experimentelles Merkmal verfügbar war). Ein Firefox -Architekt stellte fest:" Das Signal, von dem ich hoffe, dass wir sie senden, ist, dass PWA -Unterstützung nicht so bald zu Desktop Firefox kommt. "[4] Mozilla plant immer noch, PWAS on Android zu unterstützen.[19]

App Stores

Da eine progressive Web -App eine Art von Art von ist Website oder Webseite bekannt als a InternetanwendungSie benötigen keine separate Bündelung oder Verteilung. Insbesondere besteht für Entwickler oder Benutzer keine Anforderung, die Web -Apps über digitale Vertriebssysteme wie zu installieren Apple App Store, Google Play, Microsoft Store oder Samsung Galaxy Store. In unterschiedlichem Maße unterstützen die Haupt -App -Stores die Veröffentlichung von PWAs.[1] Google Play, Microsoft Store,[20] und Samsung Galaxy Store unterstützt PWAs, der Apple App Store jedoch nicht. Microsoft Store veröffentlicht einige qualifizierende PWAs automatisch (auch ohne Anfrage der App -Autoren), nachdem sie sie über Erkenntnisse ermittelt haben Bing Indizierung.[21]

Eigenschaften

Progressive Web -Apps funktionieren alle an jedem Browser, der mit dem entsprechenden Einhaltung entspricht Webstandards. Wie bei anderen plattformübergreifenden Lösungen ist es das Ziel, Entwicklern dabei zu helfen, plattformübergreifende Apps leichter zu erstellen als mit nativen Apps.[15] Progressive Web -Apps verwenden die Progressive Enhancement Webentwicklungsstrategie.

Einige progressive Web -Apps verwenden einen architektonischen Ansatz namens App Shell -Modell.[22] In diesem Modell speichern Servicearbeiter die grundlegende Benutzeroberfläche oder "Hülse" des sich anpassendes Webdesign Webanwendung im Offline des Browsers Zwischenspeicher. Dieses Modell ermöglicht es PWAs, den nativen Gebrauch mit oder ohne Webkonnektivität zu erhalten. Dies kann die Ladezeit verbessern, indem sie eine bereitstellen anfänglicher statischer Rahmen, ein Layout oder eine Architektur, in die Inhalte sowohl schrittweise als auch dynamisch geladen werden können.[23]

Installierbarkeitskriterien

Die technischen Basiskriterien für eine Website, die als progressive Web-App betrachtet und daher von Browsern "installierbar" angesehen wird, wurden von Russell in einem Nachbeobachtungsbeitrag beschrieben[24] und aktualisiert seit:[25][26]

  • Stammen aus einem sicheren Ursprung. Serviert über Tls und haben keinen aktiven gemischten Inhalt. Progressive Web -Apps müssen über serviert werden Https Sicherheitsgröße, Sicherheit und Inhaltsauthentizität.
  • Registrieren Sie einen Servicearbeiter mit einem Fetch -Handler. Progressive Web -Apps müssen Service -Mitarbeiter verwenden, um programmierbare Inhalte -Caches zu erstellen. Im Gegensatz zu normalem HTTP Webcache, der den Inhalt nach der ersten Verwendung zwischengewertet und dann auf verschiedene Heuristiken angewiesen ist, um zu erraten, wann Inhalte nicht mehr benötigt werden, können programmierbare Caches Inhalte im Voraus explizit vorab vorlegen Vor Es wird zum ersten Mal benutzt und verworfen es explizit, wenn es nicht mehr benötigt wird.[27] Diese Anforderung hilft den Seiten, offline oder in Netzwerken von geringer Qualität zugänglich zu sein.
  • Verweisen Sie auf eine Web -App Manifest. Das Manifest muss mindestens die fünf wichtigsten Eigenschaften enthalten: Name oder kurzer Name, start_url, und Anzeige (mit einem Wert von eigenständige, ganzer Bildschirm oder minimal-ui), und Ikonen (mit 192px und einer 512px -Version). In Manifest enthaltene Informationen machen PWAs leicht über eine URL, die von Suchmaschinen entdeckt werden können, und lindert komplexe Installationsverfahren (PWAs können jedoch noch in einem Dritten aufgeführt werden Appstore).[28] Darüber hinaus unterstützt PWAs-Interaktionen und Navigation im App-App-Stil, einschließlich des Startbildschirms, Anzeige von Splashscreens usw.

Vergleich mit nativen Apps

2017, Twitter Veröffentlicht Twitter Lite, eine PWA -Alternative zum offiziellen Eingeborenen Android und iOS Apps. Laut Twitter konsumierte Twitter Lite nur 1-3% der Größe der nativen Apps. Im Juli 2019 hat Twitter standardmäßig alle Website -Benutzer auf Twitter Lite bedient.[29] Am 1. Juni 2020 deaktivierte Twitter das Layout der Legacy -Website und ließ die progressive Web -App -Version die einzige Option.[30]

Starbucks Bietet eine PWA, die zu 99,84% kleiner ist als die äquivalente iOS -App. Nach dem Einsatz seiner PWA verdoppelte Starbucks die Anzahl der Online -Bestellungen, wobei Desktop -Benutzer mit etwa dem gleichen Preis wie mobile App -Benutzer bestellten.[31]

Mehrere Unternehmen zeigen erhebliche Verbesserungen in einer Vielzahl von Vielfalt von Schlüsselleistungsindikatoren Nach der PWA -Implementierung, wie die zunehmende Zeit für Seite, Conversions oder Einnahmen.

Technologien

Es gibt viele Technologien, die häufig zum Erstellen progressiver Web -Apps verwendet werden. Eine Webanwendung wird als PWA angesehen, wenn sie "Installierbarkeitskriterien" erfüllt und somit offline funktionieren kann und dem Startbildschirm des Geräts hinzugefügt werden kann. Um diese Definition zu erfüllen, benötigen alle PWAs mindestens einen Servicearbeiter und ein Manifest.[32][33][34]

Manifest

Die Web -App manifestiert sich[35] ist ein W3c Spezifikation definieren a JSON-basiertes Manifest (normalerweise bezeichnet Manifest.json)[28] Entwicklern einen zentralisierten Ort zu bieten, um sie zu setzen Metadaten mit einer Webanwendung verbunden, einschließlich:

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

Diese Metadaten sind entscheidend, damit eine App neben nativen Apps zu einem Startbildschirm hinzugefügt wird.

iOS -Unterstützung

iOS Safari implementiert sich teilweise Manifests, während die meisten PWA-Metadaten über Apple-spezifische Erweiterungen der Meta-Tags definiert werden können. Mit diesen Tags können Entwickler die Anzeige des Vollbilds aktivieren, Symbole und Auftaktbildschirme definieren und einen Namen für die Anwendung angeben.[36][37]

WebAssembly

WebAssembly erlaubt vorkompiliert Code für einen Webbrowser mit nahezu nativem Geschwindigkeit.[38] So sind Bibliotheken in Sprachen wie geschrieben wie C kann zu Web -Apps hinzugefügt werden. Aufgrund der Kosten für die Übergabe von Daten von JavaScript an WebAssemblyKurzfristige Verwendungszwecke werden hauptsächlich zahlreiche (z. B. Spracherkennung und Computer Vision) als ganze Anwendungen sein.[zweifelhaft ]

Datenspeicher

Progressive Web-App-Ausführung Kontexte werden nach Möglichkeit entladen, so

Webspeicher

Webspeicher ist eine W3C-Standard-API, die den Schlüsselwertspeicher in modernen Browsern ermöglicht. Die API besteht aus zwei Objekten, SessionStorage (mit dem nur Sitzungsspeicher ausgelöscht wird, das das Ende der Browser-Sitzung ausgelöscht wird) und LocalStorage (der Speicher ermöglicht, der über Sitzungen hinweg anhält).[39]

Indexierte Datenbank -API

Die indizierte Datenbank -API ist eine W3C -Standard -Datenbank -API, die in allen wichtigen Browsern verfügbar ist. Die API wird von modernen Browsern unterstützt und ermöglicht die Speicherung von JSON Objekte und alle als Zeichenfolge dargestellten Strukturen.[40] Die indexierte Datenbank -API kann mit einer Wrapper -Bibliothek verwendet werden, die zusätzliche Konstrukte darstellt.

Servicearbeiter

Ein Dienstangestellter ist ein Webarbeiter Dies implementiert einen programmierbaren Netzwerkproxy, der auf Web/HTTP -Anforderungen des Hauptdokuments reagieren kann. Es ist in der Lage, die Verfügbarkeit eines Remote -Servers zu überprüfen und Inhalte zu speichern, wenn dieser Server verfügbar ist, und diesen Inhalt später im Dokument bereitzustellen. Servicearbeiter arbeiten wie alle anderen Webarbeiter getrennt vom Hauptdokumentkontext. Servicemänner können verarbeiten Mitteilungen Daten synchronisieren Sie Daten im Hintergrund, Cache oder Reliefressourcenanfragen, Abfangen -Netzwerkanfragen und empfangen zentralisierte Aktualisierungen unabhängig von dem Dokument, das sie registriert hat, auch wenn dieses Dokument nicht geladen ist.[41]

Servicearbeiter durchlaufen einen dreistufigen Lebenszyklus für Registrierung, Installation und Aktivierung. Bei der Registrierung wird der Browser mitgeteilt, dass der Standort des Serviceläers zur Vorbereitung auf die Installation vorbereitet ist. Die Installation tritt auf, wenn im Browser für das WebApp kein Servicearbeiter installiert ist oder wenn ein Aktualisierung des Servicemitarbeiter vorhanden ist. Die Aktivierung tritt auf, wenn alle Seiten der PWA geschlossen sind, so dass kein Konflikt zwischen der vorherigen und der aktualisierten Version besteht. Der Lebenszyklus trägt auch bei der Aufrechterhaltung der Konsistenz beim Wechsel zwischen Versionen von Service Worker bei, da nur ein einzelner Servicemitarbeiter für eine Domäne aktiv sein kann.[41]

Siehe auch

  • Google Lighthouse, ein Open-Source-Audit-Tool für PWAs, die von Google entwickelt wurden

Verweise

  1. ^ a b "Progressive Web Apps | Software AG". TechRadar.softwareag.com. Abgerufen 2020-09-25.
  2. ^ "Kann ich PWA verwenden?". Kann ich benutzen. Abgerufen 27. Januar 2021.{{}}: CS1 Wartung: URL-Status (Link)
  3. ^ "Ist Servicearbeiter fertig?". Jake Archibald.
  4. ^ a b c d e Newman, Jared (2021-01-26). "Firefox ist gerade von einem Schlüsselstück des offenen Netzes weggegangen". Schnelle Firma. Abgerufen 2021-01-27.
  5. ^ a b "Progressive Web -Apps unter Windows -Übersicht". Microsoft Edge -Dokumentation. 13. März 2021. Abgerufen 13. März 2021.
  6. ^ "Bring deine PWA auf". Vivaldi Browser. 2021-10-07. Abgerufen 2021-10-11.{{}}: CS1 Wartung: URL-Status (Link)
  7. ^ Firtman, Maximiliano (2020-08-18). "Progressive Web -Apps auf iOS sind hier". Mittel. Abgerufen 2021-01-29.
  8. ^ a b Ritchie, Rene (5. März 2018). "App Store Year Zero: Unsüßen Web -Apps fuhren das iPhone zu einem SDK". ich mehr. Abgerufen 23. Mai 2019.
  9. ^ "Die ursprüngliche Vision von Jobs für das iPhone: Keine nativen Apps von Drittanbietern". 9to5mac. 21. Oktober 2011. Abgerufen 22. Mai 2019.
  10. ^ Marcotte, Ethan. "Sich anpassendes Webdesign". Eine Liste auseinander. Abgerufen 25. Mai, 2010.
  11. ^ "Mozilla beendet kommerzielle Firefox OS -Entwicklung - Ghacks Tech News". Ghacks Technology News. 2016-09-27. Abgerufen 2022-05-05.
  12. ^ Hoffman, Chris; Pcworld | (2016-09-28). "Mozilla stoppt alle kommerziellen Entwicklung auf Firefox OS". PC Welt. Abgerufen 2021-03-17.
  13. ^ "Kaios, eine feature -Telefonplattform, die auf der Asche von Firefox OS basiert, fügt Facebook-, Twitter- und Google -Apps hinzu.". Techcrunch. Abgerufen 2021-03-17.
  14. ^ Russell, Alex. "Progressive Web -Apps: Es entkommen Registerkarten, ohne unsere Seele zu verlieren". Abgerufen 15. Juni, 2015.
  15. ^ a b c Evans, Jonny (26. Januar 2018). "Apple kehrt mit Web -Apps auf die Zukunft zurück". Computerwelt. Abgerufen 23. Mai 2019.
  16. ^ Ladage, Aaron (17. April 2018). "Progressive Web -Apps sind hier und ändern alles". Grad. Abgerufen 23. Mai 2019.
  17. ^ "Kann ich ... Supporttabellen für HTML5, CSS3 usw. verwenden". caniuse.com. Abgerufen 2021-05-16.
  18. ^ Lepage, Pete (4. Juni 2019). "Progressive Web -Apps auf dem Desktop". Google -Entwickler. Abgerufen 13. September 2019.
  19. ^ AGI90 (19. Dezember 2020). "Kommentar". Reddit. Wir haben keine Pläne, PWAs auf Mobilgeräten zu sonnen, die ich kenne.{{}}: CS1 Wartung: URL-Status (Link)
  20. ^ MSEDGETEAM. "Veröffentlichen Sie Ihre progressive Web -App im Microsoft Store - Microsoft Edge Development".. docs.microsoft.com. Abgerufen 2021-05-16.
  21. ^ "Die erste Stapel von Windows 10 Progressive Web Apps ist da". Windows Central. 2018-04-07. Abgerufen 2021-05-16.
  22. ^ "Das App -Shell -Modell".
  23. ^ Osmani, Addi. "Das App -Shell -Modell | Web -Grundlagen". Google -Entwickler. Abgerufen 23. Mai 2019.
  24. ^ Russell, Alex. "Was genau macht eine progressive Web -App". Abgerufen 18. Oktober, 2016.
  25. ^ "Was braucht es, um installierbar zu sein?". web.dev. Abgerufen 2021-05-19.
  26. ^ Google -Entwickler. "Progressive Web App". Abgerufen 15. Juni, 2015. {{}}: |last1= hat generischen Namen (Hilfe)
  27. ^ "Servicearbeiter Caching und HTTP Caching". web.dev. Abgerufen 2021-05-19.
  28. ^ a b W3c "Web App Manifest", Arbeitsentwurf, abgerufen am 12. September 2016
  29. ^ "Twitter beginnt die aktualisierte Website mit neuem Design". Makrumoren.
  30. ^ "Twitter warnt vor dem thematischen Thema der Legacy -Site, das am 1. Juni geschlossen wird.". Bleepingcomputer.
  31. ^ "12 beste Beispiele für progressive Web -Apps (PWAS) im Jahr 2021". SimicArt. 2021-02-22. Abgerufen 2021-05-16.{{}}: CS1 Wartung: URL-Status (Link)
  32. ^ "Entdeckbar". Mozilla Developer Network. Abgerufen 2017-04-24.
  33. ^ "Netzwerkunabhängiger". Mozilla Developer Network. Abgerufen 2017-04-24.
  34. ^ "Sofortiges Laden von Web -Apps mit einer Anwendungs ​​-Shell -Architektur". Google -Entwickler. Abgerufen 2017-04-24.
  35. ^ "Webmanifestdocs on mdn". MDN Web Docs.
  36. ^ "Was ist neu auf iOS 12.2 für progressive Web -Apps". Mittel. 27. März 2019.
  37. ^ "Webanwendungen konfigurieren". Safari -Webinhaltsleitfaden.
  38. ^ "Webassembly -Konzepte". Mdn. Abgerufen 14. August 2018.
  39. ^ "Web Storage API". Mdn. Abgerufen 14. August 2018.
  40. ^ "Konzepte hinter IndexedDB". Mdn. Abgerufen 14. August 2018.
  41. ^ a b "Einführung in den Service Worker | Web". Google -Entwickler. 1. Mai 2019. Abgerufen 23. Mai 2019.

Externe Links