{"id":3420,"date":"2021-07-28T05:03:52","date_gmt":"2021-07-28T05:03:52","guid":{"rendered":"https:\/\/infyblog.zluck.in\/?p=3420"},"modified":"2025-07-17T07:42:33","modified_gmt":"2025-07-17T07:42:33","slug":"how-to-make-a-progressive-web-app","status":"publish","type":"post","link":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/","title":{"rendered":"How to make a Progressive Web App"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3420\" class=\"elementor elementor-3420\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4ea6a5d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4ea6a5d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c23b1ee\" data-id=\"c23b1ee\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\n\t\t<div class=\"elementor-element elementor-element-0092765 elementor-widget elementor-widget-text-editor\" data-id=\"0092765\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>What is a PWA?<\/h2><p>A Progressive Web App (PWA) is a hybrid of a regular web page and a mobile application. A PWA combines features offered by most modern browsers with the benefits of the mobile experience. They are built using standard web technologies, including HTML, CSS, and JavaScript. The functionalities include working offline, push notifications, and device hardware access and enabling creating user experiences similar to native applications.<\/p><h2>How to make a PWA<\/h2><p><strong>Following Below steps<\/strong><\/p><ul><li>Create an app manifest.json file<\/li><li>Add it to your base HTML template<\/li><li>Create the<a href=\"https:\/\/developer.chrome.com\/docs\/workbox\/service-worker-overview\/\" target=\"_blank\" rel=\"noopener\"> service worker<\/a><\/li><li>Serve the service worker on the root of the scope you used in the manifest<\/li><li>Add a block to your base HTML template file<\/li><li>Site deploy in your server<\/li><\/ul><h2>Create an App Manifest<\/h2><ul><li>Add the following information in &#8216;manifest.json&#8217;<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76d5459 elementor-widget elementor-widget-code-highlight\" data-id=\"76d5459\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp> {\r\n    name: `Name`,\r\n    short_name: `Sort name`,\r\n    start_url: `\/`,\r\n    display: `standalone`,\r\n    icon:  `Favicon icon`,\r\n    icons: [\r\n       {\r\n        \"src\": \"icon by size\",\r\n        \"sizes\": \"144x144\",\r\n        \"type\": \"image\/png\",\r\n        \"purpose\": \"any\"\r\n      },\r\n      {\r\n        \"src\": \"icon by size\",\r\n        \"sizes\": \"192x192\",\r\n        \"type\": \"image\/png\",\r\n        \"purpose\": \"maskable\"\r\n      },\r\n      {\r\n        \"src\": \"icon by size\",\r\n        \"sizes\": \"512x512\",\r\n        \"type\": \"image\/png\",\r\n        \"purpose\": \"maskable\"\r\n      }\r\n    ],\r\n  theme_color: `Theme color`,\r\n  background_color: `Background color`,\r\n  ]\r\n }<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27a496a elementor-widget elementor-widget-text-editor\" data-id=\"27a496a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>Manifest.json file in add this type of code including name, short_name, start_url, display, icon, icons, theme_color, background_color.<\/li><\/ul><h2>Add the Manifest to Your Base HTML Template<\/h2><ul><li>Add the following line in your &#8216;index&#8217; file<\/li><\/ul><p><strong>Create offline.html as an Alias to index.html<\/strong><\/p><p>By default, the service worker code below will render \/offline.html instead of any resource it can&#8217;t fetch while offline. Create a file at \/offline.html to give your user a more helpful error message, explaining that this data isn&#8217;t cached and the user is offline.<\/p><h2>Create a Service Worker<\/h2><ul><li>Create one file in yore root (sw.js)<\/li><li>Link the sw.js file in the body tag<\/li><\/ul><p>We have created some pages like<\/p><ol><li>Home page (\/)<\/li><li>Blog page (\/blog)<\/li><li>Contact information (\/contact)<\/li><li>Resume (\/resume)<\/li><li>offline.html<\/li><\/ol><ul><li>Add the code in your sw.js file<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6585dab elementor-widget elementor-widget-code-highlight\" data-id=\"6585dab\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>self.addEventListener(\"install\", function(event) {\r\n   event.waitUntil(preLoad());\r\n});\r\n\r\n var preLoad = function(){\r\n  return caches.open(\"offline\").then(function(cache) {\r\n    return cache.addAll([\"\/blog\/\", \"\/blog\", \"\/\", \"\/contact\", \r\n \"\/resume\", \"\/offline.html\"]);\r\n    });\r\n };\r\n\r\n self.addEventListener(\"fetch\", function(event) { event.respondWith(checkResponse(event.request).catch(function() \r\n  {\r\n     return returnFromCache(event.request);\r\n   }));\r\n   event.waitUntil(addToCache(event.request));\r\n  });\r\n\r\n  var checkResponse = function(request){\r\n   return new Promise(function(fulfill, reject) {\r\n     fetch(request).then(function(response){\r\n       if(response.status !== 404) {\r\n         fulfill(response);\r\n       } else {\r\n         reject();\r\n       }\r\n     }, reject);\r\n   });\r\n  };\r\n\r\n  var addToCache = function(request){\r\n   return caches.open(\"offline\").then(function (cache) {\r\n     return fetch(request).then(function (response) {\r\n       console.log(response.url + \" was cached\");\r\n       return cache.put(request, response);\r\n     });\r\n   });\r\n  };\r\n\r\n  var returnFromCache = function(request){\r\n   return caches.open(\"offline\").then(function (cache) {\r\n     return cache.match(request).then(function (matching) {\r\n      if(!matching || matching.status == 404) {\r\n        return cache.match(\"offline.html\");\r\n      } else {\r\n        return matching;\r\n      }\r\n     });\r\n   });\r\n  };<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b211eb9 elementor-widget elementor-widget-text-editor\" data-id=\"b211eb9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>Servicer worker file add your body tag<\/li><\/ul><p>load the service worker file in<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5db06d9 elementor-widget elementor-widget-code-highlight\" data-id=\"5db06d9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script>\r\n   if (!navigator.serviceWorker.controller) {\r\n   navigator.serviceWorker.register(\"\/sw.js\").then(function(reg) {\r\n         console.log(\"Service worker has been registered for scope: \" + reg.scope);\r\n     });\r\n }\r\n <\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d28e536 elementor-widget elementor-widget-text-editor\" data-id=\"d28e536\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Last step<\/h2><ul><li>Deploy code in yore live site<\/li><li>Create lighthouse report and check PWA<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>What is a PWA? A Progressive Web App (PWA) is a hybrid of a regular web page and a mobile application. A PWA combines&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3422,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"two_page_speed":[],"footnotes":""},"categories":[83],"tags":[84,85,14,49],"class_list":["post-3420","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gatsby","tag-gatsby","tag-seo","tag-tips","tag-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to make a Progressive Web App<\/title>\n<meta name=\"description\" content=\"Build a Progressive Web App (PWA): service worker, manifest, caching strategies, offline-first support &amp; push notifications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make a Progressive Web App\" \/>\n<meta property=\"og:description\" content=\"Build a Progressive Web App (PWA): service worker, manifest, caching strategies, offline-first support &amp; push notifications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | InfyOm Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/infyom\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-28T05:03:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-17T07:42:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"772\" \/>\n\t<meta property=\"og:image:height\" content=\"484\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InfyOm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:site\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InfyOm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/\"},\"author\":{\"name\":\"InfyOm\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\"},\"headline\":\"How to make a Progressive Web App\",\"datePublished\":\"2021-07-28T05:03:52+00:00\",\"dateModified\":\"2025-07-17T07:42:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/\"},\"wordCount\":310,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png\",\"keywords\":[\"Gatsby\",\"SEO\",\"Tips\",\"Website\"],\"articleSection\":[\"Gatsby\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/\",\"url\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/\",\"name\":\"How to make a Progressive Web App\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png\",\"datePublished\":\"2021-07-28T05:03:52+00:00\",\"dateModified\":\"2025-07-17T07:42:33+00:00\",\"description\":\"Build a Progressive Web App (PWA): service worker, manifest, caching strategies, offline-first support & push notifications.\",\"breadcrumb\":{\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#primaryimage\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png\",\"width\":772,\"height\":484,\"caption\":\"How to make a Progressive Web App\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/infyom.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make a Progressive Web App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/infyom.com\/blog\/#website\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"name\":\"Blog | InfyOm Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/infyom.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/infyom.com\/blog\/#organization\",\"name\":\"InfyOm Technologies\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"width\":88,\"height\":41,\"caption\":\"InfyOm Technologies\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/infyom\",\"https:\/\/x.com\/InfyOm\",\"https:\/\/www.instagram.com\/infyomtechnologies\/\",\"https:\/\/in.linkedin.com\/company\/infyom-technologies\",\"https:\/\/github.com\/infyomlabs\",\"https:\/\/x.com\/infyom\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\",\"name\":\"InfyOm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"caption\":\"InfyOm\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to make a Progressive Web App","description":"Build a Progressive Web App (PWA): service worker, manifest, caching strategies, offline-first support & push notifications.","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:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/","og_locale":"en_US","og_type":"article","og_title":"How to make a Progressive Web App","og_description":"Build a Progressive Web App (PWA): service worker, manifest, caching strategies, offline-first support & push notifications.","og_url":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/","og_site_name":"Blog | InfyOm Technologies","article_publisher":"https:\/\/www.facebook.com\/infyom","article_published_time":"2021-07-28T05:03:52+00:00","article_modified_time":"2025-07-17T07:42:33+00:00","og_image":[{"width":772,"height":484,"url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png","type":"image\/png"}],"author":"InfyOm","twitter_card":"summary_large_image","twitter_creator":"@InfyOm","twitter_site":"@InfyOm","twitter_misc":{"Written by":"InfyOm","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#article","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/"},"author":{"name":"InfyOm","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754"},"headline":"How to make a Progressive Web App","datePublished":"2021-07-28T05:03:52+00:00","dateModified":"2025-07-17T07:42:33+00:00","mainEntityOfPage":{"@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/"},"wordCount":310,"commentCount":0,"publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"image":{"@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png","keywords":["Gatsby","SEO","Tips","Website"],"articleSection":["Gatsby"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/","url":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/","name":"How to make a Progressive Web App","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#primaryimage"},"image":{"@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png","datePublished":"2021-07-28T05:03:52+00:00","dateModified":"2025-07-17T07:42:33+00:00","description":"Build a Progressive Web App (PWA): service worker, manifest, caching strategies, offline-first support & push notifications.","breadcrumb":{"@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#primaryimage","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/how-to-make-a-progressive-web-app-1-1-1-1-1-1.png","width":772,"height":484,"caption":"How to make a Progressive Web App"},{"@type":"BreadcrumbList","@id":"https:\/\/infyom.com\/blog\/how-to-make-a-progressive-web-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/infyom.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to make a Progressive Web App"}]},{"@type":"WebSite","@id":"https:\/\/infyom.com\/blog\/#website","url":"https:\/\/infyom.com\/blog\/","name":"Blog | InfyOm Technologies","description":"","publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/infyom.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/infyom.com\/blog\/#organization","name":"InfyOm Technologies","url":"https:\/\/infyom.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","width":88,"height":41,"caption":"InfyOm Technologies"},"image":{"@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/infyom","https:\/\/x.com\/InfyOm","https:\/\/www.instagram.com\/infyomtechnologies\/","https:\/\/in.linkedin.com\/company\/infyom-technologies","https:\/\/github.com\/infyomlabs","https:\/\/x.com\/infyom"]},{"@type":"Person","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754","name":"InfyOm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","caption":"InfyOm"}}]}},"_links":{"self":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/comments?post=3420"}],"version-history":[{"count":20,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3420\/revisions"}],"predecessor-version":[{"id":8157,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3420\/revisions\/8157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media\/3422"}],"wp:attachment":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media?parent=3420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/categories?post=3420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/tags?post=3420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}