{"id":593,"date":"2021-12-26T16:30:27","date_gmt":"2021-12-26T16:30:27","guid":{"rendered":"https:\/\/erdbeerbeet.com\/?p=593"},"modified":"2021-12-27T06:39:22","modified_gmt":"2021-12-27T06:39:22","slug":"from-angular-to-pwa","status":"publish","type":"post","link":"https:\/\/erdbeerbeet.com\/de\/from-angular-to-pwa","title":{"rendered":"Von Angular zu PWA"},"content":{"rendered":"\n<p>Von Anfang an sollte mein <a href=\"https:\/\/erdbeerbeet.com\/projekte\/wordprogressor\" data-type=\"page\" data-id=\"419\">WordProgressor<\/a> auch als App auf meinem Telefon funktionieren. Oder dem Desktop. Oder wo auch immer. Und seit ich PWAs kenne, wei\u00df ich, dass dies in Kombination mit Angular durchaus m\u00f6glich ist. Also habe ich erst meinen MVP erstellt und es dann zu einer PWA gemacht. In nur einem git Commit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recherche<\/h2>\n\n\n\n<p>Das meiste, was ben\u00f6tigt wird, um eine gew\u00f6hnliche Angular-Anwendung zur PWA zu machen wird im Artikel <a href=\"https:\/\/blog.angular-university.io\/angular-service-worker\/\">&#8220;Step by step guide&#8221; von Angular University (englisch, Dezember 2021)<\/a> beschrieben. Ich musste lediglich ein paar Anpassungen vornehmen und der im Artikel beschriebene http-server hat f\u00fcr mich nicht funktioniert, aber abgesehen davon steht in dem Artikel alles, was das Herz begehrt.<\/p>\n\n\n\n<p>Die meiste Magie passiert durch den Befehl hier drunter, mit dem PWA-Unterst\u00fctzung f\u00fcr ein bestehendes Projekt erg\u00e4nzt wird.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng add @angular\/pwa --project &lt;name of project as in angular.json&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Service Worker<\/h2>\n\n\n\n<p>Eine PWA oder <strong>Progressive Web App<\/strong> ist eine Webanwendung (mit html, css und js), aus der eine native App erstellt wird. Alles was im Browser funktioniert kann auch als PWA genutzt werden.<\/p>\n\n\n\n<p>PWAs funktionieren dank so genannter Service Worker. Die oben verlinkte Seite erkl\u00e4rt das ganz wunderbar im Detail. Ganz kurz gesagt ist der Service Worker ein Baustein, der zwischen Anwendung und Betriebssystem, Internet, APIs und so weiter sitzt. Es erm\u00f6glicht die Nutzung nativer Funktionalit\u00e4ten oder Datenbank-Anfragen.<\/p>\n\n\n\n<p>Service Worker funktionieren allerdings nicht, wenn die Angular App wie gewohnt mit <strong>ng serve<\/strong> gestartet wird. Stattdessen bracht es einen Http-Server. Als Alternative zu dem im obigen Artikel genannten kann <strong>http-server-spa<\/strong> ausprobiert werden, falls sich Probleme auftun. Ob alles funktioniert kann in den Chrome Entwickler-Werkzeugen \u00fcberpr\u00fcft werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Das Programmieren<\/h2>\n\n\n\n<p>Alle \u00c4nderungen um PWA-Unterst\u00fctzung zu erm\u00f6glichen, passen in <a href=\"https:\/\/github.com\/Fenja\/word-progressor\/commit\/0f1a67e71239b5331b00369f2413638e69e99e94\" class=\"broken_link\">einen Commit<\/a>. Ich bin von der Anleitung abgewichen, indem ich den anderen Server genutzt habe, sowie die neue Datei <strong>manifest.webmanifest<\/strong> genannt habe.<\/p>\n\n\n\n<p>Ab jetzt ist es auch wichtig, dass man ein sch\u00f6nes Icon hat, das als App-Icon auf dem Telefon angezeigt wird.<br>Au\u00dferdem sind hier die \u00c4nderungen, die sich in dem Artikel und meinem Commit finden:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>ngsw-config.js anlegen<\/li><li>manifest.webmanifest anlegen<\/li><li>mit SwUpdate in der AppComponent den Nutzer \u00fcber verf\u00fcgbare Updates informieren<\/li><li>das ServiceWorkerModule in AppModule registrieren<\/li><li>einen &#8220;PWA installieren&#8221; Button anzeigen, wo es passend erscheint (dieser wird nur angezeigt, wenn das verwendete Ger\u00e4t PWAs unterst\u00fctzt)<\/li><li>Metadata zur index.html hinzuf\u00fcgen<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Chrome Analyse Werkzeuge<\/h2>\n\n\n\n<p>Unter &#8220;Application&#8221; &gt; &#8220;Service Workers&#8221; werden die laufenden Service Worker aufgelistet.<br>Mit dem &#8220;Lighthouse&#8221;-Tab kann dar\u00fcber hinaus ein Bericht erstellt werden, wie gut die App abschneidet. Im Bezug auf Performanz, Lesbarkeit, Schnelligkeit, etc. Das Internet ist voll mit Tips, wie man hier bessere Punkte in den verschiedenen Kategorien erhalten kann.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PWA<\/h2>\n\n\n\n<p>Abgesehen von &#8220;weil ich es kann&#8221;, warum solle man aus seiner Webanwendung eine PWA machen?<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Man erh\u00e4lt eine App, die keinen Store ben\u00f6tigt (App- oder Play-Store), f\u00fcr welche Anmeldegeb\u00fchren und Abgaben anfallen, die au\u00dferdem immer einige Zeit ben\u00f6tigen, um eine neue Version freizuschalten.<\/li><li>PWAs sind gro\u00dfartig f\u00fcr Offline-Funktionalit\u00e4ten. Bei anderen Cross-Plattform Sprachen ist so etwas kniffelig und wird hier vom Service Worker \u00fcbernommen.<\/li><li>Wie bei Cross-Plattform \u00fcblich bedient eine Code-Basis alle Betriebssysteme. Eine fertige Webanwendung kann mit wenig Aufwand auf dem Bildschirm verlinkt werden.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Weitere Vorteile von PWAs sind die Unterst\u00fctzung von Versionierung, Benachrichtigungen und Zugriff auf native Funktionalit\u00e4ten. Alles dank der Service Worker. Einiges davon wird Inhalt nachfolgender Blogbeitr\u00e4ge sein.<\/p>\n\n\n\n<p>Wenn man mich fragt, dann ist das Icon meiner Webseite auf meinem Telefon nochmal ein ganz besonderes Achievement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit wenig Aufwand kann aus einer Angular Webanwendung eine PWA gemacht werden.<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,36,49],"tags":[16,61,45],"class_list":["post-593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-web-programming","category-word_progressor","tag-app","tag-pwa","tag-word-progressor"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":true},"de":{"title":true,"content":true,"excerpt":true}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=593"}],"version-history":[{"count":4,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/593\/revisions"}],"predecessor-version":[{"id":598,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/593\/revisions\/598"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}