{"id":10692,"date":"2019-08-06T07:47:18","date_gmt":"2019-08-06T07:47:18","guid":{"rendered":"http:\/\/www.esds.co.in\/blog\/?p=10692"},"modified":"2019-08-19T06:01:10","modified_gmt":"2019-08-19T06:01:10","slug":"how-user-experience-is-enhanced-by-progressive-web-applications","status":"publish","type":"post","link":"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/","title":{"rendered":"How User Experience is Enhanced by Progressive Web Applications"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Examples_of_Progressive_Web_Apps\"><\/span><strong>Examples of Progressive Web Apps<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Case 1: Flipkart decides to go for Flipkart Lite<\/strong><\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#Examples_of_Progressive_Web_Apps\" >Examples of Progressive Web Apps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#What_are_Progressive_Web_Apps\" >What are Progressive Web Apps?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#Why_Progressive_Web_Apps\" >Why Progressive Web Apps?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#The_architecture_of_Web_Apps\" >The architecture of Web Apps<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#Characteristics_of_Web_Apps\" >Characteristics of Web Apps<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#i_Progressive\" >i. Progressive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#ii_Discoverable\" >ii. Discoverable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#iii_Linkable\" >iii. Linkable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#iv_App-like_Interface\" >iv. App-like Interface<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#v_Connectivity-independent\" >v. Connectivity-independent<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#vi_Re-engageable\" >vi. Re-engageable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#vii_Installable\" >vii. Installable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#viii_Real-time_Updation\" >viii. Real-time Updation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#ix_Safety\" >ix. Safety<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#Terms-Related_to_Progressive_Web_Applications\" >Terms-Related\nto Progressive Web Applications<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#1_Manifest\" >1. Manifest<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#2_Service_Workers\" >2. Service Workers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#3_Application_Shell\" >3. Application Shell<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#4_Background_Synchronization\" >4. Background Synchronization<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#5_Web_Push_Notifications\" >5. Web Push Notifications<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#6_PRPL_Patterns\" >6. PRPL Patterns<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#7_Web_Storage\" >7. Web Storage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/#8_HTTP2\" >8. HTTP\/2<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<p style=\"text-align: justify;\">Flipkart is the largest e-commerce site in India. The company updated its mobile site to a Progressive Web Application, called Flipkart Lite. Flipkart Lite delivers fast and streamlined experiences to the mobile users and combines the best of both- the web as well as the native app which Flipkart used.<\/p>\n<p style=\"text-align: justify;\">In 2015, Flipkart temporarily shut down its mobile website and focused on app-only strategy. The company found it challenging to deliver an engaging web experience, as more than half of the company&#8217;s users were browsing through 2G networks. The company was attracted by the new web development features and technology and decided to invest in a Progressive Web App.<\/p>\n<p style=\"text-align: justify;\"><strong>Flipkart Lite in return brought some amazing results for the company, such as-<\/strong><\/p>\n\n\n<ul class=\"wp-block-list\"><li><strong>70% increase <\/strong>in\nconversions<\/li><li><strong>40% higher<\/strong>\nre-engagement<\/li><li><strong>3x more time spent<\/strong>\non site by customers<\/li><li><strong>3x lower usage<\/strong>\nof data<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"973\" height=\"443\" src=\"https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/1.png\" alt=\"\" class=\"wp-image-10693\" srcset=\"https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/1.png 973w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/1-150x68.png 150w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/1-300x137.png 300w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/1-660x300.png 660w\" sizes=\"auto, (max-width: 973px) 100vw, 973px\" \/><figcaption><strong><a href=\"https:\/\/www.business-standard.com\/article\/companies\/flipkart-india-unit-s-fy18-losses-zoom-742-in-spite-of-39-rise-in-revenue-118102800636_1.html\">Flipkart Revenue Over Years<\/a><\/strong><a href=\"https:\/\/www.business-standard.com\/article\/companies\/flipkart-india-unit-s-fy18-losses-zoom-742-in-spite-of-39-rise-in-revenue-118102800636_1.html\"> <\/a><\/figcaption><\/figure>\n\n\n\n<p><strong>Case\n2: Twitter launches Twitter Lite<\/strong><\/p>\n\n\n<p style=\"text-align: justify;\">In the year 2017, Twitter came up own Progressive Web App, called the &#8220;Twitter Lite&#8221; as the default mobile web experience for all the users globally. Twitter has over 80% of its users on the mobile, so it wanted to improve the web experience by making it faster, and more engaging as most of the users were located in areas that had slow and flaky network conditions.<\/p>\n<p style=\"text-align: justify;\">Twitter Lite loads the page instantly and lowers the data usage by optimizing the images and relying on the cached data. It also helped in re-engaging the users with push notifications and allowed the users to add the Progressive Web Applications to their homescreens.<\/p>\n\n\n<p><strong>Some\nkey benefits that Twitter Lite brought to Twitter<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>75% increase<\/strong>\nin Tweets sent<\/li><li><strong>20% decreased<\/strong>\nbounce rates<\/li><li><strong>65% increase<\/strong>\nin pages per session<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"452\" src=\"https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/2.png\" alt=\"\" class=\"wp-image-10694\" srcset=\"https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/2.png 752w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/2-150x90.png 150w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/2-300x180.png 300w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/08\/2-660x397.png 660w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><figcaption><strong><a href=\"https:\/\/marketingland.com\/twitters-growing-in-asia-84922\">Growth of Global Users of Twitter<\/a><\/strong><a href=\"https:\/\/marketingland.com\/twitters-growing-in-asia-84922\"> <\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_are_Progressive_Web_Apps\"><\/span><strong>What are Progressive Web Apps?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p style=\"text-align: justify;\">A progressive web application uses the advantage of the latest technologies for combining web and mobile apps. It can be considered as a website that is built using web technologies but acts and feels like an application. The latest developments and advancements in the browser, the availability of service workers, and the Cache and Push APIs have enabled the web developers to allow the users to install web apps for their home screen, receive push notifications and even work offline.<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Progressive_Web_Apps\"><\/span><strong>Why Progressive Web Apps?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p style=\"text-align: justify;\">Progressive web apps take advantage of a broader web ecosystem, plugins, and community. Progressive web apps the businesses to increase their conversions, page visits, and session length of a visitor on the website. They can be an excellent option for businesses that don&#8217;t have a sufficient budget for investing in a mobile app.<\/p>\n\n\n<p><strong>Other added benefits of progressive web apps include-<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Improved performance<\/li><li>Faster loading times<\/li><li>Engaging user experiences<\/li><li>Less usage of data<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_architecture_of_Web_Apps\"><\/span><strong>The architecture of Web Apps<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p style=\"text-align: justify;\"><strong>Following are the two approaches for rendering a website-<\/strong><\/p>\n<ul>\n<li>\n<p style=\"text-align: justify;\">Server-side rendering (SSR)-<\/p>\n<p>this means that a website is rendered on the server, offering a quicker first load. Though, the navigation between pages requires downloading new HTML content. It works well different browsers, but it can face set-backs in terms of time taken for navigating between the pages and also loading a page requires a new round trip to the server<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p style=\"text-align: justify;\">Client-side rendering (CSR)-<\/p>\n<p>this allows the website to be updated in the browser quite instantly when navigation is done across pages. Though, it requires more of an initial download hit and extra rendering on the client at the beginning phase. Such websites are slower on an initial visit but can become faster for carrying out navigation.<\/p>\n<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">By mixing SSR with CSR can generate best results- as one render a website on the server, cache the contents, and then update the rendering on the client-side when needed. The first-page load becomes quicker because of the SSR, and then navigation between pages becomes smoother as the client can render the page with only the changed parts.<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Characteristics_of_Web_Apps\"><\/span><strong>Characteristics of Web Apps<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p style=\"text-align: justify;\"><strong>Following are some key characteristics of a progressive web app-<\/strong><\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"i_Progressive\"><\/span>i. <strong>Progressive<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">A web app needs to work on any device and enhance progressively, taking advantage of any features that are available on the user&#8217;s device and browser<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ii_Discoverable\"><\/span>ii. <strong>Discoverable<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">As progressive webs are a website, it should be discoverable in search engines. This is a significant advantage over the native applications, which still lag behind websites in terms of Searchability<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"iii_Linkable\"><\/span>iii. <strong>Linkable<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">A well-designed website should use the Uniform Resource Identifier (URI) for indicating the current state of the application. This enables web applications to retain or reload their state when the user has bookmarked or shared the URL of the app<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"iv_App-like_Interface\"><\/span>iv. <strong>App-like Interface<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">A progressive web application should look like a native app and needs to be built on the application shell model, having a minimal number of page refreshes<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"v_Connectivity-independent\"><\/span>v. <strong>Connectivity-independent<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">A progressive web app should work in areas which have low connectivity or even offline<\/p>\n<p style=\"text-align: justify;\">Along with the relative ease of deployment and maintenance of a website when compared to a native application in an app store<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"vi_Re-engageable\"><\/span>vi. <strong>Re-engageable<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">The progressive web applications are intended to achieve reusability of applications in a similar manner in which it achieved by the mobile application users. This can be done through features such as push notifications<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"vii_Installable\"><\/span>vii. <strong>Installable<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">A progressive web application needs to be installed on the user device&#8217;s home screen, thus making it readily available.<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"viii_Real-time_Updation\"><\/span>viii. <strong>Real-time Updation<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">Whenever new content is published, and the user is connected to the Internet, the published content should be present in the app<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ix_Safety\"><\/span>ix. <strong>Safety<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">As the progressive web applications are intended to have a more intimate user experience, it becomes crucial that these applications are hosted over HTTPS in order to prevent the man-in-the-middle attacks<\/p>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Terms-Related_to_Progressive_Web_Applications\"><\/span><strong>Terms-Related\nto Progressive Web Applications<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p style=\"text-align: justify;\"><strong>Following are some key terms that are associated with progressive web applications-<\/strong><\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Manifest\"><\/span><strong>1. Manifest<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">A web manifest file is a JSON file that follows the specifications defined by W3C. By using a web manifest, it is possible to run the web applications in full-screen mode as a standalone application, design an application that gets displayed once it is installed on the user device. With a web manifest, it is possible to assign a theme and background colour to the application. Additionally, Google Chrome on Android will be proactively suggesting that the user installs the web application by means of a web app install banner.<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Service_Workers\"><\/span>2. <strong>Service Workers<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">An important aspect of progressive web applications is that they can work offline. By using the service workers, it is possible to show data that was retrieved in the previous sessions of the application by using an IndexedDB or, alternatively, to show the application shell as well as inform the user that they are not connected to the Internet. Once the user reconnects to the Internet, then he can retrieve the latest data from the server.<\/p>\n<p style=\"text-align: justify;\">This is possible only because of service workers, which are event-driven scripts having access to domain-wide events, including the network fetches. Using service workers, it is possible to cache all static resources, which in turn, drastically reduces the network requests and improve the performance quite considerably as well.<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Application_Shell\"><\/span>3. <strong>Application Shell<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">An application shell is the minimum HTML, CSS, and JavaScript, which is required to power the user interface. A native mobile application includes the application shell as a constituent of its distributable, whereas the websites ordinarily request this over the network. Progressive web applications bridge this gap by placing the resources of application shell and assets in the cache of the browser.<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Background_Synchronization\"><\/span>4. <strong>Background Synchronization<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">Background sync is a web API that allows the users to defer the actions until he has stable connectivity. This is useful for ensuring that whatever the user wishes to send is actually sent despite the loss of Internet connectivity.<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Web_Push_Notifications\"><\/span>5. <strong>Web Push Notifications<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">Push Notifications are a way of allowing the users to opt-in to timely updates from sites that they like and also allowing them to re-engage them with customized and relevant content effectively. These work with server workers because of the background usage of the service workers. The Push and Notification use different yet complementary APIs. Push is invoked when the server supplies information to a service worker, and a notification denotes the action of a service worker or a web page script depicting the information to the users.<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_PRPL_Patterns\"><\/span>6. <strong>PRPL Patterns<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">PRPL stands for the<strong> P<\/strong>ush<strong> R<\/strong>ender<strong> P<\/strong>re-cache<strong> L<\/strong>oad pattern. It is a relatively new and experimental pattern that takes the advantages of modern web platform features or service workers for granularly delivering mobile experiences at faster rates.<\/p>\n<p><a href=\"https:\/\/www.esds.co.in\/enlight-cloud-hosting\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9651 size-full\" src=\"https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/02\/970x90.png\" alt=\"\" width=\"970\" height=\"90\" srcset=\"https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/02\/970x90.png 970w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/02\/970x90-150x14.png 150w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/02\/970x90-300x28.png 300w, https:\/\/www.esds.co.in\/blog\/wp-content\/uploads\/2019\/02\/970x90-660x61.png 660w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/a><\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7_Web_Storage\"><\/span>7. <strong>Web Storage<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">Web Storage allows the developers to face the instances wherein the user has temporarily lost his Internet connectivity. For making the Progressive Web Applications still usable in such cases, the web storage can be used for displaying the already saved data whenever needed.<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"8_HTTP2\"><\/span>8. <strong>HTTP\/2<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p style=\"text-align: justify;\">HTTP\/2 is a protocol that aims to make the applications faster, simpler and more robust. &nbsp;A powerful feature of the HTTP\/2 is Server Push, which is the ability of the server to send multiple responses for a single client request. In addition to the response to the original request, the server can push the additional resources to the client. The server doesn&#8217;t need to wait for the client to request some resources explicitly. HTTP\/2 allows the server to push the associated resources well ahead of time. These resources can be cached by the client and reused across the different pages.<\/p>","protected":false},"excerpt":{"rendered":"<p>Examples of Progressive Web Apps Case 1: Flipkart decides to go for Flipkart Lite Flipkart is the largest e-commerce site in India. The company updated its mobile site to a Progressive Web Application, called Flipkart Lite. Flipkart Lite delivers fast and streamlined experiences to the mobile users and combines the best of both- the web&#8230; <\/p>\n<div class=\"clear\"><\/div>\n<p><a href=\"https:\/\/www.esds.co.in\/blog\/how-user-experience-is-enhanced-by-progressive-web-applications\/\" class=\"gdlr-button small excerpt-read-more\">Read More<\/a><\/p>\n","protected":false},"author":61,"featured_media":10700,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1534],"tags":[2195,2194,2193,2192],"class_list":["post-10692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-architecture-of-web-apps","tag-e-commerce-site","tag-progressive-web-apps","tag-user-experience"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/posts\/10692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/comments?post=10692"}],"version-history":[{"count":10,"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/posts\/10692\/revisions"}],"predecessor-version":[{"id":10720,"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/posts\/10692\/revisions\/10720"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/media\/10700"}],"wp:attachment":[{"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/media?parent=10692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/categories?post=10692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esds.co.in\/blog\/wp-json\/wp\/v2\/tags?post=10692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}