A Beginner's Guide to Progressive Web Apps
Published: 2018-07-11 15:22:08

---
title: A Beginner's Guide to Progressive Web Apps
published: true
cover_image: https://storage.googleapis.com/sales.appinst.io/2017/09/progressive-web-apps-beginners-guide.png
description: We walk through the basics of Progressive Web Apps.
canonical_url: https://appinstitute.com/a-beginners-guide-to-progressive-web-apps/

---

If you'll forgive the cliché, when it comes to technology - as with life - the only constant is change. Websites today look very different - and are able to do a whole lot more - than the<a href="https://info.cern.ch/hypertext/WWW/TheProject.html"><span style="font-weight: 400;"> very first website published in 1990</span></a><span style="font-weight: 400;">. Similarly, the mobile phones we now use are capable of so much more than that 17-year old cult favourite, the Nokia 3310. We no longer use browsers to only access web pages, but also web apps, while the apps we load on our mobile phones could be either native, or hybrid. And soon it might be neither.</span>
<b></b>
<p dir="ltr"><span style="font-weight: 400;"><a href="https://appinstitute.com/progressive-web-apps" target="_blank">Progressive Web apps</a> (PWAs) is a term - first used in 2015 - to describe the combined use of modern technologies, design concepts, and </span><a href="https://developer.mozilla.org/en-US/docs/Web/API"><span style="font-weight: 400;">Web APIs</span></a><span style="font-weight: 400;"> to provide an app-like experience on the mobile web. More importantly, they are device-agnostic, and run inside modern web browsers, with no need to first download anything from an app store.</span></p>
<p dir="ltr"><span style="font-weight: 400;">Obviously, there is a lot more to Progressive Web Apps that can't be covered in a simplified summary, so read on to become more familiar with a term you'll be encountering a lot more in the coming months.</span></p>

<h2 dir="ltr"><b>Progressive Web Apps in action</b></h2>
<p dir="ltr"><span>Despite being a relatively new development, many large brands have already started implementing Progressive Web Apps, and some have already attributed amazing results to their PWAs.</span></p>

<h3 dir="ltr"><b>Twitter</b></h3>
<p dir="ltr"><span>The </span><a href="https://developers.google.com/web/showcase/2017/twitter"><span>Twitter Lite Progressive Web App</span></a><span> became the default mobile browser experience for all users in April 2017. The benefit to Twitter included:</span></p>

<ul>
 	<li dir="ltr"><span>65% increase in pages per session</span></li>
 	<li dir="ltr"><span>75% increase in Tweets sent</span></li>
 	<li dir="ltr"><span>20% decrease in bounce rate</span></li>
</ul>
<img src="https://storage.googleapis.com/sales.appinst.io/2017/09/twitter-lite-pwa-example.png" alt="twitter-lite-pwa-example" width="614" height="409" class="size-full wp-image-15300 aligncenter" />
<p dir="ltr"><span>While users benefited from an experience that </span><b>used less than 3% of the device storage space compared with the Android native app</b><span> and more impressively </span><b>helped reduce data consumption by as much as 70%</b><span>. And when you're browsing using mobile data as opposed to WiFi, this is significant. The reduced data consumption also opens up the Twitter experience to those on slower connections, which really matters when <a href="https://blog.twitter.com/official/en_us/topics/product/2017/introducing-twitter-lite.html">45% of connections still use 2G</a>. </span></p>

<h3 dir="ltr"><b>AliExpress and Lancôme</b></h3>
<p dir="ltr"><span>Mobile commerce is growing three times faster than e-commerce, but </span><a href="https://www.aliexpress.com/"><span>AliExpress</span></a><span> had trouble creating a mobile web experience that was as fast as their mobile app, while </span><a href="https://www.lancome-usa.com/"><span>Lancôme</span></a><span> had trouble converting on mobile. Both brands addressed this by creating a PWA, and </span></p>
<p dir="ltr"><strong>Both brands addressed this by creating a PWA, and <a href="https://developers.google.com/web/showcase/2016/aliexpress">AliExpress saw</a>:</strong></p>
<p dir="ltr"><img src="https://storage.googleapis.com/sales.appinst.io/2017/09/aliexpress1.png" alt="aliexpress1" width="350" height="601" class="alignleft size-full wp-image-15310" /></p>

