Was ist eine PWA? | Progressive Web Apps

Progressive Web Apps sind im Grunde Webanwendungen, die in modernen Browsern zusätzliche Fähigkeiten erhalten. Durch Service Workers und ein Web App Manifest sind Progressive Web Apps installierbar und offline verfügbar.
Nach dem Wechsel zu einer PWA erreichte Twitter z.B. 65 % mehr Seiten pro Sitzung, 75 % mehr Tweets und ein Rückgang der Absprungrate um 20 %, während gleichzeitig die Größe ihrer Anwendung um über 97 % reduziert wurde.
Durch die Verwendung der neuesten Web-Features, die nativ-ähnliche Fähigkeiten und Zuverlässigkeit bieten, ermöglichen Progressive Web Apps mit nur einer Codebasis Cross-Plattform-Support und sind so auch auf Desktops und Tablets installierbar.
▸ Progressive Web Apps: web.dev/progressive-web-apps/
Die im Video verwendeten Emojis wurden von OpenMoji entworfen - dem Open-Source-Emoji- und Icon-Projekt. Lizenz: CC BY-SA 4.0
▸ OpenMoji Website: openmoji.org/
▸ CC BY-SA 4.0 Website: creativecommons.org/licenses/...
▬ Online-Kurs ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▸ Responsive Webdesign mit HTML, CSS, Bootstrap und Tailwind: shop.heise-academy.de/respons...
▬ Social Media ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▸ Twitter: / fabianhiller
▸ LinkedIn: / fabianhiller
▸ GitHub: github.com/fabian-hiller
▸ Instagram: / fabian.hiller
▬ Weitere Links ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▸ Impressum: www.sifa-digital.de/impressum/

[@christophsinging]

Deine gemächliche Sprechweise irritiert - aber nur im ersten Moment. Du erklärst alles und gut verständlich, ich habe mir vieles auf Anhieb merken können. Ein Best Practice-Beispiel dafür wie man Wissen stressfrei und nachhaltig vermittelt. Danke dafür! 😀

[@FabianHiller]

Vielen Dank!

[@josic.1504]

Sehr verständlich erklärt! 👍

[@FabianHiller]

Vielen Dank für dein Kommentar 😃

[@Methos121]

Danke sehr, für die super Zusammenfassung. Das hat mir wirklich weiter geholfen.

[@FabianHiller]

Vielen Dank für deine Feedback!

[@psychedelic-chi]

Danke für die Infos!

[@jetlag1975]

Gute informative Erklärung. Vielen Dank!

[@FabianHiller]

Vielen Dank!

[@reneheimsch7504]

Super informativ, vielen Dank :-)

[@FabianHiller]

Danke!

[@philipph9064]

Top!

[@FabianHiller]

Vielen Dank!

[@dominicdominik1375]

Gut erklärt. Musste die Wiedergabegeschwindigkeit allerdings auf 1,5 setzen.

[@FabianHiller]

Hey Dominic, vielen Dank für dein Feedback!

[@f_w_]

Zum Beispiel Flughafen App: Wenn Nutzer nicht bereit sind eine App zu installieren, warum sollten sie dann eine PWA installieren? Inwiefern unterscheidet sich der Downloadprozess bzw. was spricht gegen einen temporären Download der App? Wie sieht es mit dem Speicherplatz bei PWA und Apps aus?

[@naheliegend5222]

Am Anfang sagst du, dass die Browserleiste in den PWAs nicht sichtbar ist und das alles im Hintergrund abläuft, aber twitter.com und co sind einfach ganz normale Webapps mit URL-Leiste etc. Habe ich irgendwas nicht verstanden?

[@FabianHiller]

Du kannst mit einem modernen Browser PWAs installieren oder zum Home Screen hinzufügen. Öffnest du darüber dann die Website, kann sie ohne URL-Leiste angezeigt werden.

[@nasenbar5417]

bin anwendungsentwickler und mach nen kurs bei der developer akademie bin dir megadankbar da wie ich das bisher sehe wenig über pwas gesprochen wird...allerdings über angular, ist es mit angular mögich, eine pwa zu erstellen? lg aus bayern

