- Was sind Progressive Web Apps?<\/a><\/li>
- Schattenseiten von Progressive Web Apps<\/a><\/li>
- So baut man eine Progressive Web App<\/a>
- manifest.json konfigurieren<\/a><\/li>
- Service Worker erstellen<\/a><\/li>
- PWA debuggen<\/a><\/li><\/ul>
- Fazit<\/a><\/li><\/ul><\/li><\/div>
<\/div>\n\n\n\nIn den letzten Jahren hat die mobile Nutzung des Internets die Desktop-Nutzung \u00fcberholt (offizielle statista Zahlen<\/a>). Die meisten Menschen greifen heutzutage auf das Internet \u00fcber ihre mobilen Ger\u00e4te zu. Infolgedessen haben sich die Anforderungen an die Entwicklung mobiler Anwendungen ge\u00e4ndert. Progressive Web Apps (PWA) sind eine der L\u00f6sungen, die sich in diesem Bereich entwickelt haben. <\/p>\n\n\n\n
Was sind Progressive Web Apps?<\/h2>\n\n\n\n
Kurz gesagt, sind Progressive Web Apps eine Art von mobilen Anwendungen, die auf einer Website basieren. Aber was bedeutet das eigentlich? Ganz einfach: Eine PWA ist eine mobile Anwendung, die du \u00fcber den Browser auf deinem mobilen Ger\u00e4t aufrufen kannst. Im Gegensatz zu nativen Apps musst du keine separate Anwendung herunterladen und installieren.<\/p>\n\n\n\n
Aber hier wird es interessanter: Eine PWA hat fast alle Funktionen und Vorteile einer nativen App. Das bedeutet, dass du auf Hardware-Funktionen deines Ger\u00e4ts wie die Kamera oder den GPS zugreifen und Push-Benachrichtigungen empfangen kannst. Das Beste daran ist, dass PWAs auf jedem Ger\u00e4t und in jedem Browser funktionieren – ob iOS oder Android, Chrome oder Safari (es gibt nat\u00fcrlich Ausnahmen<\/a>).<\/p>\n\n\n\n
Und jetzt kommt das Beste: PWAs k\u00f6nnen auch offline funktionieren! Das bedeutet, dass du sie auch ohne Internetverbindung nutzen kannst. Stell dir vor, du bist unterwegs und hast keine mobile Datenverbindung oder WLAN zur Verf\u00fcgung. Kein Problem, wenn du eine PWA nutzt – sie funktioniert trotzdem!<\/p>\n\n\n\n
Du fragst dich jetzt wahrscheinlich, wie das m\u00f6glich ist. Nun, PWAs nutzen einen Cache, um die Anwendung auf deinem Ger\u00e4t zu speichern. Wenn du sie zum ersten Mal besuchst, l\u00e4dt der Browser die Anwendung und speichert sie im Cache. Wenn du das n\u00e4chste Mal die Anwendung \u00f6ffnest, ruft der Browser die Anwendung aus dem Cache ab. Das macht die Ladezeiten viel schneller als bei nativen Apps.<\/p>\n\n\n\n
Und noch ein weiterer Vorteil: Da PWAs auf einer Website basieren, sind sie auch einfacher zu aktualisieren. Entwickler k\u00f6nnen einfach eine neue Version der Anwendung auf dem Server bereitstellen, und die \u00c4nderungen werden automatisch auf deinem Ger\u00e4t angezeigt. Du musst nicht jedes Mal eine neue Version der App herunterladen und installieren.<\/p>\n\n\n\n
Zusammenfassend k\u00f6nnen wir sagen, dass PWAs die Vorteile von nativen Apps und Websites kombinieren und das Beste aus beiden Welten bieten. Sie bieten eine optimierte Benutzererfahrung, schnelle Ladezeiten, Offline-Funktionalit\u00e4t und k\u00f6nnen auf jedem Ger\u00e4t und in jedem Browser genutzt werden. Klingt doch ziemlich cool, oder?<\/p>\n\n\n\n
Schattenseiten von Progressive Web Apps<\/h2>\n\n\n\n
Obwohl Progressive Web Apps viele Vorteile bieten, gibt es auch einige Nachteile, die man beachten sollte:<\/p>\n\n\n\n
- \n
- Eingeschr\u00e4nkte Zugriffsm\u00f6glichkeiten:<\/strong> Da PWAs im Browser ausgef\u00fchrt werden, haben sie eingeschr\u00e4nkte Zugriffsm\u00f6glichkeiten auf bestimmte Funktionen und Hardware des Ger\u00e4ts, wie beispielsweise Kamera, Kontakte oder das Betriebssystem selbst. Daher kann es schwierig sein, bestimmte Funktionen in einer PWA zu implementieren, die in einer nativen App verf\u00fcgbar sind.<\/li>\n\n\n\n
- Eingeschr\u00e4nkte Unterst\u00fctzung von Push-Benachrichtigungen:<\/strong> Obwohl PWAs in der Lage sind, Push-Benachrichtigungen zu unterst\u00fctzen, ist ihre Unterst\u00fctzung in einigen Browsern noch begrenzt. Dies kann dazu f\u00fchren, dass Benutzer keine Benachrichtigungen von der Anwendung erhalten oder dass diese mit Verz\u00f6gerung ankommen.<\/li>\n\n\n\n
- Begrenzte Funktionalit\u00e4t bei \u00e4lteren Browsern:<\/strong> Ein weiterer Nachteil von PWAs ist, dass sie m\u00f6glicherweise nicht auf \u00e4lteren Browsern oder Ger\u00e4ten funktionieren. Die Verwendung von neueren Technologien und APIs kann dazu f\u00fchren, dass PWAs nicht auf \u00e4lteren Ger\u00e4ten oder Browsern ordnungsgem\u00e4\u00df funktionieren.<\/li>\n\n\n\n
- Einschr\u00e4nkungen bei der Speicherung von Daten:<\/strong> PWAs k\u00f6nnen Daten auf dem Ger\u00e4t speichern, aber der Speicherplatz ist begrenzt und die Speicherung ist nicht so flexibel wie in nativen Apps. Das kann dazu f\u00fchren, dass einige Funktionen, die viel Speicherplatz ben\u00f6tigen, in einer PWA nicht implementiert werden k\u00f6nnen.<\/li>\n<\/ol>\n\n\n\n
Insgesamt sind die Nachteile von PWAs im Vergleich zu den Vorteilen relativ gering. Bei der Entwicklung einer PWA sollten die Einschr\u00e4nkungen und M\u00f6glichkeiten der Technologie ber\u00fccksichtigt werden, um sicherzustellen, dass die Anwendung auf jedem Ger\u00e4t und in jedem Browser ordnungsgem\u00e4\u00df funktioniert.<\/p>\n\n\n\n
So baut man eine Progressive Web App<\/h2>\n\n\n\n
Wenn du WordPress nutzt bist du schnell fertig: Installiere das PWA Plugin<\/a> und in wenigen Minuten ist aus deiner normalen Website eine tolle PWA geworden.<\/p>\n\n\n\n
Meine Auswahl der besten kostenlosen WordPress Plugins<\/a> findest du \u00fcbrigens hier.<\/p>\n\n\n\n
So einfach ist es allerdings nicht immer. Zum Erstellen einer PWA geh\u00f6rt doch noch etwas mehr dazu. Eine PWA besteht aus zwei Grundlegenden Teilen: der manifest.json<\/strong> und dem Service Worker<\/strong>.<\/p>\n\n\n\n
manifest.json konfigurieren<\/h3>\n\n\n\n
Um die manifest.json<\/em> auf deiner Website einzubinden muss folgende Zeile im
head<\/code> eingebunden werden:<\/p>\n\n\n\n<link rel=\"manifest\" href=\"\/manifest.json\"><\/pre>\n\n\n\n
Diese Datei enth\u00e4lt alle ben\u00f6tigten Informationen \u00fcber deine Website, hier ein Beispiel:<\/p>\n\n\n\n
{\n \"short_name\":\"webdeasy.de\",\n \"name\":\"webdeasy.de\",\n \"icons\":[\n {\n \"src\":\"\/images\/logo-512.svg\",\n \"type\":\"image\/svg+xml\",\n \"sizes\":\"512x512\"\n },\n {\n \"src\":\"\/images\/logo-192.png\",\n \"type\":\"image\/png\",\n \"sizes\":\"192x192\"\n },\n {\n \"src\":\"\/images\/logo-512.png\",\n \"type\":\"image\/png\",\n \"sizes\":\"512x512\"\n }\n ],\n \"start_url\":\"\/index.html\",\n \"background_color\":\"#3d50a7\",\n \"display\":\"standalone\",\n \"theme_color\":\"#3d50a7\",\n \"description\":\"Your IT-Blog\"\n}<\/pre>\n\n\n\nWas genau die einzelnen Parameter bedeuten und welche es noch gibt, kannst du in der manifest.json Dokumentation<\/a> nachlesen. Ich m\u00f6chte dir hier nur zeigen, wie einfach man eine grundlegende PWA erstellen kann.<\/p>\n\n\n\n
Service Worker erstellen<\/h3>\n\n\n\n
Die komplette Logik deiner PWA befindet sich im Service Worker, welche du ins Root-Verzeichnis deiner Website legen solltest. So kann er beispielsweise Daten aus dem Cache liefern, selbst wenn der Nutzer offline ist. Der Service Worker erm\u00f6glicht auch das Senden von Push-Benachrichtigungen und das Aktualisieren der App im Hintergrund, ohne dass der Nutzer die Seite neu laden muss.<\/p>\n\n\n\n
Einzubinden ist der Service Worker wie auch die manifest.json<\/em> im HTML
head<\/code> deiner Website:<\/p>\n\n\n\n<script>\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker\n .register('service-worker.js')\n .then(function (reg) {\n console.log('Registration successful: ' + reg.scope);\n })\n .catch(function (err) {\n console.error('Registration failed: ' + err);\n });\n }\n<\/script><\/pre>\n\n\n\nDer Service Worker kann auf Events reagieren, so kannst du beispielsweise das
install<\/code> oderactivate<\/code> Event abfangen:<\/p>\n\n\n\n\/\/ service-worker.js\n\nself.addEventListener(\"install\", event => {\n console.log(\"Service worker installed\");\n});\n\nself.addEventListener(\"activate\", event => {\n console.log(\"Service worker activated\");\n});<\/pre>\n\n\n\nWas du dann in den Callback Funktionen machst, ist dann nat\u00fcrlich abh\u00e4ngig von deiner WebApp.<\/p>\n\n\n\n
Wenn du die PWA lokal testest wird dieser Fehler bei dir auftauchen:<\/p>\n\n\n\n
![\"Registration](\"https:\/\/webdeasy.de\/wp-content\/uploads\/2023\/04\/image.png\")
<\/a>„Registration failed: TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin (’null‘) is not supported.“<\/figcaption><\/figure>\n\n\n\n Das liegt daran, dass die HTML-Datei nicht statisch aufgerufen wird, sondern \u00fcber einen Server ausgeliefert wird. Wenn du Visual Studio nutzt kannst du einen Live-Server \u00fcber diese LiveServer Extension<\/a> starten.<\/p>\n\n\n\n
Sind keine Fehler in der manifest.json vorhanden sollte dieser Button auftauchen, um die PWA zu installieren.<\/p>\n\n\n\n
![\"Google](\"https:\/\/webdeasy.de\/wp-content\/uploads\/2023\/04\/pwa-browser-bar.png\")
<\/a>Google Chrome Browser: PWA installieren<\/figcaption><\/figure>\n\n\n\n PWA debuggen<\/h3>\n\n\n\n
\u00dcber den „Application“ Tab in deinen Dev Tools l\u00e4sst sich eine PWA debuggen.<\/p>\n\n\n\n
![\"PWA](\"https:\/\/webdeasy.de\/wp-content\/uploads\/2023\/04\/image-1.png\")
<\/a>PWA debuggen<\/figcaption><\/figure>\n\n\n\n - Eingeschr\u00e4nkte Unterst\u00fctzung von Push-Benachrichtigungen:<\/strong> Obwohl PWAs in der Lage sind, Push-Benachrichtigungen zu unterst\u00fctzen, ist ihre Unterst\u00fctzung in einigen Browsern noch begrenzt. Dies kann dazu f\u00fchren, dass Benutzer keine Benachrichtigungen von der Anwendung erhalten oder dass diese mit Verz\u00f6gerung ankommen.<\/li>\n\n\n\n
- Service Worker erstellen<\/a><\/li>
- Schattenseiten von Progressive Web Apps<\/a><\/li>