<ul>
 	<li dir="ltr"><span>a 104% increase in conversions for new users across all browsers, with an 82% increase in iOS conversion rates</span></li>
 	<li dir="ltr"><span>2X more pages visited per session per user, across all browsers</span></li>
 	<li dir="ltr"><span>a 74% increase in time spent per session across all browsers
</span></li>
</ul>
<p dir="ltr"><strong>And <a href="https://developers.google.com/web/showcase/2017/lancome">Lancôme experienced</a>:</strong></p>

<ul>
 	<li dir="ltr"><span>a 17% increase in conversions</span></li>
 	<li dir="ltr"><span>a 53% increase in mobile sessions on iOS</span></li>
 	<li dir="ltr"><span>an 8% increase in conversion rates on recovered carts via Push Notifications, with an 18% open rate from Push Notifications</span></li>
</ul>
<h3 dir="ltr"><b>Forbes</b></h3>
<p dir="ltr"><span>Progressive Web Apps aren't limited only to social networks and e-commerce sites, as demonstrated by </span><a href="https://www.forbes.com/"><span>Forbes</span></a><span>, who </span><a href="https://www.niemanlab.org/2017/03/forbes-rebuilt-its-new-mobile-website-as-a-progressive-web-app/"><span>replaced their mobile site with a PWA enabled site</span></a><span>, leading to:</span></p>

<ul>
 	<li dir="ltr"><span>a 43% increase in sessions per user</span></li>
 	<li dir="ltr"><span>3X the scroll depth compared with the traditional mobile site</span></li>
 	<li dir="ltr"><span>2X the average user session duration</span></li>
 	<li dir="ltr"><span>pages that load in 0.8s, down from 3 -12 seconds</span></li>
</ul>
&nbsp;
<h2><b>So where did progressive web apps come from? </b></h2>
<p dir="ltr"><span style="font-weight: 400;">Before dissecting Progressive Web Apps, we have to first revisit web apps - without the modifier. The earliest websites, like much of the web in the early 90s, weren't terribly dynamic or interactive. They also weren't that common, with the limitations of CGI curtailing wide-scale adoption. </span></p>
<p dir="ltr"><span style="font-weight: 400;">The introduction of scripting languages and frameworks such as ASP, ColdFusion, and PHP helped <a href="https://www.evolutionoftheweb.com/">move things forward</a>, but it was only following the </span><a href="https://www.w3schools.com/xml/ajax_intro.asp"><span style="font-weight: 400;">common adoption of Ajax</span></a><span style="font-weight: 400;"> that web applications started to become truly dynamic. The use of Ajax made it easier to create asynchronous websites that were capable of sending data to, and retrieving data from, a web server in the background. Websites using Ajax were able to update and change content on a page dynamically, without having to reload the page at all. </span></p>
<p dir="ltr"><span style="font-weight: 400;">Early adopters of Ajax included Google - in the first releases of Gmail and Maps - and </span><a href="https://www.kayak.com/"><span style="font-weight: 400;">Kayak</span></a><span style="font-weight: 400;">.</span></p>
<p dir="ltr"><span style="font-weight: 400;">But this leap forward was not entirely flawless. The shortcomings of Ajax included... </span></p>

