{"id":2137,"date":"2022-09-13T23:10:15","date_gmt":"2022-09-13T21:10:15","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2137"},"modified":"2022-09-13T23:10:15","modified_gmt":"2022-09-13T21:10:15","slug":"progressive-web-app-pwa-with-angular-part-ii","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/09\/13\/progressive-web-app-pwa-with-angular-part-ii\/","title":{"rendered":"Progressive Web App (PWA) with Angular (Part II)"},"content":{"rendered":"\n<h4>Create an installable PWA\u00a0<\/h4>\n\n\n\n<p>To make your Angular application a PWA, all you need to do is run a single command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng add @angular\/pwa<\/code><\/pre>\n\n\n\n<p>This command will:<\/p>\n\n\n\n<ul><li>Create a\u00a0<strong>service worker\u00a0<\/strong>with a default caching configuration. (<strong>ngsw-config.json<\/strong>)<\/li><li>Create a <strong>manifest file<\/strong>, which tells the browser how your app should behave when installed on the user&#8217;s device.<\/li><li>Add a link to the manifest file in\u00a0<code>index.html<\/code>.<\/li><li>Add the <strong>theme-color<\/strong>\u00a0<code>&lt;meta><\/code>\u00a0tag to\u00a0<code>index.html<\/code>.<\/li><li>Create app icons in the\u00a0<code>src\/assets<\/code>\u00a0directory.<\/li><\/ul>\n\n\n\n<p><strong>PS:<\/strong> <em>By default, your service worker should be registered within a few seconds of the first page load. If it isn&#8217;t, consider modifying the\u00a0<a href=\"https:\/\/angular.io\/api\/service-worker\/SwRegistrationOptions\"><code>registrationStrategy<\/code><\/a>.<\/em><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Customize your PWA<\/h4>\n\n\n\n<p>You can configure the Angular service worker, by specifying which resources you want the service worker to cache and what strategy it should use to do so.<\/p>\n\n\n\n<p>The manifest file of your app lets you also specify your app&#8217;s name, short name, icons, theme color, and other details.<\/p>\n\n\n\n<p>Take a peek at the manifest file generated by the Angular CLI:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\r\n  \"name\": \"manifest-web-dev\",\r\n  \"short_name\": \"manifest-web-dev\",\r\n  \"theme_color\": \"#1976d2\",\r\n  \"background_color\": \"#fafafa\",\r\n  \"display\": \"standalone\",\r\n  \"scope\": \"\/\",\r\n  \"start_url\": \"\/\",\r\n  \"icons\": &#91;\r\n    {\r\n      \"src\": \"assets\/icons\/icon-72x72.png\",\r\n      \"sizes\": \"72x72\",\r\n      \"type\": \"image\/png\"\r\n    },\r\n    \u2026\r\n    {\r\n      \"src\": \"assets\/icons\/icon-512x512.png\",\r\n      \"sizes\": \"512x512\",\r\n      \"type\": \"image\/png\"\r\n    }\r\n  ]\r\n}<\/code><\/pre>\n\n\n\n<p>You can customize any of these properties by changing the relevant value in\u00a0<code>manifest.webmanifest<\/code>.<\/p>\n\n\n\n<p><strong>PS:<\/strong> <em>A PWA references its manifest file with a\u00a0<code>link<\/code>\u00a0element in\u00a0<code>index.html<\/code>. Once the browser finds the reference, it&#8217;ll show the\u00a0<strong>Add to Home screen<\/strong>\u00a0prompt:<\/em><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-20.png\" alt=\"\" class=\"wp-image-2212\" width=\"222\" height=\"453\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-20.png 380w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-20-147x300.png 147w\" sizes=\"(max-width: 222px) 100vw, 222px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Since the\u00a0<code>ng-add<\/code>\u00a0schematics add everything needed to make your app\u00a0<a href=\"https:\/\/web.dev\/discover-installable\/\">installable<\/a>, they generate some shortcut icons that are shown once the user adds the app to their desktop:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-21.png\" alt=\"\" class=\"wp-image-2213\" width=\"238\" height=\"492\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-21.png 373w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-21-145x300.png 145w\" sizes=\"(max-width: 238px) 100vw, 238px\" \/><\/figure><\/div>\n\n\n\n<p>Make sure you customize the manifest properties and icons before you deploy your PWA to production!<\/p>\n\n\n\n<p><strong>PS:<\/strong><em><span class=\"has-inline-color has-vivid-cyan-blue-color\"> If you want to change your PWA back to a standard web app, just remove the reference to\u00a0<code><strong>manifest.webmanifest<\/strong><\/code>\u00a0from\u00a0<code><strong>index.html<\/strong><\/code>.<\/span><\/em><\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-purple-color\">Summarize :<\/span><\/h4>\n\n\n\n<p>To make an installable Angular app:<\/p>\n\n\n\n<ol><li>Add&nbsp;<code>@angular\/pwa<\/code>&nbsp;to your project using the Angular CLI.<\/li><li>Edit the options in the&nbsp;<code>manifest.webmanifest<\/code>&nbsp;file to suit your project.<\/li><li>Update the icons in the&nbsp;<code>src\/assets\/icons<\/code>&nbsp;directory to suit your project.<\/li><li>Optionally, edit the&nbsp;<code>theme-color<\/code>&nbsp;in&nbsp;<code>index.html<\/code>.<\/li><\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5>Reference<\/h5>\n\n\n\n<p><a href=\"https:\/\/web.dev\/creating-pwa-with-angular-cli\/\">https:\/\/web.dev\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create an installable PWA\u00a0 To make your Angular application a PWA, all you need to do is run a single command: This command will: Create a\u00a0service worker\u00a0with a default caching configuration. (ngsw-config.json) Create a manifest file, which tells the browser how your app should behave when installed on the user&#8217;s device. Add a link to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1309,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,5],"tags":[590,589,358,357,588],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2137"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2137"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2137\/revisions"}],"predecessor-version":[{"id":2214,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2137\/revisions\/2214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1309"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}