[@sedapramheda4922]

Du sagst die ganze Zeit, dass man die PWA über den Browser installiert. Aber man kann sie doch trotzdem auch über einen Store wie den PlayStore installieren, oder?

[@FabianHiller]

Nein, eine PWA ist üblicherweise nicht im Store verfügbar. Jedoch ist es möglich aus einer PWA eine TWA zu erstellen. Diese kann dann in den PlayStore geladen werden.

[@AsimYilan]

Danke für die nette Art dieser Infos. Hast oder machst Du auch einen Video dazu wie man schritt für schritt einen Webapp erstellt. Also worauf man achten muss, vom Manifest bis zur Installation auf dem Handy usw. Ich danke schon einmal um voraus

[@FabianHiller]

Das ist eine gute Idee. Aktuell habe ich noch ein paar Videos in der Pipeline. Daher kann es noch eine ganze Weile dauern, bis zu diesem Thema ein Video erscheint.

[@AsimYilan]

@@FabianHiller hört sich gut an aber meiner Meinung wäre es besser du deine rating wenn du es hervor ziehen könntest, denn viele andere meiner freunde haben auch danach gesucht und es gibt kein video dazu. Zumindestens wurde keins in meinem Kreis gefunden. Wenn man der erste mit diesem Video ist sahnt man auch richtig ab als erster. Das ist aber nur meine Beobachtung und Meinung

[@FabianHiller]

Ich werde schauen, was ich tun kann. 👍🏼 Nutzt du ein JavaScript Framework? Falls ja, kann ich dir bis dahin hier über die Kommentare ein paar Tipps geben.

[@AsimYilan]

@@FabianHiller als Framework nutze ich nur im CSS den Bootstrap aber auch das werde ich ab nächstes Jahr nicht mehr nutzen. Bin eher der nativ schreibende. Wenn du da mir schon einmal unter die Arme greifen könntest wäre das echt nett. Mein Sohn hat nämlich einen Taschenrechner programmiert und der will das gerne als WebApp auf meinen Server stellen

[@FabianHiller]

Der erste Tipp ist Lighthouse in den Chrome DevTools zu öffnen und einen Bericht zu erstellen. Dieser gibt auch Aufschlüsse über alle fehlenden Schritte zu einer PWA. Ein weiterer Tipp ist der folgende Link: web.dev/progressive-web-apps/

[@waldemarbauer8282]

HI, habe eine php website. Kann ich die in eine pwa umwandeln? Danke

[@FabianHiller]

Nein, das funktioniert leider nicht. PHP kann nicht einfach zu JavaScript umgewandelt werden und JavaScript ist erforderlich, um Logik im Browser auszuführen.

[@waldemarbauer8282]

@@FabianHiller danke. Also die Seite besteht aus php, javascript und css (skript). Dann würde das wohl eher gehen, oder? Bloß weiß ich nicht genau welche Dinge in javascript codiert sind.

[@FabianHiller]

PHP kann nicht einfach so zu JavaScript umwandelt werden. Ich würde dir empfehlen, deine Webseite umzuschreiben oder neu zu entwickeln und einzelne Dinge von der Alten zu übernehmen.

[@psychedelic-chi]

@@FabianHiller Ne PWA kann doch aber mit dem Server kommunizieren, sprich Inhalte vom Server erhalten, warum soll PHP da dann ein Problem darstellen? Dachte die PWA ist nur im frontend auf JS HTML CSS angewiesen.

[@FabianHiller]

Ja, da hast du Recht.

[@jupiter_ios]

pwa ist dieser countryball typ

[@andreas291169]

Gut erklärt. Bin auf PWA durch die Säuberungen von Big Tech aufmerksam geworden. kzbin.info/www/bejne/f3zdh6VtaZx4iZI

[@FabianHiller]

Vielen Dank!

[@StijnHommes]

Ein PWA is complettes Unsinn. Dar. Nur 3 Sekunden ohne " wasted time".