<ul>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Reduced functionality if a user has JavaScript disabled in their browser, or is using a browser that does not support JavaScript.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Early browsers also had problems registering dynamically generated pages, resulting in erratic behaviour when using the back</span><span style="font-weight: 400;"> button, and making it difficult to bookmark pages.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">With the exception of Google, most web crawlers were unable to execute JavaScript, making content on pages that use Ajax inaccessible.</span></li>
</ul>
<p dir="ltr"><span style="font-weight: 400;">There were workarounds for these problems, but they often ended up making the code of the web technology even more complex...</span></p>
<p dir="ltr"><span style="font-weight: 400;">Without Ajax we might have been spared the Web 2.0 label that also entered popular use in 2004. But we would probably have had to wait longer for many of the web apps we now use daily without even thinking of them as web apps: </span><a href="https://www.youtube.com/"><span style="font-weight: 400;">YouTube</span></a><span style="font-weight: 400;">, </span><a href="https://www.facebook.com/"><span style="font-weight: 400;">Facebook</span></a><span style="font-weight: 400;">, </span><a href="https://twitter.com/?lang=en"><span style="font-weight: 400;">Twitter</span></a><span style="font-weight: 400;">, almost anything </span><a href="https://www.businessinsider.com/alphabet-google-company-list-2016-10"><span style="font-weight: 400;">Google</span></a><span style="font-weight: 400;">, </span><a href="https://evernote.com/"><span style="font-weight: 400;">Evernote</span></a><span style="font-weight: 400;">, </span><a href="https://www.dropbox.com/"><span style="font-weight: 400;">Dropbox</span></a><span style="font-weight: 400;">, and more. </span></p>
<p dir="ltr"><span style="font-weight: 400;">But the arrival of smartphone operating systems (iOS, Android, and very briefly Windows Phone) complicated things. Each of the web apps listed above, and many others not mentioned here, now also have a mobile app counterpart. And while larger brands such as Google and Facebook have the resources to manage continued development of web apps in addition to an iOS and Android app, the same can't be said for new startups, SMBs, and independent developers.</span></p>
<p dir="ltr"><img src="https://storage.googleapis.com/sales.appinst.io/2017/09/StatCounter-os_combined-ww-monthly-201608-201708.png" alt="StatCounter-os_combined-ww-monthly-201608-201708" width="1280" height="720" class="alignnone size-full wp-image-15294" /></p>
<span style="font-weight: 400;">Favouring one smartphone OS over another was once feasible, but now, even though</span><a href="https://gs.statcounter.com/os-market-share/mobile/worldwide"><span style="font-weight: 400;"> Android's global market share far exceeds</span></a><span style="font-weight: 400;"> that of iOS,</span><a href="https://gs.statcounter.com/os-market-share/mobile/united-states-of-america"><span style="font-weight: 400;"> iOS still leads in certain key regions</span></a><span style="font-weight: 400;">. Meaning if you are developing an app that you want to succeed in almost all markets, you have little choice but to develop for both Android and iOS. </span>Which finally brings us to progressive web apps.
<h2 dir="ltr"><b>How are Progressive Web Apps different?</b></h2>
<p dir="ltr"><span style="font-weight: 400;">Further enhancements of web apps did not stall after the introduction of Ajax. JavaScript continued to mature, and the introduction of JavaScript frameworks and libraries helped web apps become even more dynamic. But they were now operating alongside mobile apps, and as society moved to spending more time on mobile devices than desktop devices, the limitations of web apps became more obvious.</span></p>
<p dir="ltr"><span style="font-weight: 400;">The biggest difference, initially, was that native apps - apps designed specifically for iOS and Android - offered a better user-experience. They could be accessed faster, and performance overall was smoother than that offered by a web app on a mobile device. Many native apps could still be used even with no internet connection, could still update information even when running in the background, and - with proper use of push notifications - could have higher engagement rates.</span></p>
<p dir="ltr"><span style="font-weight: 400;">Continued development of CSS3 and JavaScript, the finalisation of HTML5, along with more powerful browsers and processors paved the way for hybrid apps, leading ultimately to Progressive Web Apps.</span><a href="https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/"><span style="font-weight: 400;"> First introduced by Frances Berriman and Alex Russell</span></a><span style="font-weight: 400;"> in a 2015 blog post, Progressive Web Apps differ from native, hybrid, and regular web apps in that:</span></p>

<ul>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">They work on any mobile device with a supported browser, regardless of operating system, and even the slowest of connections.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">They do not need to be downloaded and installed via an app store.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Even though they are not native or hybrid apps, they can still be added to your home screen.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Unlike regular web apps, they continue to update information even when running in the background.</span></li>
</ul>
<p dir="ltr"><span style="font-weight: 400;">To be fair, Berriman and Russel were giving a name to something that already existed, but they took it further a year later by setting forth some baseline criteria for web apps in order for them to be considered Progressive Web Apps.</span></p>

