{"id":1715,"date":"2022-11-29T07:19:24","date_gmt":"2022-11-29T07:19:24","guid":{"rendered":"https:\/\/blog.amt.in\/?p=1715"},"modified":"2022-11-29T07:19:24","modified_gmt":"2022-11-29T07:19:24","slug":"insights-to-progressive-web-apps","status":"publish","type":"post","link":"https:\/\/blog.amt.in\/index.php\/2022\/11\/29\/insights-to-progressive-web-apps\/","title":{"rendered":"Insights to Progressive Web Apps"},"content":{"rendered":"<p>A Progressive Web Application\u00c2\u00a0(PWA) is a type of\u00c2\u00a0application software\u00c2\u00a0delivered through the\u00c2\u00a0web, built using common web technologies including\u00c2\u00a0HTML,\u00c2\u00a0CSS\u00c2\u00a0and\u00c2\u00a0JavaScript. It is intended to work on any platform that uses a\u00c2\u00a0standards-compliant\u00c2\u00a0browser. Functionality includes working\u00c2\u00a0offline,\u00c2\u00a0push notifications, and device hardware access, enabling creating user experiences similar to\u00c2\u00a0native applications\u00c2\u00a0on\u00c2\u00a0desktop\u00c2\u00a0and\u00c2\u00a0mobile devices. Since a progressive web app is a type of\u00c2\u00a0webpage\u00c2\u00a0or\u00c2\u00a0website\u00c2\u00a0known as a\u00c2\u00a0web application, there is no requirement for developers or users to install the web apps via digital distribution systems like\u00c2\u00a0Apple App Store\u00c2\u00a0or\u00c2\u00a0Google Play.<\/p>\n<p>While web applications have been available for mobile devices from the start, they have generally been slower, have had fewer features, and been less used than native apps. But with the ability to work offline, previously only available to native apps, PWAs running on mobile devices can perform much faster and provide more features, closing the gap with native apps, in addition to being portable across both desktop and mobile platforms.<\/p>\n<p>PWAs do not require separate bundling or distribution. Publication of a progressive web app is as it would be for any other web page. PWAs work in any browser, but &#8220;app-like&#8221; features such as being independent of connectivity, install to home screen, and push messaging depend on browser support. As of April 2018, those features are supported to varying degrees by the\u00c2\u00a0Microsoft Edge,\u00c2\u00a0Google Chrome,\u00c2\u00a0Mozilla Firefox, and\u00c2\u00a0Apple Safari\u00c2\u00a0browsers, but more browsers may support the features needed in the future.\u00c2\u00a0Several businesses highlight significant improvements\u00c2\u00a0in a wide variety of\u00c2\u00a0key performance indicators\u00c2\u00a0after PWA implementation, like increased time spent on page, conversions, or revenue.<\/p>\n<p>At the launch of the\u00c2\u00a0iPhone\u00c2\u00a0in 2007,\u00c2\u00a0Steve Jobs\u00c2\u00a0announced that web apps, developed in\u00c2\u00a0HTML5\u00c2\u00a0using\u00c2\u00a0AJAX\u00c2\u00a0architecture, would be the standard format for iPhone apps. No\u00c2\u00a0software development kit\u00c2\u00a0(SDK) was required, and the apps would be fully integrated into the device through the\u00c2\u00a0Safari\u00c2\u00a0browser engine.\u00c2\u00a0This model was later switched for the App Store, as a means of preventing\u00c2\u00a0jailbreakers\u00c2\u00a0and of appeasing frustrated developers.\u00c2\u00a0In October 2007 Jobs announced that an SDK would be launched the following year.\u00c2\u00a0As a result, although Apple continued to support webapps, the vast majority of iOS applications shifted towards the App Store.<\/p>\n<p>Beginning in the early 2010s\u00c2\u00a0dynamic web pages\u00c2\u00a0allowed web technologies to be used to create interactive\u00c2\u00a0web applications.\u00c2\u00a0Responsive web design, and the screen-size flexibility it provides, made PWA development more accessible. Continued enhancements to HTML, CSS, and JavaScript allowed web applications to incorporate greater levels of interactivity, making native-like experiences possible on a website, and therefore on PWAs.<\/p>\n<p>Firefox released\u00c2\u00a0Firefox OS\u00c2\u00a0in 2013. It was intended to be an\u00c2\u00a0open-source\u00c2\u00a0operating system\u00c2\u00a0for running webapps as native apps on mobile devices, with Gaia built as its HTML5 interface. The development of Firefox OS ended in 2016.<\/p>\n<p>n 2015, designer Frances Berriman and\u00c2\u00a0Google Chrome\u00c2\u00a0engineer Alex Russell coined the term &#8220;progressive web apps&#8221;\u00c2\u00a0to describe apps taking advantage of new features supported by modern browsers, including\u00c2\u00a0service workers\u00c2\u00a0and\u00c2\u00a0web app manifests, that let users upgrade web apps to progressive web applications in their native\u00c2\u00a0operating system\u00c2\u00a0(OS). Google then put significant efforts into promoting PWA development for Android.\u00c2\u00a0With Apple&#8217;s introduction of service worker support for Safari in 2017,\u00c2\u00a0PWAs were now supported on the two most commonly-used mobile operating systems,\u00c2\u00a0Android\u00c2\u00a0and\u00c2\u00a0iOS.<\/p>\n<p>Progressive web apps are designed to work on any browser that is compliant with\u00c2\u00a0web standards. As with other cross-platform solutions, the goal is to help developers build cross-platform apps more easily than they would with native apps.\u00c2\u00a0According to Google Developers,\u00c2\u00a0the characteristics of a PWA are:<\/p>\n<ul>\n<li><b>Progressive<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Works for every user, regardless of browser choice, using\u00c2\u00a0progressive enhancement\u00c2\u00a0principles.<\/li>\n<li><b>Responsive<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Fits any form factor: desktop, mobile, tablet, or forms yet to emerge.<\/li>\n<li><b>Faster after initial loading<\/b>\u00c2\u00a0&#8211; After the initial loading has finished, the same content and page elements do not have to be re-downloaded each time.\n<ul>\n<li>Ordinary websites often already made use of the browser cache to avoid re-downloading the same data redundantly. But on progressive web applications, the same elements do not need to be re-rendered again.<\/li>\n<\/ul>\n<\/li>\n<li><b>Connectivity independent<\/b>\u00c2\u00a0\u00e2\u20ac\u201d\u00c2\u00a0Service workers\u00c2\u00a0allow offline uses, or on low quality networks.<\/li>\n<li><b>App-like<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Feels like an app to the user with app-style interactions and navigation.<\/li>\n<li><b>Fresh<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Always up-to-date due to the service worker update process.<\/li>\n<li><b>Safe<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Served via\u00c2\u00a0HTTPS\u00c2\u00a0to prevent snooping and ensure content hasn&#8217;t been tampered with.<\/li>\n<li><b>Discoverable<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Identifiable as an \u00e2\u20ac\u0153application\u00e2\u20ac\u009d by manifest.json\u00c2\u00a0and service worker registration, and discoverable by search engines.<\/li>\n<li><b>Re-engageable<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Ability to use\u00c2\u00a0push notifications\u00c2\u00a0to maintain engagement with the user.<\/li>\n<li><b>Installable<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Provides homescreen icons without the use of an App Store.<\/li>\n<li><b>Linkable<\/b>\u00c2\u00a0\u00e2\u20ac\u201d Can easily be shared via a URL, and does not require complex installation.<\/li>\n<\/ul>\n<p>The technical baseline criteria for a site to be considered a progressive web app by browsers were described by Russell in a follow-up post:<\/p>\n<ul>\n<li><b>Originate from a secure origin.<\/b>\u00c2\u00a0Served over TLS and green padlock displays (no active mixed content).<\/li>\n<li><b>Load while offline<\/b>\u00c2\u00a0(even if only a custom offline page). By implication, this means that progressive web apps require service workers.<\/li>\n<li><b>Reference a web app manifest<\/b>\u00c2\u00a0with at least the four key properties: name, short_name, start_url, and display (with a value of standalone or fullscreen)<\/li>\n<li><b>An icon at least 144\u00c3\u2014144 large in PNG format.<\/b><\/li>\n<li>Use of\u00c2\u00a0vector graphics\u00c2\u00a0that are indefinitely scalable and require smaller file sizes.<\/li>\n<\/ul>\n<p>The above is a brief about Progressive Web Apps. Watch this space for more updates on the latest trends in Technology.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Progressive Web Application\u00c2\u00a0(PWA) is<\/p>\n","protected":false},"author":1,"featured_media":1717,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[599,142,7],"tags":[600,144,18],"class_list":["post-1715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-software","category-progressive-web-apps","category-techtrends","tag-application-software","tag-progressive-web-apps","tag-technology"],"_links":{"self":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/comments?post=1715"}],"version-history":[{"count":1,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1715\/revisions"}],"predecessor-version":[{"id":1716,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1715\/revisions\/1716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media\/1717"}],"wp:attachment":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media?parent=1715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/categories?post=1715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/tags?post=1715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}