{"id":10160,"date":"2021-06-29T18:32:31","date_gmt":"2021-06-29T13:02:31","guid":{"rendered":"https:\/\/www.konstantinfo.com\/blog\/?p=10160"},"modified":"2026-02-25T17:55:49","modified_gmt":"2026-02-25T12:25:49","slug":"pwa-with-angular-11","status":"publish","type":"post","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/","title":{"rendered":"Building Progressive Web Apps with Angular 11 Framework"},"content":{"rendered":"<p>Progressive web applications are mobile applications that do not require installation and depict behaviour similar to websites. These even perform in the intermittent network.<\/p>\n<h2>Prerequisites: What we require to get through?<\/h2>\n<ul>\n<li>Install node.js locally<\/li>\n<li>Get the latest version of Google Chrome Web Browser<\/li>\n<li>Install the Lighthouse Chrome Extension to later test if your app is progressive<\/li>\n<li>Get a Google Account for uploading the application to Firebase<\/li>\n<\/ul>\n<h2>Follow Steps in Sequence<\/h2>\n<ol>\n<li>Create a new project with Angular CLI<\/li>\n<li>Angular generates test files in the process. Make use of the skip test flag to prevent these.<\/li>\n<li>As you get the prompt for configuration options, create a new project directory named ng-PWA.<\/li>\n<li>Navigate to the new directory.<\/li>\n<li>Create a web app manifest. It is a JSON file with a configuration that gives a web application the ability to save the user&#8217;s home screen. It defines the appearance and behaviour if launched from the home screen.<\/li>\n<li>Secure a manifest.json file in the root of the src folder <em>nano src\/manifest.json<\/em><\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Now add this code in the src\/manifest.json file:<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10161\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/1-1.png\" alt=\"1\" width=\"467\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/1-1.png 467w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/1-1-217x300.png 217w\" sizes=\"(max-width: 467px) 100vw, 467px\" \/><\/p>\n<ol start=\"8\">\n<li>Specify a name that you can attach with the app icon on the user\u2019s home screen. It should be a short name.<\/li>\n<li>Specify the landing page of the app while launching it from the home screen.<\/li>\n<li>Set the theme colour for the browser UI to know when the users visit your website.<\/li>\n<li>Specify the background colour property controls to change the background on which the app icon displays when users launch the app from the home screen. You should specify when you wish to display or hide the browser UI.<\/li>\n<li>Create duplicates of the app icons in multiple dimensions if you want users with different types of devices with screen sizes to visit your site.<\/li>\n<li>Go to index.html and add some code to the head section (after adding the image assets)<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10162\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/2-1.png\" alt=\"2\" width=\"383\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/2-1.png 383w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/2-1-300x159.png 300w\" sizes=\"(max-width: 383px) 100vw, 383px\" \/><\/p>\n<ol start=\"14\">\n<li>Instruct Angular to add the web app manifest file to the build folder. Add manifest.json file to the assets array in the apps section of the .angular-cli.json file.<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10163\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/3-1.png\" alt=\"3\" width=\"288\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/3-1.png 288w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/3-1-236x300.png 236w\" sizes=\"(max-width: 288px) 100vw, 288px\" \/><\/p>\n<ol start=\"15\">\n<li>Edit Angular.json instead of .angular-cli.json for applications built with Angular 6 or later. Add this code into angular.json:<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10164\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/4.png\" alt=\"4\" width=\"292\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/4.png 292w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/4-223x300.png 223w\" sizes=\"(max-width: 292px) 100vw, 292px\" \/><\/p>\n<ol start=\"16\">\n<li>Add service workers \u2013 webpack to the app before pushing it into production with the help of the sw-precache-webpack-plugin npm package. It must be able to track and cache the build files.<\/li>\n<li>Execute a command to auto-generate the service worker in the build folder. For this, run the npm install command from the ng-PWA directory to install the package.<\/li>\n<li>Create a file named\u00a0precache-config.js, after installing the package<\/li>\n<li>Add this code in the precache-config.js file:<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10165\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/5.png\" alt=\"5\" width=\"540\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/5.png 540w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/5-300x256.png 300w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/p>\n<ol start=\"20\">\n<li>The precache-config.js file configures the sw-precache-webpack-plugin by using literal object key-value pairs.<\/li>\n<li>Configure sw-precache-webpack-plugin<\/li>\n<li>Finish the service worker setup by creating a custom npm script or command that builds the app and auto-generate the service worker file in the build folder.<\/li>\n<li>Add this code into the package.json file:<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10166\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/6.png\" alt=\"6\" width=\"580\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/6.png 580w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/6-300x125.png 300w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/p>\n<p>Get ready to create the views after installing the sw-precache-webpack-plugin and creating\u00a0precache-config.js and editing package.json.<\/p>\n<p>PWA with Angular commixes only a single view. Edit app.component.html and replace the content with some code that displays images, text and links.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10167\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/7.png\" alt=\"7\" width=\"561\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/7.png 561w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/7-300x97.png 300w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10168\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/8.png\" alt=\"8\" width=\"644\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/8.png 644w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/8-300x193.png 300w\" sizes=\"(max-width: 644px) 100vw, 644px\" \/><\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10169\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/9.png\" alt=\"9\" width=\"620\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/9.png 620w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/9-300x164.png 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10170\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/10.png\" alt=\"10\" width=\"637\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/10.png 637w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/10-300x192.png 300w\" sizes=\"(max-width: 637px) 100vw, 637px\" \/><\/p>\n<p>It will produce a web page with images, text, and links. Here the rel=\u201dnoopener\u201d attribute is essential if the anchor element&#8217;s target attribute is set &#8220;to _blank&#8221; for security and performance reasons. Edit src\/styles.css as follows:<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-10171\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/11.png\" alt=\"11\" width=\"231\" height=\"358\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/11.png 231w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/11-194x300.png 194w\" sizes=\"auto, (max-width: 231px) 100vw, 231px\" \/><\/p>\n<p>It will create a background in teal with text in white in the centre.<\/p>\n<ol start=\"24\">\n<li>It\u2019s time to deploy your app. Service workers require a secure connection. Visit firebase.google.com. Create an account if you don\u2019t have it already.<\/li>\n<li>Go to the Console link and create a new Firebase project.<\/li>\n<li>Click continue to arrive at the project dashboard.<\/li>\n<\/ol>\n<p>Go back to the command terminal. Run the npm install command to install the firebase-tools package globally &#8211; <em>npm install -g firebase-tools@8.4.3<\/em><\/p>\n<ol start=\"27\">\n<li>After installation completes, build the app for deployment.<\/li>\n<li>Auto-generate service worker, run the following from the ng-PWA directory: npm run PWA<\/li>\n<\/ol>\n<ol start=\"29\">\n<li>As we run the custom script, this makes our app production-ready.<\/li>\n<li>Log in to &#8216;Firebase&#8217; by running this command: &#8220;firebase login&#8221;;<\/li>\n<li>As you will be prompted for credentials, enter your account information into the terminal.<\/li>\n<li>Run <em>&#8220;Firebase init&#8221;<\/em> to initialize the Firebase project.<\/li>\n<li>Answer some questions:<\/li>\n<\/ol>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-10172\" src=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/12.png\" alt=\"12\" width=\"667\" srcset=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/12.png 667w, https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/12-300x71.png 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/><\/p>\n<ol start=\"34\">\n<li>Now the app is ready for deployment. Run the &#8220;firebase deploy&#8221; command and then run &#8220;firebase open hosting: website-name&#8221;;<\/li>\n<li>Troubleshoot and test with Lighthouse depending upon your configuration.<\/li>\n<\/ol>\n<h2>Conclusive: Where can we go from here?<\/h2>\n<p>We&#8217;ve discussed <a href=\"https:\/\/www.konstantinfo.com\/blog\/creating-progressive-web-apps-vue-ionic\/\" target=\"_blank\">creating progressive web apps in Vue.js and Ionic earlier<\/a>. We hope that this article brings insight and eases the transition. PWA&#8217;s are lightweight and bring native app-like features into the web platform. <strong><a href=\"https:\/\/www.konstantinfo.com\/contact-us\" target=\"_blank\">Connect with us<\/a><\/strong> for more details.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Progressive web applications are mobile applications that do not require installation and depict behaviour similar to websites. These even perform in the intermittent network. Prerequisites: What we require to get through? Install node.js locally Get the latest version of Google Chrome Web Browser Install the Lighthouse Chrome Extension to later test if your app is&hellip; <a class=\"more-link\" href=\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/\">Continue reading <span class=\"screen-reader-text\">Building Progressive Web Apps with Angular 11 Framework<\/span><\/a><\/p>\n","protected":false},"author":21,"featured_media":10175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[1589,1865],"class_list":["post-10160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-app-development","tag-progressive-web-apps-with-angular-11","tag-pwa","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building Progressive Web Apps with Angular 11 Framework - Konstantinfo<\/title>\n<meta name=\"description\" content=\"We are focussing on step wise process to build progressive web app with Angular 11 here!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Progressive Web Apps with Angular 11 Framework - Konstantinfo\" \/>\n<meta property=\"og:description\" content=\"We are focussing on step wise process to build progressive web app with Angular 11 here!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/\" \/>\n<meta property=\"og:site_name\" content=\"Konstantinfo\" \/>\n<meta property=\"article:author\" content=\"http:\/\/www.facebook.com\/konstant.info\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-29T13:02:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-25T12:25:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/progressive-web-apps-with-angular-11-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1008\" \/>\n\t<meta property=\"og:image:height\" content=\"448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Neeti Kotia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@konstantinfo\" \/>\n<meta name=\"twitter:site\" content=\"@konstantinfo\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Neeti Kotia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/\",\"name\":\"Building Progressive Web Apps with Angular 11 Framework - Konstantinfo\",\"isPartOf\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/progressive-web-apps-with-angular-11-2.jpg\",\"datePublished\":\"2021-06-29T13:02:31+00:00\",\"dateModified\":\"2026-02-25T12:25:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/f21f3944d0e3bceb3e4884381bb224b9\"},\"description\":\"We are focussing on step wise process to build progressive web app with Angular 11 here!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#primaryimage\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/progressive-web-apps-with-angular-11-2.jpg\",\"contentUrl\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/progressive-web-apps-with-angular-11-2.jpg\",\"width\":1008,\"height\":448,\"caption\":\"progressive-web-apps-with-angular-11\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building Progressive Web Apps with Angular 11 Framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#website\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/\",\"name\":\"Konstantinfo\",\"description\":\"Welcome to Konstant Info\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/f21f3944d0e3bceb3e4884381bb224b9\",\"name\":\"Neeti Kotia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2018\/02\/Neeti-150x150.jpg\",\"contentUrl\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2018\/02\/Neeti-150x150.jpg\",\"caption\":\"Neeti Kotia\"},\"description\":\"Neeti Kotia is a technology journalist who seeks to analyze the advancements and developments in technology that affect our everyday lives. Her articles primarily focus upon the business, social, cultural, and entertainment side of the technology sector.\",\"sameAs\":[\"http:\/\/www.konstantinfo.com\",\"http:\/\/www.facebook.com\/konstant.info\",\"https:\/\/x.com\/konstantinfo\"],\"url\":\"https:\/\/www.konstantinfo.com\/konstant-blog\/author\/neeti-kotia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building Progressive Web Apps with Angular 11 Framework - Konstantinfo","description":"We are focussing on step wise process to build progressive web app with Angular 11 here!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/","og_locale":"en_US","og_type":"article","og_title":"Building Progressive Web Apps with Angular 11 Framework - Konstantinfo","og_description":"We are focussing on step wise process to build progressive web app with Angular 11 here!","og_url":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/","og_site_name":"Konstantinfo","article_author":"http:\/\/www.facebook.com\/konstant.info","article_published_time":"2021-06-29T13:02:31+00:00","article_modified_time":"2026-02-25T12:25:49+00:00","og_image":[{"width":1008,"height":448,"url":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/progressive-web-apps-with-angular-11-2.jpg","type":"image\/jpeg"}],"author":"Neeti Kotia","twitter_card":"summary_large_image","twitter_creator":"@konstantinfo","twitter_site":"@konstantinfo","twitter_misc":{"Written by":"Neeti Kotia","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/","name":"Building Progressive Web Apps with Angular 11 Framework - Konstantinfo","isPartOf":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#primaryimage"},"image":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#primaryimage"},"thumbnailUrl":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/progressive-web-apps-with-angular-11-2.jpg","datePublished":"2021-06-29T13:02:31+00:00","dateModified":"2026-02-25T12:25:49+00:00","author":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/f21f3944d0e3bceb3e4884381bb224b9"},"description":"We are focussing on step wise process to build progressive web app with Angular 11 here!","breadcrumb":{"@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#primaryimage","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/progressive-web-apps-with-angular-11-2.jpg","contentUrl":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2021\/06\/progressive-web-apps-with-angular-11-2.jpg","width":1008,"height":448,"caption":"progressive-web-apps-with-angular-11"},{"@type":"BreadcrumbList","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/pwa-with-angular-11\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.konstantinfo.com\/konstant-blog\/"},{"@type":"ListItem","position":2,"name":"Building Progressive Web Apps with Angular 11 Framework"}]},{"@type":"WebSite","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#website","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/","name":"Konstantinfo","description":"Welcome to Konstant Info","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.konstantinfo.com\/konstant-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/f21f3944d0e3bceb3e4884381bb224b9","name":"Neeti Kotia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.konstantinfo.com\/konstant-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2018\/02\/Neeti-150x150.jpg","contentUrl":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2018\/02\/Neeti-150x150.jpg","caption":"Neeti Kotia"},"description":"Neeti Kotia is a technology journalist who seeks to analyze the advancements and developments in technology that affect our everyday lives. Her articles primarily focus upon the business, social, cultural, and entertainment side of the technology sector.","sameAs":["http:\/\/www.konstantinfo.com","http:\/\/www.facebook.com\/konstant.info","https:\/\/x.com\/konstantinfo"],"url":"https:\/\/www.konstantinfo.com\/konstant-blog\/author\/neeti-kotia\/"}]}},"show_toc":false,"table_of_content":[],"faq":[],"related_blogs":[{"id":12341,"title":"AI in Real Estate Industry &#8211; Benefits, Use Cases, Applications and Challenges","slug":"ai-in-real-estate","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/ai-in-real-estate\/","modified":"2026-05-07 17:49:19","excerpt":"The real-estate industry is predominantly run by human expertise and manual processes including buying, selling, and building lands and property....","image":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2025\/04\/ai-in-real-estate.webp"},{"id":12324,"title":"10 Top Education App Development Companies (2026)","slug":"education-app-development-companies","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/education-app-development-companies\/","modified":"2026-05-07 15:22:39","excerpt":"What started as an extension of traditional classrooms became a billion-dollar industry. The online education sector has flourished massively. It...","image":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2025\/04\/education-app-development-companies.webp"},{"id":12333,"title":"10 Best eCommerce App Development Companies (2026)","slug":"ecommerce-app-development-companies","link":"https:\/\/www.konstantinfo.com\/konstant-blog\/ecommerce-app-development-companies\/","modified":"2026-05-05 17:18:51","excerpt":"We have curated a comprehensive list of top eCommerce app development companies to assist you in developing top-notch eCommerce applications....","image":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-content\/uploads\/2025\/04\/best-ecommerce-app-development-companies.webp"}],"_links":{"self":[{"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/posts\/10160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/comments?post=10160"}],"version-history":[{"count":1,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/posts\/10160\/revisions"}],"predecessor-version":[{"id":13075,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/posts\/10160\/revisions\/13075"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/media\/10175"}],"wp:attachment":[{"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/media?parent=10160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/categories?post=10160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.konstantinfo.com\/konstant-blog\/wp-json\/wp\/v2\/tags?post=10160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}