<ul>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">They must originate from a secure origin and sent over TLS (sometimes referred to as SSL), and they must not include any mixed content.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">They must be able to load while offline (even if it is only a custom offline page). This means that Progressive Web Apps require Service Workers.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">They must reference a manifest with at least the following properties:</span>
<ul>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">name</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">short_name</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">start_url</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">display with a value of standalone or full screen</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">An icon at least 144×144 large in png format. E.g.: "icons": [ { "src": "/images/icon-144.png", "sizes": "144x144", "type": "image/png" } ]</span></li>
</ul>
</li>
</ul>
<p dir="ltr">Google is now heavily involved in Progressive Web Apps, helping to shape standards, while also building support for these standards into Chrome. They have published a <a href="https://developers.google.com/web/progressive-web-apps/checklist"><span style="font-weight: 400;">Progressive Web Apps checklist</span></a><span style="font-weight: 400;"> which lists all the things they believe a Progressive Web App should have, both as a baseline and as an ideal. Their baseline expands on the original by including the following:</span></p>

<ul>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">They must be responsive on tablets and mobile devices.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">First load must be fast, even on 3G.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Site must work cross-browser.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Page transitions should be "snappy", even on slow connections.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Each page must have a URL.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">The </span><a href="https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/"><span style="font-weight: 400;">Web App Manifest</span></a><span style="font-weight: 400;"> must now also include metadata before it can be added to the home screen. </span></li>
</ul>
<p dir="ltr"><b>What makes progressive web apps awesome?</b></p>
<p dir="ltr"><span style="font-weight: 400;">There are several reasons for Progressive Web Apps being so awesome that they are being talked about so much that they risk becoming an annoying buzzword. These include:</span></p>

<ul>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">They cost less, and are faster to develop and deploy, than native and hybrid apps. Most PWAs can be implemented using your current web framework, with little to no need for additional programming languages and technologies.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">The app will be easy to expand with new functionality if needed. Many of the current key features - push notifications, pinning to the home screen, sync in the background, offline functionality - are meant to emulate an ‘app-like’ experience, supported by an app-like look and feel.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">PWAs are cross-platform, so there's almost no need to adapt it for different devices, especially if you've paid extra attention to responsiveness.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Fully supported by Google, with other key browser developers rapidly coming on board.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">You're able to get your app to market faster since there's no need to first submit to the Google Play store, or the Apple App Store.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">They are fully indexable by search engines, so no need for extra app store marketing efforts.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Less friction in getting users to use the app.</span></li>
</ul>
<p dir="ltr"><span style="font-weight: 400;">Expanding on these further,  the key characteristics of PWAs - over and above the baseline criteria - are that they should be:</span></p>

<ul>
 	<li dir="ltr" style="font-weight: 400;"><b>Progressive</b><span style="font-weight: 400;"> - they must work for every user, regardless of browser choice because they’re built with progressive enhancement as a core principle. Progressive enhancement means that the core content (and features) will always be available regardless of browser or connection speed. More advanced presentation and functional features are only added if supported by the browser.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>Responsive</b><span style="font-weight: 400;"> - they must fit any form factor: desktop, mobile, tablet, or forms yet to emerge, without requiring any specific action on the user's part.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>Connectivity independent</b><span style="font-weight: 400;"> - through the use of </span><a href="https://developers.google.com/web/fundamentals/getting-started/primers/service-workers"><span style="font-weight: 400;">service workers</span></a><span style="font-weight: 400;">, they must work offline, and on low-quality networks. Offline functionality can be limited to certain features only.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>App-like</b><span style="font-weight: 400;"> - they must feel like an app to the user, with app-style interactions and navigation, all of which should also be snappy and smooth.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>Fresh</b><span style="font-weight: 400;"> - they must always be up-to-date thanks to the service worker update process. This is dependent on the user being connected to the internet.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>Safe</b><span style="font-weight: 400;"> - they can only be served via HTTPS, preventing man-in-the-middle attacks, and ensuring that content hasn’t been tampered with.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>Discoverable</b><span style="font-weight: 400;"> - they must be identifiable as “applications” through the inclusion of a W3C compliant web app manifest, and the service worker registration scope, allowing search engines to find them. This gives PWAs a significant advantage over native apps, which are not searchable.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>Re-engageable</b><span style="font-weight: 400;"> - they can make re-engagement easy through features like push notifications. However, use of push notifications is a feature, not a requirement.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>Installable</b><span style="font-weight: 400;"> - they must allow users to “keep” any apps they find most useful on their home screen, without the hassle of an app store.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><b>Linkable</b><span style="font-weight: 400;"> - they should be easy to share via a URL, and not require a complex installation.</span></li>
