{"id":8217,"date":"2019-08-29T15:00:04","date_gmt":"2019-08-29T13:00:04","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=8217"},"modified":"2023-06-18T18:23:23","modified_gmt":"2023-06-18T16:23:23","slug":"progressive-web-apps-wer-braucht-noch-eine-native-app","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/","title":{"rendered":"Progressive Web Apps \u2013 Wer braucht noch eine native App?"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/FoIotNyhoiHkShiHEDwuxaYO8wlDblnvbUuttl2X-YYLjMD4ekLwsr0k571rxiAY_G0KPMSfFxzmEeTdwiE12qpl3OnOqZYWw9KRRXrsCqztyfFG_DvPpTqKWi3ndMWEbHYXKVp_QAg\" alt=\"\" \/><figcaption><br><br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Beispiele zum Einstieg<\/strong><\/h2>\n\n\n\n<p style=\"text-align:justify\">Progressive Web Apps sind schon weiter verbreitet wie man denkt. Auch gro\u00dfe, innovative Unternehmen Twitter, Airbnb, Spotify oder Tinder setzen auf Progressive Web Apps. <br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/7Eou9f7l2jM8snR4ugepe6NLJc5bjfIDUfAlVurKhUPwYgIffCaKjwjt8X3fUwgdMTc2_bEgY8GX6CIfqC4BEjQGGk7Bo_SrdVRPZ2tUSdt7GYvRDtLM7u3wFxcVL7oGGG-3fPwZ\" alt=\"\" \/><\/figure>\n\n\n\n<p style=\"font-weight: 400;text-align:center\" class=\"has-small-font-size\">Abb. 1:  Eine Auswahl von Progressive Web Apps [1]<\/p>\n\n\n\n<p style=\"text-align:justify\"><br>Wer sich ein tolles Beispiel anschauen m\u00f6chte, dem empfehle ich <a href=\"https:\/\/riorun.theguardian.com\/\">https:\/\/riorun.theguardian.com\/<\/a> (auf mobile) zu testen. Nach einiger Zeit erscheint ein Popup, das fragt, ob man die App zum Startbildschirm hinzuf\u00fcgen m\u00f6chte. Best\u00e4tigt man diese Abfrage, wird die PWA im Hintergrund auf dem Ger\u00e4t installiert und ist ab sofort wie jede andere App auf dem Ger\u00e4t verf\u00fcgbar.<br><br><\/p>\n\n\n\n<ul class=\"wp-block-gallery aligncenter columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" data-attachment-id=\"8346\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/1-2\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/1.png\" data-orig-size=\"720,1280\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/1-576x1024.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/1-576x1024.png\" alt=\"\" data-id=\"8346\" data-link=\"https:\/\/blog.mi.hdm-stuttgart.de\/?attachment_id=8346\" class=\"wp-image-8346\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/1-576x1024.png 576w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/1-169x300.png 169w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/1.png 720w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" data-attachment-id=\"8347\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/attachment\/2\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/2.png\" data-orig-size=\"720,1280\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/2-576x1024.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/2-576x1024.png\" alt=\"\" data-id=\"8347\" data-link=\"https:\/\/blog.mi.hdm-stuttgart.de\/?attachment_id=8347\" class=\"wp-image-8347\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/2-576x1024.png 576w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/2-169x300.png 169w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/2.png 720w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" data-attachment-id=\"8348\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/attachment\/3\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/3.png\" data-orig-size=\"720,1280\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/3-576x1024.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/3-576x1024.png\" alt=\"\" data-id=\"8348\" data-link=\"https:\/\/blog.mi.hdm-stuttgart.de\/?attachment_id=8348\" class=\"wp-image-8348\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/3-576x1024.png 576w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/3-169x300.png 169w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/3.png 720w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"1280\" data-attachment-id=\"8349\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/attachment\/4\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/4.png\" data-orig-size=\"720,1280\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"4\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/4-576x1024.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/4-576x1024.png\" alt=\"\" data-id=\"8349\" data-link=\"https:\/\/blog.mi.hdm-stuttgart.de\/?attachment_id=8349\" class=\"wp-image-8349\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/4-576x1024.png 576w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/4-169x300.png 169w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/4.png 720w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" data-attachment-id=\"8350\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/attachment\/5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/5.png\" data-orig-size=\"720,1280\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"5\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/5-576x1024.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/5-576x1024.png\" alt=\"\" data-id=\"8350\" data-link=\"https:\/\/blog.mi.hdm-stuttgart.de\/?attachment_id=8350\" class=\"wp-image-8350\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/5-576x1024.png 576w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/5-169x300.png 169w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/5.png 720w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"576\" height=\"1024\" data-attachment-id=\"8351\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/attachment\/6\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/6.png\" data-orig-size=\"720,1280\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"6\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/6-576x1024.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/6-576x1024.png\" alt=\"\" data-id=\"8351\" data-link=\"https:\/\/blog.mi.hdm-stuttgart.de\/?attachment_id=8351\" class=\"wp-image-8351\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/6-576x1024.png 576w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/6-169x300.png 169w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/6.png 720w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/figure><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"8354\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/7-2\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/7-1.png\" data-orig-size=\"720,1280\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"7\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/7-1-576x1024.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/7-1-576x1024.png\" alt=\"\" class=\"wp-image-8354\" width=\"288\" height=\"512\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/7-1-576x1024.png 576w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/7-1-169x300.png 169w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/7-1.png 720w\" sizes=\"auto, (max-width: 288px) 100vw, 288px\" \/><\/figure><\/div>\n\n\n\n<p style=\"font-weight: 400;text-align:center\" class=\"has-small-font-size\">Abb. 2:  Rio Run App von the Guardian [2]<\/p>\n\n\n\n<p>Weitere tolle PWAs finden sich auf den \u00dcbersichtsseiten von:<br><a href=\"https:\/\/pwa.rocks\/\">https:\/\/pwa.rocks\/<\/a><br><a href=\"https:\/\/progressivewebapproom.com\/\">https:\/\/progressivewebapproom.com\/<\/a><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Historische Entwicklung<\/h2>\n\n\n\n<p style=\"text-align:justify\">Kurz nach der Einf\u00fchrung des ersten iPhones hatte Steve Jobs schon die n\u00e4chste Vision f\u00fcr sein Schmuckst\u00fcck. F\u00fcr ihn war nicht das Ger\u00e4t an sich, viel mehr der Browser, der Hafen zum Tor der neuen Welt. Seiner Vision nach, sollte ein Smartphone bestenfalls nur noch einen Browser beinhalten. Entwickler k\u00f6nnen Apps \u00fcber das Web bereitstellen, die sich vollst\u00e4ndig in Safari integrieren lassen und sich selbstst\u00e4ndig im Hintergrund updaten. [3]. Die Idee ist gut, allerdings, typisch Jobs, ihrer Zeit voraus. Die Erfolgsgeschichte des iPhones zwang Apple an den Rand der Kapazit\u00e4ten, so dass vermutet werden kann, dass Apple schlichtweg keine Zeit und Ressourcen hatte das Thema PWA weiter zu verfolgen. Mit der Masse an Apps, die in den Store drang, hatte man mehr als genug zu tun. Die ersten, die nach Steve Jobs das Thema wieder aufgegriffen haben, waren Mozilla, mit der Ver\u00f6ffentlichung des FirefoxOS im Jahr 2013. Ein Betriebssystem, das es erm\u00f6glicht Web Apps als native Apps auf dem Endger\u00e4t laufen zu lassen. [3] In den Jahren 2006-2013 hat sich auch sonst viel getan: Endger\u00e4te haben unfassbar an Performance gewonnen, die Webentwicklung hat JQuery und PHP hinter sich gelassen. Neue M\u00f6glichkeiten, neue Frameworks und ausgefuchste CSS-Kniffe erm\u00f6glichen seitdem eine v\u00f6llig neue Form der User Experience im Web. Und Web? An wen denken wir da im Web? Genau, Google! Und Google hat ein Problem: Auch wenn sie selbst einen App Store betreiben und sich Kniffe haben einfallen lassen, wie sich Apps indexieren lassen, ist eine native App nicht in der Form auswertbar f\u00fcr ihre Suchmaschine, wie der Content einer Website. So fordert Alex Russells, Chrome Engineer bei Google, im Jahr 2015, die Einf\u00fchrung von <em>Progressive Web Apps (PWA)<\/em>, eine Kombination aus aktueller Web Technologie mit den modernsten M\u00f6glichkeiten des Browsers [3]. Mit geschicktem Marketing und einer gro\u00dfen User-base \u00fcberzeugte Google nun auch Apple wieder an dem Thema zu arbeiten, die 2017 mit der Unterst\u00fctzung vom PWAs in Safari gleichzogen, komplettiert von Microsoft, dem schlafenden Giganten, der 2018 vollen Support f\u00fcr PWAs im Edge Browser verk\u00fcndete [4]. Somit ist das gro\u00dfe Trio vollends am Start und einer Erfolgsgeschichte von PWAs steht nichts mehr im Wege!<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Was bedeutet Progressive Web App?<\/strong><\/h2>\n\n\n\n<p style=\"text-align:justify\">Vom Naming her leitet sich <em>Progressive Web App<\/em> von Web Apps mit Progressive Enhancement ab. Aber wo liegt da die Innovation? Bei der Entwicklung einer Web App denkt man heute an gro\u00dfe Frameworks wie Angular, React, Vue und neueste Browser APIs wie die Geolocation API und viele mehr. Das ist auch bei einer PWA alles einsetzbar, denn <strong>Achtung<\/strong>: Eine PWA unterliegt keinem Framework und schlie\u00dft auch kein Framework aus. Die Limitierung besteht lediglich durch die Gegebenheiten des Browsers. <br><br>Progressive Enhancement, zu deutsch <em>progressive Verbesserung<\/em>, beschreibt den Content-First Ansatz. Ziel dieser Optimierung ist es, dass der First-Meaningful-Paint beim Aufbau einer Seite m\u00f6glichst fr\u00fch geschieht. Sprich Content zuerst und weitere Layer wie Skripte, Style und Multimedia Files, werden nach und nach, je nach Netzwerkverbindung geladen und aufgebaut. Das ist aber keine Neuheit, die im Zuge von PWAs entstanden ist, sondern ein Ergebnis der letzten Jahre der Webentwicklung, Suchmaschinen- und User Experience-Optimierung.<\/p>\n\n\n\n<p style=\"text-align:justify\">Zusammengefasst l\u00e4sst sich sagen, der Begriff Progressive Web App weist nicht auf die wahre Innovation hin. Web Apps, moderne Browser APIs und progressiver Aufbau wurden nicht mit PWAs erfunden. Frances Berriman, einer der Mitbegr\u00fcnder bei Google geht sogar so weit zu sagen: <em>\u201cThe name isn\u2019t for you&#8230; The name is for your boss, for your investor, for your marketeer.\u201d [5]&nbsp;<\/em><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Worin liegt die Innovation?<\/strong><\/h2>\n\n\n\n<p style=\"text-align:justify\">Um auf die wahre Innovation hinter PWAs zu kommen, m\u00fcssen wir zun\u00e4chst die aktuellen Probleme in der Bereitstellung von Web Apps und nativen Apps betrachten. Web Apps sind eine tolle Sache, aber auf der gesch\u00e4ftlichen Seite fragt man sich, wie man den Benutzer an den Service binden kann. Soll man den Benutzer dazu auffordern, Lesezeichen im Browser zu machen, Social Media Aktivit\u00e4ten zu verfolgen oder soll man eine weitere App entwickeln, die im Store ausgeliefert wird? Das alles erfordert zus\u00e4tzliche Motivation beim Benutzer, den Content oder Service zu konsumieren und, auch wenn kein Medienbruch erfolgt, liegt an jeder Stelle der Customer Journey eine kleine Abbruchrate (Bounce Rate) vor. Es gibt auch Hinweise die best\u00e4tigen, dass die Downloadzahlen aus den App Stores immer kleiner werden, wobei der Traffic im Internet weiter zunimmt [6]. Dort ist der User und dort will er auch abgeholt werden. Was ist also naheliegender, als den Content, den man sowieso schon \u00fcber das Web bereitstellt, f\u00fcr den Kunden dauerhaft zur Verf\u00fcgung zu stellen? Ohne \u00fcberfl\u00fcssige Zwischenschritte in der Customer Journey? Das l\u00e4sst sich zwar mit Web Apps realisieren, aber wenn der Benutzer keine Internetverbindung hat, klingelt auch bei den Entwicklern nichts in der Kasse. <br>Auch native Apps bringen ihre Probleme auf der gesch\u00e4ftlichen Seite mit. Hohe Entwicklungskosten und straffe Anforderungen der Store Betreiber, sorgen regelm\u00e4\u00dfig f\u00fcr Frust und lange N\u00e4chte beim Release des n\u00e4chsten Updates. Payment-Optionen werden vordiktiert, undurchsichtige Indexierungen der Store Eintr\u00e4ge erlauben keine freien Produktplatzierungen und Marketing. Wie soll man da aus der Masse an Apps herausstechen und sein eigenes Produkt sinnvoll bewerben? Von den Geb\u00fchren die Apple und Google beim App-Kauf abkassieren, mal ganz abgesehen. Neben der undurchsichtigen Indexierung ist auch die Auffindbarkeit au\u00dferhalb der App Stores problematisch. Zwar lassen sich Apps inzwischen in Suchmaschinen auffinden, werden aber vom Content her nicht so von Web Crawler erfasst, wie herk\u00f6mmliche Websites. Keine direkte Indexierung bedeutet eine lange Customer Journey bis ein Kunde das Produkt entdeckt und das bedeutet hohe Kosten.&nbsp;<br><\/p>\n\n\n\n<p style=\"text-align:justify\">Diesen Punkten versucht eine PWA entgegenzuwirken. Eine PWA kann online und offline, barrierefreie konsumiert werden. Der Zwang einer App-Installation ist nicht erforderlich, der Kunde kann den Content zun\u00e4chst \u00fcber das Web auffinden und konsumieren und sich jederzeit impulsiv f\u00fcr eine App-Installation entscheiden.&nbsp;<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Technik &amp; Funktionsweise<\/strong><\/h2>\n\n\n\n<p style=\"text-align:justify\">Eine PWA funktioniert grunds\u00e4tzlich wie eine gew\u00f6hnliche Web App. Man kann jede Web App als Basis nehmen, erweitert um Manifest, Service Worker und App Icon. Wichtig zu wissen ist, dass eine PWA nur mit https funktioniert und sie sich auch nur installieren l\u00e4sst, wenn die Verbindung \u00fcber https gesichert wurde. Dieser Zwang ist ein willkommener Vorteil, der ein bisschen Sicherheit ins World Wide Web bringt.&nbsp;<\/p>\n\n\n\n<p style=\"text-align:justify\">Die nachfolgende \u00dcbersicht zeigt einen schematischen Aufbau und Zusammenh\u00e4nge. In den nachfolgenden Abschnitten schauen wir uns die einzelnen Elemente im Detail an.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/F7Z06iyQ8Dabs3_aZ7m5kefdaTxS4An-kJ8uUQoMsMYI8fp1UFb2t-0fndekJ7fGFmCLRN7Cz65CvKJdZnG4Rn8XgETYGu2dS_z_XBw8-qAOACSa2pacPB9XYA1efq48TjUr8dNF\" alt=\"\" \/><\/figure>\n\n\n\n<p style=\"font-weight: 400;text-align:center\" class=\"has-small-font-size\">Abb. 3:  Funktionsweise und Aufbau von PWAs [9]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><br><\/strong><strong>Manifest<\/strong><\/h3>\n\n\n\n<p style=\"text-align:justify\">Das Manifest liefert die, f\u00fcr die Installation der App, notwendigen Metadaten. Es muss per Link-Element in den Head des HTML-Dokuments eingebunden werden. In Json formatiert liefert es u.a.:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>App Name<\/li><li>App Beschreibung<\/li><li>App Icon in versch. Aufl\u00f6sungen f\u00fcr versch. Endger\u00e4te und Browser<\/li><li>Informationen bzgl. des Urhebers<\/li><li>App-Scope<\/li><li>Start Modus<\/li><\/ul>\n\n\n\n<p>Eine vollst\u00e4ndige Liste aller m\u00f6gliche Attribute findet sich hier:<br><a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/Manifest\">https:\/\/developer.mozilla.org\/de\/docs\/Web\/Manifest<\/a><br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>App Scope<\/strong><\/h4>\n\n\n\n<p style=\"text-align:justify;margin-top:-20px\">Die Property \u201c<em>start_url<\/em>\u201d beschreibt den Scope der App innerhalb der Domain. \u00dcber diesen Parameter wird auch definiert welche Seite beim Start der App angezeigt werden soll.<br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Start Modus<\/strong><\/h4>\n\n\n\n<p style=\"text-align:justify;margin-top:-20px\">Die Property \u201c<em>display<\/em>\u201d beschreibt den Start-Modus der App. Die nachfolgende Bilderreihe zeigt die Auswirkungen der einzelnen Optionen. Mit der Standalone-Option kann man den Look einer nativen App perfekt imitieren. \u00dcber den Parameter Theme Color l\u00e4sst sich zus\u00e4tzlich die Gestaltung der Statusleiste beeinflussen.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"914\" data-attachment-id=\"8283\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/bildschirmfoto-2019-08-29-um-13-59-16\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.16.png\" data-orig-size=\"1140,1018\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Bildschirmfoto 2019-08-29 um 13.59.16\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.16-1024x914.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.16-1024x914.png\" alt=\"\" class=\"wp-image-8283\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.16-1024x914.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.16-300x268.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.16-768x686.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.16.png 1140w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"943\" data-attachment-id=\"8289\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/progressive-web-apps-wer-braucht-noch-eine-native-app\/bildschirmfoto-2019-08-29-um-13-59-44\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.44.png\" data-orig-size=\"1108,1020\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Bildschirmfoto 2019-08-29 um 13.59.44\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.44-1024x943.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.44-1024x943.png\" alt=\"\" class=\"wp-image-8289\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.44-1024x943.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.44-300x276.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.44-768x707.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Bildschirmfoto-2019-08-29-um-13.59.44.png 1108w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p style=\"font-weight: 400;text-align:center\" class=\"has-small-font-size\">Abb. 4:  Browser Modes [7]<br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Service Worker<\/strong><\/h3>\n\n\n\n<p style=\"text-align:justify\">Der Service Worker ist der Hintergrunddienst einer PWA. Er ist verwandt mit dem Web Worker, l\u00e4uft in einem eigenen Thread und erlaubt keine direkte DOM-Manipulation, sondern nur die Kommunikation \u00fcber eine definierte Schnittstellen.&nbsp;<\/p>\n\n\n\n<p style=\"text-align:justify\">Er ist auch bei geschlossener Anwendung lauff\u00e4hig, legt sich schlafen und erwacht bei eintreffenden Informationen! Mit seiner Hilfe wird eine PWA offlinef\u00e4hig. Seine Aufgabe ist es, alle Requests die aus dem eigenen Scope ins Netzwerk geschickt werden, abzufangen und zu beurteilen, ob er m\u00f6gliche Anfragen aus dem eigenen Cache beantworten kann oder nicht. Technisch betrachtet fungiert er quasi als Pseudo-Proxy. In welchem Umfang Requests ins Netzwerk geschickt werden oder aus dem eigenen Cache beantwortet werden, liegt im ermessen des Entwicklers. So ist \u00fcber das Install-Event des Service Workers, dass bei App-Installation getriggert wird, ein vollst\u00e4ndiger Download des App-Contents m\u00f6glich, was die App damit g\u00e4nzlich offlinef\u00e4hig machen w\u00fcrde. \u00dcber die Wake-Up Funktion werden Push Notifications auf dem Endger\u00e4t erm\u00f6glicht, womit man der User Experience einer nativen App wieder einen gro\u00dfen Schritt n\u00e4her kommen kann.&nbsp;<br><\/p>\n\n\n\n<p style=\"text-align:justify\">Weitere Informationen und eine \u00dcbersicht von m\u00f6glichen Events auf die gelauscht werden kann, findet man unter:<br><a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/API\/Service_Worker_API\/Using_Service_Workers\">https:\/\/developer.mozilla.org\/de\/docs\/Web\/API\/Service_Worker_API\/<br>Using_Service_Workers<\/a><br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Skandal &#8211; Sind Service Worker die neuen Cookies?<\/strong><\/h4>\n\n\n\n<p style=\"text-align:justify\">Das eine App einen Hintergrunddienst ben\u00f6tigt, ist aus der nativen App- Entwicklung betrachtet, nichts ungew\u00f6hnliches. Async-Tasks, Services, Background Tasks, etc. sind jedem Android- oder iOS-Developer ein Begriff. In der Entwicklung von gew\u00f6hnlichen Websites (keine Web Apps), sind Hintergrunddienste allerdings eher selten von Bedarf. Der Benutzer wei\u00df inzwischen durch Aufkl\u00e4rungsma\u00dfnahmen, dass der Besuch einer Website in seinem Browser Spuren hinterl\u00e4sst, sei es Cache, Cookies usw. ABER und jetzt kommt der Skandal: Viele Benutzer wissen nicht (!), dass ihr Browser ebenso durch Service Worker belastet wird, die sich wie eine Zecke in den Browser schleichen, jederzeit aus dem Schlaf erwecken lassen und die die Performance des ganzen Ger\u00e4tes durch Hintergrunddienste beeintr\u00e4chtigen k\u00f6nnen! Wenn man den Artikel bis hierher verfolgt hat, k\u00f6nnte man nun meinen, das Service Worker nur f\u00fcr PWAs eingesetzt werden, aber das Web war schon immer daf\u00fcr bekannt, dass man s\u00e4mtliche Tricks ausnutzt, die irgendwie m\u00f6glich sind. Ich kann an dieser Stelle nur jedem Chrome-Benutzer, egal ob auf Mobile oder Desktop empfehlen, mit dem nachfolgenden Link zu \u00fcberpr\u00fcfen, wieviele Service Worker sich unwissend in den eigenen Browser geschlichen haben. Eine vergleichbare Schnittstelle zum \u00fcberpr\u00fcfen der registrierten Service Worker bieten andere Browser derzeit nicht an, obwohl sie sie unterst\u00fctzen! \u00dcber Service Worker l\u00e4sst sich beispielsweise das heimliche Crypto Mining auf Kosten von unwissenden Benutzern realisieren.<br><\/p>\n\n\n\n<p><strong>Check:<\/strong>&nbsp; chrome:\/\/serviceworker-internals<br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Push Notifications<\/strong><\/h3>\n\n\n\n<p style=\"text-align:justify\">Eine Push Notification, die \u00fcber eine installierte PWA gesendet wurde, l\u00e4sst sich nicht von einer nativen Notification unterscheiden. Auch jede Referenz auf den zugrundeliegenden Browser wird verborgen. Notifications lassen sich \u00fcber den Service Worker triggern, der wiederum von App oder Server dazu angesto\u00dfen wird. <br><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/TrNyzcoYDxFIPeFqVCeHjJCFwXBF_UJZ1-QZAfzqvIcfoHk_sV8kQ4kLGP3knbXr0RppANL5vLI4zDzGnrn0cIGE79wrXbfY9ZsQSiRium86UhPebNmNwGnROGtGFODRyqjlwaaQ\" alt=\"\" \/><\/figure>\n\n\n\n<p style=\"font-weight: 400;text-align:center\" class=\"has-small-font-size\">Abb. 5:  PWA Push Notifications vs. native Notifications [9]<br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Splash Screen<\/strong><\/h3>\n\n\n\n<p style=\"text-align:justify\">Um dem Start einer App eine bessere User Experience zu verpassen, hat man sich entschlossen, dass eine PWA mit einem Splash Screen startet, w\u00e4hrend im Hintergrund der Content aufgebaut wird. So wird auf geschickte Art und Weise performance suggeriert und langweilt den Benutzer nicht mit einem Whitescreen. Splash Screens lassen sich nicht an- oder ausschalten, aber customizen. Per Default sind App Icon und App Name (Android) gesetzt. <br><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/RbQLTDjdoYjp6XC0nunFIo_nNfcE6Ztyr-Go2BlHByvmjiayIuNahwq91FV1TWf-1Q3uye2ZAur03eONVeDGMWcDhNAiMpSEhYv8s5l1VIOEqgWuwjE4AsqrnCp-Z4bh7wbltYVk\" alt=\"\" \/><\/figure>\n\n\n\n<p style=\"font-weight: 400;text-align:center;margin-top:-40px\" class=\"has-small-font-size\">Abb. 6:  Splash Screen auf Android (links) und iOS (rechts) [8]<br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Optimize &amp; Debug<\/strong><\/h3>\n\n\n\n<p style=\"text-align:justify\">Wer eine PWA programmieren und das beste an Performance herauskitzeln will, der findet in den Developer Tools des Chrome Browsers das beste Hilfsmittel. \u00dcber die Audit-Tests startet der Browser auf Knopfdruck eine Reihe an Tests, die eine PWA in Bezug auf Vollst\u00e4ndigkeit (PWA-Anforderungen), Performance, Best Practises, Accessibility und Semantik (SEO) hin bewertet. Auf einer Skala von 1-10 wird ein Scoring ermittelt und aufgelistet wo Verbesserungspotential besteht. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/zVgBnMkjk8aWdvGcoR3YpsYB4jNTJ898_3x3NfVeJBCfdfM7qCtsNG7WGJGHkM4gReLBzSVtunEu3SYC0HkT0jX6ObKeOtY4vOowzRSE1Yqi4Nys1OUOmSEo6Nkgac3TBXHqvQMj\" alt=\"\" width=\"518\" height=\"578\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/o2zj76te2W1JebEUz6iFz_x9AAdk-Prwd7HdJt8rocsdn4ptogHgm1FAQuXZlbkQZiFlLLNqpVz06xMh6Z_bAT1EjMLBYV86VNTqWUOCEGv_UuGQPWyoBlbe3gvviZkiLB1nRl4g\" alt=\"\" \/><\/figure><\/div>\n\n\n\n<p style=\"font-weight: 400;text-align:center\" class=\"has-small-font-size\">Abb. 7:  Audits in der Chrome Developer Console [9]<br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Exkurs &#8211; Browser APIs<\/strong><\/h2>\n\n\n\n<p style=\"text-align:justify\">Um sich bei Funktionalit\u00e4t und User Experience einer nativen App anzun\u00e4hern, liefern moderne Browser heute schon jede Menge APIs, die man vielleicht gar nicht kennt. Darunter auch einige hardwarenahe Schnittstellen, die h\u00e4ufig noch gar keinen Gebrauch finden, aber die Zukunft mitpr\u00e4gen k\u00f6nnen. Um sicherzustellen, dass entsprechende APIs auch schon in weit verbreiteten Browsern implementiert sind, bietet sich an, diese vor Implementierung, mit Hilfe des <a href=\"https:\/\/caniuse.com\/\">Can I Use<\/a> &#8211; Services zu pr\u00fcfen.<br><\/p>\n\n\n\n<p>Eine Auswahl eher unbekannter APIs:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Sensors API<ul><li>Ambient Light, Proximity, Accelerometer, Magnetometer, Gyroskop<\/li><\/ul><\/li><li>Battery Manager API<\/li><li>Web Payments API<\/li><li>Gamepad API<\/li><li>Geolocation (GPS) API<\/li><li>Vibration API<\/li><li>Web Speech API (Text-To-Speech, Speech-To-Text, Grammar)<\/li><li>Bluetooth API<\/li><li>Push Notification API<\/li><li>USB Device API<\/li><li>WebVR API<\/li><li>Indexed Database API<\/li><li>File System API<\/li><\/ul>\n\n\n\n<p class=\"has-small-font-size\"><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>PWA vs. Native<\/strong><\/h2>\n\n\n\n<p style=\"text-align:justify\">Wir wir bisher erfahren haben, erm\u00f6glichen moderne Browser schon mehr Features, wie man vielleicht vermuten mag. Wenn man betrachtet, dass PWAs erst seit 2018 von allen gro\u00dfen Browsern unterst\u00fctzt werden, kann man schlussfolgern, dass das ganze Thema noch in den Kinderschuhen steckt. Aber bereits jetzt, durch die herausragende Performance-Steigerung mobiler Endger\u00e4te in den letzten Jahren, sind tolle Anwendungen im mobile Web m\u00f6glich, so dass native Apps aus Kostengr\u00fcnden wohl immer unattraktiver werden, sofern keine native Performance f\u00fcr das Produkt erforderlich ist. Auch der PWA-Standard wird sich in den n\u00e4chsten Jahren weiterentwickeln und immer mehr M\u00f6glichkeiten bieten. Es bahnt sich vielleicht eine spannende Welle der Ver\u00e4nderungen an, die den Mobile-App-Markt durcheinander bringen k\u00f6nnte!<br><\/p>\n\n\n\n<p style=\"text-align:justify\">Zum Abschluss eine \u00dcbersichtsmatrix die zur Entscheidungsfindung hilfreich sein kann. Die meisten Punkte erh\u00e4lt die Umsetzungsart, die am besten abschneidet.<br><\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td><\/td><td>Web App<\/td><td>PWA<\/td><td>Native App<\/td><\/tr><tr><td>Speicherbedarf auf dem Endger\u00e4t<\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f<\/strong><\/td><td><\/td><\/tr><tr><td>Offlinef\u00e4higkeit<\/td><td><\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><\/tr><tr><td>Auffindbarkeit in Suchmaschinen<\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f<\/strong><\/td><\/tr><tr><td>Installation, Updates, Wartung, Versionierung<\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f<\/strong><\/td><\/tr><tr><td>Performance, Ladezeiten<\/td><td><\/td><td><strong>\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><\/tr><tr><td>Sicherheit<\/td><td>(kann)<\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td>(kann)<\/td><\/tr><tr><td>Entwicklungskosten<\/td><td><strong>\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><\/td><\/tr><tr><td>Nat\u00fcrlicher Traffic<\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f<\/strong><\/td><\/tr><tr><td>Hardwarenahe Features<\/td><td><strong>\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f<\/strong><\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><\/tr><tr><td>User Experience<\/td><td>(kann)<\/td><td>(kann)<\/td><td><strong>\u25fc\ufe0f\u25fc\ufe0f<\/strong><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><\/strong><strong>In 10 Schritten zur ersten PWA<\/strong><\/h2>\n\n\n\n<p>Hier noch einen Quickguide zur ersten Progressive Web App:<\/p>\n\n\n\n<ol><li>Web App programmieren<\/li><li>Sicher stellen, dass die Kommunikation zum Server ausschlie\u00dflich \u00fcber https l\u00e4uft<\/li><li>Web Manifest anlegen mit mindestens:<\/li>\n<ul>\n<li style=\"margin-left:20px\">Scope<\/li>\n<li style=\"margin-left:20px\">Start URL<\/li>\n<li style=\"margin-left:20px\">App Icon und App Name<\/li>\n<\/ul>\n<li style=\"margin-top:-20px\">Web Manifest im Head des HTML-Dokuments einbinden<\/li><li>ServiceWorker.js (o.\u00e4.) in root Folder der PWA anlegen<\/li><li>Service Worker im JS der Web App registrieren<\/li><li>ServiceWorker.js je nach Bedarf implementieren<\/li><li>Mit Audits testen ob alle empfohlenen Qualit\u00e4tskriterien einer PWA erreicht sind<\/li><li>Deployen \ud83d\ude42<\/li><\/ol>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quellenverzeichnis<\/strong><\/h2>\n\n\n\n<p>[1] Great examples of progressive web apps in one room<br><a href=\"https:\/\/progressivewebapproom.com\/\">https:\/\/progressivewebapproom.com\/<br><\/a>Zugegriffen am 05.08.2019, 22:08 Uhr<\/p>\n\n\n\n<p>[2] Rio Run App von the Guardian,<br><a href=\"https:\/\/riorun.theguardian.com\/\">https:\/\/riorun.theguardian.com\/<\/a><br>Zugegriffen am 05.08.2019, 22:08 Uhr<br><br>[3] Wikipedia<br><a href=\"https:\/\/en.wikipedia.org\/wiki\/Progressive_web_applications\">https:\/\/en.wikipedia.org\/wiki\/Progressive_web_applications<br><\/a>Zugegriffen am 05.08.2019, 22:08 Uhr<br><\/p>\n\n\n\n<p>[4] Welcoming Progressive Web Apps to Microsoft Edge and Windows 10<br><a href=\"https:\/\/blogs.windows.com\/msedgedev\/2018\/02\/06\/welcoming-progressive-web-apps-edge-windows-10\/\">https:\/\/blogs.windows.com\/msedgedev\/2018\/02\/06\/welcoming-progressive-web-apps-edge-windows-10\/<\/a><br>Zugegriffen am 05.08.2019, 22:08 Uhr<\/p>\n\n\n\n<p>[5] Naming Progressive Web Apps<br><a href=\"https:\/\/fberriman.com\/2017\/06\/26\/naming-progressive-web-apps\/\">https:\/\/fberriman.com\/2017\/06\/26\/naming-progressive-web-apps\/<\/a><br>Zugegriffen am 05.08.2019, 22:08 Uhr<\/p>\n\n\n\n<p>[6] Why Build Progressive Web Apps<br><a href=\"https:\/\/developers.google.com\/web\/ilt\/pwa\/why-build-pwa\">https:\/\/developers.google.com\/web\/ilt\/pwa\/why-build-pwa<br><\/a>Zugegriffen am 05.08.2019, 22:08 Uhr<br><\/p>\n\n\n\n<p>[7]&nbsp; Progressive Web App Challenges<br><a href=\"https:\/\/www.slideshare.net\/grigs\/progressive-web-app-challenges\">https:\/\/www.slideshare.net\/grigs\/progressive-web-app-challenges<br><\/a>Zugegriffen am 05.08.2019, 22:08 Uhr<br><\/p>\n\n\n\n<p>[8] Progressive Web App Splash Screens<br><a href=\"https:\/\/medium.com\/@applification\/progressive-web-app-splash-screens-80340b45d210\">https:\/\/medium.com\/@applification\/progressive-web-app-splash-screens-80340b45d210<br><\/a>Zugegriffen am 05.08.2019, 22:08 Uhr<br><\/p>\n\n\n\n<p>[9] Eigene Leistung<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beispiele zum Einstieg Progressive Web Apps sind schon weiter verbreitet wie man denkt. Auch gro\u00dfe, innovative Unternehmen Twitter, Airbnb, Spotify oder Tinder setzen auf Progressive Web Apps. Abb. 1: Eine Auswahl von Progressive Web Apps [1] Wer sich ein tolles Beispiel anschauen m\u00f6chte, dem empfehle ich https:\/\/riorun.theguardian.com\/ (auf mobile) zu testen. Nach einiger Zeit erscheint [&hellip;]<\/p>\n","protected":false},"author":950,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,649,262],"tags":[290,288,287,289],"ppma_author":[795],"class_list":["post-8217","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-interactive-media","category-rich-media-systems","tag-html5","tag-progressive-web","tag-pwa","tag-web-app"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":12512,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/02\/27\/progressive-web-apps-wer-braucht-noch-native-apps\/","url_meta":{"origin":8217,"position":0},"title":"Progressive Web Apps &#8211; Wer braucht noch native Apps?","author":"Fabiola Dums","date":"27. February 2021","format":false,"excerpt":"Progressive Web Apps sollen es erm\u00f6glichen die Vorteile des Webs und die nativer Apps zu nutzen, um so f\u00fcr jeden, \u00fcberall und auf jedem Ger\u00e4t, nutzbar zu sein. Was Progressive Web Apps eigentlich sind, welche Vor- und Nachteile sie mit sich bringen und ob sie in Zukunft native Apps komplett\u2026","rel":"","context":"In &quot;Interactive Media&quot;","block_context":{"text":"Interactive Media","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/interactive-media\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Bildschirmfoto-2021-02-26-um-12.21.05.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":12376,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/02\/24\/serviceworker-offline-first\/","url_meta":{"origin":8217,"position":1},"title":"ServiceWorker \u2013 Offline First","author":"Benedikt Reuter","date":"24. February 2021","format":false,"excerpt":"In der Vorlesung Rich Media haben wir uns viel mit Performance in Web Anwendungen besch\u00e4ftigt. Dabei habe ich mich mit ServiceWorkern in Bezug auf Offlinenutzung, Funktionalit\u00e4t und Performance besch\u00e4ftigt. Zuerst habe ich mich damit befasst, wie ein ServiceWorker funktioniert. Danach habe ich geschaut, wie sich die Nutzung eines ServiceWorker und\u2026","rel":"","context":"In &quot;Interactive Media&quot;","block_context":{"text":"Interactive Media","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/interactive-media\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Picture-9.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Picture-9.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Picture-9.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/Picture-9.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":3314,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2018\/03\/28\/continuous-integration-deployment-for-a-cross-platform-application-part-1\/","url_meta":{"origin":8217,"position":2},"title":"Continuous Integration &#038; Deployment for a Cross-Platform Application &#8211; Part 1","author":"Tobias Eberle, Marco Maisel, Tobias Staib, Mario Walz","date":"28. March 2018","format":false,"excerpt":"When we started the project \"Flora CI\" for the lecture \"System Engineering\", we planned to deal with Continuous Integration. As an important aspect of software engineering all of us have previously been involved in projects where code of developers had to be merged and builds had to be automated somehow.\u2026","rel":"","context":"In &quot;DevOps&quot;","block_context":{"text":"DevOps","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/scalable-systems\/devops\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2018\/03\/flora-app.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2018\/03\/flora-app.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2018\/03\/flora-app.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2018\/03\/flora-app.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2018\/03\/flora-app.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2018\/03\/flora-app.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":10395,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/07\/31\/single-page-web-applications\/","url_meta":{"origin":8217,"position":3},"title":"Single Page Web Applications","author":"Felix Messner","date":"31. July 2019","format":false,"excerpt":"(Originally written for for 143206a Entwicklung von Rich Media Systemen in 07\/2019) Intro There are two fundamentally different concepts in web application development: Single-Page and Multi-Page architectures. This article explores the different approaches and explains some of the development concerns of single page architectures, at the example of how to\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/08\/abb1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/08\/abb1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/08\/abb1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/08\/abb1.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":13089,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/03\/15\/project-newsdrop-gaming-news-app-for-android\/","url_meta":{"origin":8217,"position":4},"title":"Project NewsDrop &#8211; Gaming News App for Android","author":"Lewon G\u00fcler","date":"15. March 2021","format":false,"excerpt":"How difficult is it to actually publish an Android application? We tried it out with our project \"NewsDrop\", where we developed a gaming news app for end users. In this blog entry, you can read about the experiences on our journey. However, we couldn\u2019t have imagined that it would be\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"newsdrop logo","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/03\/Asset_7.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":23713,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/11\/17\/vom-uni-projekt-in-den-app-store\/","url_meta":{"origin":8217,"position":5},"title":"Vom Uni-Projekt in den App Store","author":"Fabian Hiller","date":"17. November 2022","format":false,"excerpt":"An der HdM arbeiten jedes Semester unz\u00e4hlige Studierende an verschiedenen Ideen. Von Apps \u00fcber Videoproduktionen bis hin zu Verpackungstechnik ist dabei alles zu finden. Kaum eine Idee besteht jedoch \u00fcber das Semester hinaus. Mit der Abgabe zur Benotung enden leider bereits die meisten Projekte. Dieser Beitrag soll Inspiration bieten, falls\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/11\/unisex-app-screenshots.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/11\/unisex-app-screenshots.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/11\/unisex-app-screenshots.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/11\/unisex-app-screenshots.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/11\/unisex-app-screenshots.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/11\/unisex-app-screenshots.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":795,"user_id":950,"is_guest":0,"slug":"dz030","display_name":"Dominik Zinser","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/1ec4f28dcfc9a96b4b8f5405276bd178075433969f36ca6066491531e31f6cde?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/8217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/users\/950"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=8217"}],"version-history":[{"count":72,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/8217\/revisions"}],"predecessor-version":[{"id":8361,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/8217\/revisions\/8361"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=8217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=8217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=8217"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=8217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}