{"id":592,"date":"2019-12-26T16:45:39","date_gmt":"2019-12-26T16:45:39","guid":{"rendered":"http:\/\/owaisnoor.info\/blog\/?p=592"},"modified":"2019-12-26T16:48:49","modified_gmt":"2019-12-26T16:48:49","slug":"what-are-progressive-web-apps-pwa","status":"publish","type":"post","link":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/","title":{"rendered":"What are Progressive Web Apps (PWA)"},"content":{"rendered":"

Progressive Web Apps (PWA)<\/h1>\n

A Progressive Web App<\/em> (PWA)<\/strong> is a web app<\/em> that uses modern web<\/em> technologies to deliver an app<\/em>-like experience to users. <\/p>\n

Progressive web applications can be seen as mobile optimised versions of web pages that you can install on your phone through your browser. <\/b>They are similar to regular applications, minus the inconvenience of having to be downloaded from an app store. But let\u2019s  move on from high-level definitions, and dive deeper into PWAs key features to understand everything that they\u2019re capable of.<\/p>\n

\"Progressive<\/p>\n

These economically feasible web apps occupies less space in mobile devices. If you are really couldn\u2019t afford a native mobile app, then progressive web apps are for you. Before we get into building a progressive, let me walk you through some great examples of progressive web apps.<\/strong><\/p>\n

#1 Trivago Hotel Booking PWA<\/a><\/h4>\n

#2 Pinterest PWA<\/a><\/h4>\n

#3 Tinder PWA<\/a><\/h4>\n

#4 9Gag PWA<\/a><\/h4>\n

#5 OLX PWA<\/a><\/h4>\n

#6 Starbucks Coffee PWA<\/a><\/h4>\n

#7 Forbes PWA<\/a><\/h4>\n

#8 The Washington Post<\/a><\/h4>\n

Why build a Progressive Web App?<\/h2>\n

Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.<\/strong><\/p>\n

Reliable:<\/strong> When launched from the user\u2019s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state. A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.<\/p>\n

Fast:<\/strong> 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast\u2014no janky scrolling or slow-to-respond interfaces.<\/p>\n

Engaging:<\/strong> Progressive Web Apps are installable and live on the user’s home screen<\/b>, without the need for an app store. They offer an <\/span>immersive full screen<\/b> experience with help from a web app manifest file and can even re-engage users with web <\/span>push notifications<\/b>. <\/span>The Web App Manifest allows you to control how your app appears and how it’s launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.<\/p>\n

Advantages of Progressive Web Apps (PWA)<\/b><\/h1>\n

While there are thousands of apps on the Apple App Store and even more on the Google Play Store. Numbers show that 60% of apps have never been downloaded. The App Store and the Play Store also cause major problems for developers who must work carefully to avoid breaking the rules.<\/p>\n

Developing a Progressive Web App has allowed many companies to remove friction and experience large increases in engagement and conversions.<\/p>\n

Additionally with a PWA, your user always have the latest version of your app. You don\u2019t have to disturb them with updates. You can also do continuous deployments to bring new features and fixes to your users instantly.<\/p>\n

Service worker<\/b><\/p>\n

In many countries the internet connections can be slow and sketchy. PWA solve this by utilising “service workers” that empower a Progressive Web App to load instantly, regardless of the network state.<\/p>\n

Web App manifest<\/b><\/p>\n

The Web App manifest is the component that is responsible for providing a native app interface appearance to PWA. Manifest helps in controlling the way the app is presented to the user (i.e. app like view) and how it can be launched.<\/p>\n

App Shell<\/b><\/p>\n

The app shell <\/b>consists of HTML, CSS and JavaScript code which build the interface of the app. The interface works towards displaying the content dynamically.<\/p>\n

Content<\/b><\/p>\n

The content <\/b>is the dynamic part that gets refreshed every time the internet connection is reestablished.<\/p>\n

At the end I would like to add here that PWAs holds a very good potential to increase your customer base. Big e-commerce gaints like Flipkart<\/strong>, Amazon<\/strong> etc are already getting their hands on PWA and earning profit.<\/p>\n","protected":false},"excerpt":{"rendered":"

Progressive Web Apps (PWA) A Progressive Web App (PWA) is a web app that uses modern web technologies to deliver an app-like experience to users.  Progressive web applications can be seen as mobile optimised versions of web pages that you can install on your phone through your browser. They are similar to regular applications, minus the […]<\/p>\n","protected":false},"author":1,"featured_media":594,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[22,21],"tags":[565,567,569,566,564,568],"class_list":["post-592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","category-technology","tag-full-stack-web-development","tag-google-pwa-framework","tag-indian-developers","tag-offline-browsing","tag-progressive-web-apps-pwa","tag-pwa-apps"],"yoast_head":"\nWhat are Progressive Web Apps (PWA) - A Full Stack Developer - Owais<\/title>\n<meta name=\"description\" content=\"PWAs holds a very good potential to increase your customer base. Big e-commerce gaints like Flipkart, Amazon etc are already getting their hands on PWA and earning profit.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are Progressive Web Apps (PWA)? - Explained\" \/>\n<meta property=\"og:description\" content=\"PWAs holds a very good potential to increase your customer base. Big e-commerce gaints like Flipkart, Amazon etc are already getting their hands on PWA and earning profit.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/\" \/>\n<meta property=\"og:site_name\" content=\"Owais Noor Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/owaisnoorofficial\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-26T16:45:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-26T16:48:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2020\/02\/img-e1582456825903.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"470\" \/>\n\t<meta property=\"og:image:height\" content=\"521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@itsowaisnoor\" \/>\n<meta name=\"twitter:site\" content=\"@itsowaisnoor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"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:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/#\/schema\/person\/3351438dd3a6ffb36d87c694dfde0157\"},\"headline\":\"What are Progressive Web Apps (PWA)\",\"datePublished\":\"2019-12-26T16:45:39+00:00\",\"dateModified\":\"2019-12-26T16:48:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/\"},\"wordCount\":679,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2019\/12\/bannerpwa.jpg\",\"keywords\":[\"Full stack web development\",\"google pwa framework\",\"indian developers\",\"offline browsing\",\"Progressive Web Apps (PWA)\",\"pwa apps\"],\"articleSection\":[\"Programming\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/\",\"url\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/\",\"name\":\"What are Progressive Web Apps (PWA) - A Full Stack Developer - Owais\",\"isPartOf\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2019\/12\/bannerpwa.jpg\",\"datePublished\":\"2019-12-26T16:45:39+00:00\",\"dateModified\":\"2019-12-26T16:48:49+00:00\",\"description\":\"PWAs holds a very good potential to increase your customer base. Big e-commerce gaints like Flipkart, Amazon etc are already getting their hands on PWA and earning profit.\",\"breadcrumb\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#primaryimage\",\"url\":\"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2019\/12\/bannerpwa.jpg\",\"contentUrl\":\"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2019\/12\/bannerpwa.jpg\",\"width\":850,\"height\":425,\"caption\":\"Website developer in india\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/owaisnoor.info\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What are Progressive Web Apps (PWA)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/#website\",\"url\":\"https:\/\/owaisnoor.info\/blog\/\",\"name\":\"Best Web Developer in Kashmir\",\"description\":\"Best Web Developer in Kashmir\",\"publisher\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/owaisnoor.info\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/#organization\",\"name\":\"Owais Noor\",\"url\":\"https:\/\/owaisnoor.info\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2018\/10\/PNG-OWAIS-NOOR.png\",\"contentUrl\":\"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2018\/10\/PNG-OWAIS-NOOR.png\",\"width\":438,\"height\":82,\"caption\":\"Owais Noor\"},\"image\":{\"@id\":\"https:\/\/owaisnoor.info\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/owaisnoorofficial\",\"https:\/\/x.com\/itsowaisnoor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/#\/schema\/person\/3351438dd3a6ffb36d87c694dfde0157\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/owaisnoor.info\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1349a9cf33824edde90cbb60225f923f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1349a9cf33824edde90cbb60225f923f?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/owaisnoor.info\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What are Progressive Web Apps (PWA) - A Full Stack Developer - Owais","description":"PWAs holds a very good potential to increase your customer base. Big e-commerce gaints like Flipkart, Amazon etc are already getting their hands on PWA and earning profit.","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:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/","og_locale":"en_US","og_type":"article","og_title":"What are Progressive Web Apps (PWA)? - Explained","og_description":"PWAs holds a very good potential to increase your customer base. Big e-commerce gaints like Flipkart, Amazon etc are already getting their hands on PWA and earning profit.","og_url":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/","og_site_name":"Owais Noor Blog","article_publisher":"https:\/\/www.facebook.com\/owaisnoorofficial","article_published_time":"2019-12-26T16:45:39+00:00","article_modified_time":"2019-12-26T16:48:49+00:00","og_image":[{"width":470,"height":521,"url":"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2020\/02\/img-e1582456825903.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@itsowaisnoor","twitter_site":"@itsowaisnoor","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#article","isPartOf":{"@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/"},"author":{"name":"admin","@id":"https:\/\/owaisnoor.info\/blog\/#\/schema\/person\/3351438dd3a6ffb36d87c694dfde0157"},"headline":"What are Progressive Web Apps (PWA)","datePublished":"2019-12-26T16:45:39+00:00","dateModified":"2019-12-26T16:48:49+00:00","mainEntityOfPage":{"@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/"},"wordCount":679,"commentCount":0,"publisher":{"@id":"https:\/\/owaisnoor.info\/blog\/#organization"},"image":{"@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2019\/12\/bannerpwa.jpg","keywords":["Full stack web development","google pwa framework","indian developers","offline browsing","Progressive Web Apps (PWA)","pwa apps"],"articleSection":["Programming","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/","url":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/","name":"What are Progressive Web Apps (PWA) - A Full Stack Developer - Owais","isPartOf":{"@id":"https:\/\/owaisnoor.info\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#primaryimage"},"image":{"@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2019\/12\/bannerpwa.jpg","datePublished":"2019-12-26T16:45:39+00:00","dateModified":"2019-12-26T16:48:49+00:00","description":"PWAs holds a very good potential to increase your customer base. Big e-commerce gaints like Flipkart, Amazon etc are already getting their hands on PWA and earning profit.","breadcrumb":{"@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#primaryimage","url":"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2019\/12\/bannerpwa.jpg","contentUrl":"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2019\/12\/bannerpwa.jpg","width":850,"height":425,"caption":"Website developer in india"},{"@type":"BreadcrumbList","@id":"https:\/\/owaisnoor.info\/blog\/what-are-progressive-web-apps-pwa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/owaisnoor.info\/blog\/"},{"@type":"ListItem","position":2,"name":"What are Progressive Web Apps (PWA)"}]},{"@type":"WebSite","@id":"https:\/\/owaisnoor.info\/blog\/#website","url":"https:\/\/owaisnoor.info\/blog\/","name":"Best Web Developer in Kashmir","description":"Best Web Developer in Kashmir","publisher":{"@id":"https:\/\/owaisnoor.info\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/owaisnoor.info\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/owaisnoor.info\/blog\/#organization","name":"Owais Noor","url":"https:\/\/owaisnoor.info\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/owaisnoor.info\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2018\/10\/PNG-OWAIS-NOOR.png","contentUrl":"https:\/\/owaisnoor.info\/blog\/wp-content\/uploads\/2018\/10\/PNG-OWAIS-NOOR.png","width":438,"height":82,"caption":"Owais Noor"},"image":{"@id":"https:\/\/owaisnoor.info\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/owaisnoorofficial","https:\/\/x.com\/itsowaisnoor"]},{"@type":"Person","@id":"https:\/\/owaisnoor.info\/blog\/#\/schema\/person\/3351438dd3a6ffb36d87c694dfde0157","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/owaisnoor.info\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1349a9cf33824edde90cbb60225f923f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1349a9cf33824edde90cbb60225f923f?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/owaisnoor.info\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/posts\/592"}],"collection":[{"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/comments?post=592"}],"version-history":[{"count":4,"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/posts\/592\/revisions"}],"predecessor-version":[{"id":598,"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/posts\/592\/revisions\/598"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/media\/594"}],"wp:attachment":[{"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/media?parent=592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/categories?post=592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/owaisnoor.info\/blog\/wp-json\/wp\/v2\/tags?post=592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}