</ul>
&nbsp;
<h2 dir="ltr"><b>The Tech Behind Progressive Web Apps</b></h2>
<p dir="ltr"><span style="font-weight: 400;">As noted earlier, PWAs are mostly standard HTML5, CSS3, and JavaScript. Two technologies that combine with this to 'create' a PWA are web app manifests and service workers.</span></p>

<h3 dir="ltr"><b>Web app manifests</b></h3>
A web app manifest is a simple JSON file that controls how the app appears to users on a mobile device, directs what the user can launch, and defines the app appearance at launch. Some of the things you can control include:
<ul>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">whether or not to use the browser's UI, including the address bar.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">the use of a splash screen. When launching a PWA from the home screen, a few things need to happen. Without the use of a splash screen, the screen would go white and appear to have stalled.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">the page orientation. Very few apps need to run in landscape mode, but if yours does, it enhances the UX if you enforce this at launch.</span></li>
 	<li dir="ltr" style="font-weight: 400;"><span style="font-weight: 400;">Set the theme colour. You can save a lot development time by setting the theme colour in the manifest instead of making changes site wide. This controls the colour of various UI elements, ensuring they closely match the colours of your website.</span></li>
</ul>
<p dir="ltr"><span style="font-weight: 400;">The web app manifest is also used by Chrome to determine whether or not to display a Web App Install Banner, and is referenced in your HTML through the following addition</span></p>
<p dir="ltr"><em>&lt;link rel="manifest" href="/manifest.json"&gt;</em></p>

