{"id":7107,"date":"2022-01-13T13:48:13","date_gmt":"2022-01-13T08:18:13","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7107"},"modified":"2023-01-20T18:54:55","modified_gmt":"2023-01-20T13:24:55","slug":"progressive-web-apps","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/","title":{"rendered":"Progressive Web Apps"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">PWA provides the facility where the user can directly install the particular web application as a mobile application without going to the Play Store(Applicable for android only). The user can run the web application as a mobile application with an actual look and feel.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In order to call a Web App a PWA it must fulfill three conditions:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Secure<\/span><span style=\"font-weight: 400;\">,<\/span><span style=\"font-weight: 400;\">Contexts(HTTPS)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Service<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">Workers<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Manifest<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">File<\/span><\/li>\n<\/ul>\n<p><b>Secure Contexts(HTTPS)<\/b><\/p>\n<p><span style=\"font-weight: 400;\">The web application must be served over a secure network. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site especially if users need to make secure transactions.<\/span><\/p>\n<p><b>Service Workers<\/b><\/p>\n<p><span style=\"font-weight: 400;\">A service worker is a script that allows intercepting and control of how a web browser handles its network requests and asset caching. With service workers, web developers can create reliably fast web pages and offline experiences.<\/span><\/p>\n<p><b>Manifest File<\/b><\/p>\n<p><span style=\"font-weight: 400;\">A <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/JSON\"><span style=\"font-weight: 400;\">JSON<\/span><\/a><span style=\"font-weight: 400;\"> file that controls how your app appears to the user and ensures that progressive web apps are discoverable. It describes the name of the app, the start URL, icons, and all the other details necessary to transform the website into an app-like format.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Progressive web apps are a hybrid of regular <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_page\"><span style=\"font-weight: 400;\">web pages<\/span><\/a><span style=\"font-weight: 400;\"> (or <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Website\"><span style=\"font-weight: 400;\">websites<\/span><\/a><span style=\"font-weight: 400;\">) and <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Mobile_app\"><span style=\"font-weight: 400;\">mobile applications<\/span><\/a><span style=\"font-weight: 400;\">. This new application model attempts to combine features offered by most modern <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_browser\"><span style=\"font-weight: 400;\">browsers<\/span><\/a><span style=\"font-weight: 400;\"> with the benefits of <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Mobile_device\"><span style=\"font-weight: 400;\">mobile<\/span><\/a><span style=\"font-weight: 400;\"> experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The entire credit for this seamless experience should be given to the Service Worker(A script that the browser runs in the background separate from the web page), which is the backbone of every PWA. <\/span><span style=\"font-weight: 400;\">The service workers enable reliable and intelligent caching, background content updating, push notifications, and the most attractive offline functionality to prior visited sites. This means that, after the first visit to a website, the site and app will be reliably fast even on flaky networks.<\/span><\/p>\n<p><strong>PWA Features<\/strong><\/p>\n<p><b>Reliable: <\/b><span style=\"font-weight: 400;\">Fast loading and works offline.<\/span><\/p>\n<p><b>Fast: <\/b><span style=\"font-weight: 400;\">Smooth Animations, jank-free scrolling, and seamless navigation even on flaky networks.<\/span><\/p>\n<p>Engaging:<span style=\"font-weight: 400;\"> Launched from the home screen and can receive a push notification.<\/span><\/p>\n<p><strong>Importance of PWA<\/strong><\/p>\n<p><b>Reach<\/b><span style=\"font-weight: 400;\">: The mobile web audience has grown at a skyrocketing pace over the last few years. Google has reported that Chrome has whooping 1 billion mobile users compared to the erstwhile 400 million users in 2016. As per Comscore\u2019s report, the reach of mobile web is 2.5 times more than that of apps while considering the top 1000 sites and apps. This is the reason why the decision of Flipkart, Myntra, etc. to abandon their website and be \u2018app only\u2019 backfired. If we could provide a better experience to a wider audience, we could surely get a competitive edge over the others<\/span><\/p>\n<p><b>Acquisition<\/b><span style=\"font-weight: 400;\">: Another serious concern faced by mobile apps is their user discoverability compared to websites. The user acquisition cost of the web will be 10 times cheaper than that of native apps. With more exposure and low friction for on-boarding, PWA is likely to acquire more users at very little expense.<\/span><\/p>\n<p><b>Conversion<\/b><span style=\"font-weight: 400;\">: The seamless end-to-end user experience even with flaky networks provided by PWA improves the number of successful conversions. Flipkart launched their PWA \u2018Flipkart-lite\u2019, which they claim to have delivered an increase in the conversion rate by 70% with lower acquisition cost<\/span><b>.<\/b><\/p>\n<p><b>Conclusion<\/b><\/p>\n<p><span style=\"font-weight: 400;\">So in today\u2019s world where people generally don\u2019t want to install certain apps from the play store and instead prefer to do things directly on websites, PWA(Progressive Web Application) provides a unique feature to run Native application as a Hybrid application by providing a \u201cAdd Shortcuts\u201d on the home screen, when the user clicks on the \u201cAdd Shortcut\u201d button it will be installed in Device and works as a mobile application.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>PWA provides the facility where the user can directly install the particular web application as a mobile application without going to the Play Store(Applicable for android only). The user can run the web application as a mobile application with an actual look and feel. In order to call a Web App a PWA it must [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7108,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,585,8,7],"tags":[30,746,722,723,745,744],"class_list":["post-7107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-mobile-app-development","category-mobile-architecture-and-design","category-mobile-testing","tag-application","tag-apps","tag-blog","tag-blogging","tag-progressive-web-apps","tag-pwa"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Progressive Web Apps - InnovationM - Blog<\/title>\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.innovationm.com\/blog\/progressive-web-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Progressive Web Apps - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"PWA provides the facility where the user can directly install the particular web application as a mobile application without going to the Play Store(Applicable for android only). The user can run the web application as a mobile application with an actual look and feel. In order to call a Web App a PWA it must [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-13T08:18:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:24:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/01\/Progressive-Web-Apps-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Progressive Web Apps\",\"datePublished\":\"2022-01-13T08:18:13+00:00\",\"dateModified\":\"2023-01-20T13:24:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/\"},\"wordCount\":639,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Progressive-Web-Apps.png\",\"keywords\":[\"Application\",\"apps\",\"blog\",\"blogging\",\"Progressive web apps\",\"PWA\"],\"articleSection\":[\"Mobile\",\"Mobile App Development\",\"Mobile Architecture and Design\",\"Mobile Testing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/\",\"name\":\"Progressive Web Apps - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Progressive-Web-Apps.png\",\"datePublished\":\"2022-01-13T08:18:13+00:00\",\"dateModified\":\"2023-01-20T13:24:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Progressive-Web-Apps.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/Progressive-Web-Apps.png\",\"width\":3556,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/progressive-web-apps\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Progressive Web Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Progressive Web Apps - InnovationM - Blog","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.innovationm.com\/blog\/progressive-web-apps\/","og_locale":"en_US","og_type":"article","og_title":"Progressive Web Apps - InnovationM - Blog","og_description":"PWA provides the facility where the user can directly install the particular web application as a mobile application without going to the Play Store(Applicable for android only). The user can run the web application as a mobile application with an actual look and feel. In order to call a Web App a PWA it must [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/","og_site_name":"InnovationM - Blog","article_published_time":"2022-01-13T08:18:13+00:00","article_modified_time":"2023-01-20T13:24:55+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/01\/Progressive-Web-Apps-1024x576.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Progressive Web Apps","datePublished":"2022-01-13T08:18:13+00:00","dateModified":"2023-01-20T13:24:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/"},"wordCount":639,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/01\/Progressive-Web-Apps.png","keywords":["Application","apps","blog","blogging","Progressive web apps","PWA"],"articleSection":["Mobile","Mobile App Development","Mobile Architecture and Design","Mobile Testing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/","url":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/","name":"Progressive Web Apps - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/01\/Progressive-Web-Apps.png","datePublished":"2022-01-13T08:18:13+00:00","dateModified":"2023-01-20T13:24:55+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/01\/Progressive-Web-Apps.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/01\/Progressive-Web-Apps.png","width":3556,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/progressive-web-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Progressive Web Apps"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7107"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7107\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7108"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}