<h3 dir="ltr"><b>Service workers</b></h3>
<p dir="ltr"><a href="https://medium.com/@davideast/chrome-developer-summit-recap-1137b022b2dc"><span style="font-weight: 400;">A Google engineer, Jeff Posnick</span></a><span style="font-weight: 400;">, described service workers as:</span></p>
<p dir="ltr"><span style="font-weight: 400;"><strong>An air traffic controller...</strong> Think of your web apps requests as planes taking off. Service Worker is the air traffic controller that routes the requests. It can load from the network or even from the cache.</span></p>
<p dir="ltr"><span style="font-weight: 400;">It is a script file that runs independently of your web site, and it is this file that allows your app to work even when not connected to the internet, while also controlling background sync. It is also used for push notifications, and will also control future PWA features such as geofencing, etc. PWAs are able to work offline because one of the functions of service workers is to automatically cache assets specified by you. And remembering how one of Google's baseline criteria for a PWA is that it is served over TLS, service workers can only be registered on sites served securely.</span></p>
<p dir="ltr"><span style="font-weight: 400;">Google has developed </span><a href="https://developers.google.com/web/tools/lighthouse/"><span style="font-weight: 400;">an open-source tool for auditing</span></a><span style="font-weight: 400;"> the performance and quality of any web page, including Progressive Web Apps. While it is a great tool to audit any website, it is especially useful if you decide to adapt your website as a Progressive Web App. As highlighted earlier in this article, there are certain criteria that need to be met in order for a website to be recognised as a PWA, but overall performance is especially important since PWAs are intended for users on a mobile device. However, don’t focus only meeting the criteria and passing the Lighthouse audit, because in doing so there is always the risk that you ignore user-experience.</span></p>
&nbsp;
<h2 dir="ltr"><b>Disadvantages of P</b><b>rogressive Web Apps</b></h2>
<p dir="ltr"><span style="font-weight: 400;">The biggest disadvantage of PWAs is that they aren't currently supported by all mobile browsers. Google's baseline criteria does state "<strong>a </strong></span><b>site must work cross-browser</b><span style="font-weight: 400;">" (emphasis added), and since much of the PWA is developed using standard HTML5, etc. they will. What is currently lacking in Safari and Microsoft Edge is support for service workers. Service workers aren't needed for the site to operate properly, only for the app-like features.</span></p>
<p dir="ltr"><img src="https://storage.googleapis.com/sales.appinst.io/2017/09/StatCounter-browser-ww-monthly-201608-201708.png" alt="StatCounter-browser-ww-monthly-201608-201708" width="1280" height="720" class="alignnone size-full wp-image-15295" /></p>
<p dir="ltr"><span style="font-weight: 400;">But since Chrome dominates in almost all markets, this shouldn't be a deterrent from investing in a PWA now. Support for service workers is</span><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/"><span style="font-weight: 400;"> in development for Microsoft Edge</span></a><span style="font-weight: 400;">, and has now</span><a href="https://m.phillydevshop.com/apples-refusal-to-support-progressive-web-apps-is-a-serious-detriment-to-future-of-the-web-e81b2be29676"><span style="font-weight: 400;"> also shown up in WebKit</span></a><span style="font-weight: 400;">, although this doesn't guarantee that it will be supported by Safari Mobile anytime soon.</span></p>
<p dir="ltr"><span style="font-weight: 400;">Additionally, service workers currently only support push notifications and background sync, with features found in many business related apps - like geofencing - notably absent. However, this too should not be a deterrent since PWAs are still relatively new, but with Google supporting and hyping them, we can expect to see lots of features common to native apps being added in the near future. And hopefully, this will also include the ability to access system features, and the ability to interact with other PWAs.</span></p>
<p dir="ltr"><span style="font-weight: 400;">It should be noted that Google is</span><a href="https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen"><span style="font-weight: 400;"> already automatically adding an Android wrapper to some PWAs</span></a><span style="font-weight: 400;">, meaning that on Android devices they can show up in the Apps screen. Similarly, Microsoft is also testing adding a Windows wrapper to some PWAs. These apps are then added to the Windows Store, and appear as apps in Bing search results. Meaning that Google and Microsoft are already seeing PWAs as being equal to native apps. In a recent blog post, </span><a href="https://fberriman.com/2017/06/26/naming-progressive-web-apps/"><span style="font-weight: 400;">Berriman responded to criticism</span></a><span style="font-weight: 400;"> over the term Progressive Web Apps, and he ends off by reminding us that (emphasis added):</span></p>
<p dir="ltr"><span style="font-weight: 400;">PWAs are just a bunch of technologies with a zingy-new brand name that keeps the open web going a bit longer, that helps it compete with the proprietary, the closed, until the next thing (and hopefully the next thing) comes along to keep it sharp and relevant. </span><b>It’s for the next billion users who come online and open a browser and go looking for what’s out there, for those users who have to pay per mb for their downloads, who have old phones, who don’t want to, or can’t, be on a native-app-based operating system.</b></p>

<h2 dir="ltr"><b>Conclusion</b></h2>
<p dir="ltr"><span style="font-weight: 400;">Progressive Web Apps are - for want of a better phrase - a new technology, but one that has already demonstrated incredible benefits, not least of which is the lower development cost compared to native apps. Reaching your full audience with a native app requires developing two apps, one for iOS and one for Android. Add to that the cost of ongoing maintenance to ensure it works with each new OS version, along with some backward compatibility for users with an older OS. With a PWA you only develop or adapt a single version of your website/web app: users with a browser that doesn't fully support PWAs can still access your site, </span><b>they just won't get the full app-like experience</b><span style="font-weight: 400;">. And as shown by the real-world examples above, there are almost immediate benefits for both you as a business owner, and for your audience.</span></p>
<small>To learn more about the PWA features supported by AppInstitute, click </small><a href="https://appinstitute.com/progressive-web-apps/" target="_blank"><small>here</small></a>.

<hr />