Progressive Web Applications

A Progressive Web App (PWA) is a web app that uses the latest advances in web technologies and browser support to deliver users an app-like experience. Like any traditional mobile app, a PWA can be launched from an icon installed on the mobile home screen, data can be cached for offline use and can receive push notifications even when the browser is closed. PWAs don't have a navigation bar or URL bar usually seen in web browsers. Thus, they can deliver the same fullscreen experience as mobile apps.

Compared to mobile web, PWAs have better performance and thereby improve user retention and engagement. At the same time, unlike native apps, they don't need long downloads and installs. They're also easier to deploy and maintain since developers don't have to worry about different versions of the app out there.

Discussion

  • Why do we need PWA?
    Progressive Web Apps: What, Why, and How?. Source: Google Developers YouTube, 2017.

    The next billion users to come online will be from the developing world and they are likely to do so from their smartphones rather than desktops. They are likely to consume rich multimedia and do voice-based searches. They're also likely to use low-end devices with limited memory, storage and processing.

    53% of users leave a page that takes longer than 3 seconds. An average mobile web page takes 19 seconds to load on a 3G connection. Among Indian mobile users, 33% run out of storage every day. 79% of shoppers won't return to slow sites. 20% users are lost at every step of native app installation process.

    Hybrid apps tried to bring app-like experience by wrapping web apps into installable mobile apps but this approach may give way to PWA. Many others tried to deliver app-like experiences but sacrificed web linkability in the process. What we need is a way to improve user experience even on low-end devices with limited memory and slow or no connections. PWA aims to deliver this.
  • What's so "progressive" about PWA?

    PWA are web apps that "progressively change with use and user consent to give the user a more native-app-like experience." Unlike native apps, PWA don't ask users upfront permissions to install the app or access private data. PWA involves minimum friction for users. If the user is happy with the website, she can choose to add it to the homescreen. The site earns the right to become an app. It becomes progressively an app.

    If new features are introduced into web standards (example, Payment Request API, Credential Management API or WebVR), and when browsers support them, and when apps start using them, the entire experience becomes richer and more progressive for users. The experience is seamless. It doesn't involve new installs. Users can continue using older versions of browsers until they are ready. We call this progressive enhancement. This means that even on browsers that don't support service workers, progressive enhancement allows those browsers to display content. It's been said that progressive enhancement is the opposite of graceful degradation.

    Let's also note that publishers can deploy a PWA without the approval process that native apps go through to get listed on an app store.

  • What are the key enablers of PWA?
    Service workers are essential for PWA. Source: Kumar, 2016.
    Service workers are essential for PWA. Source: Kumar, 2016.

    We can identify three key enablers of PWA:

    • Service Workers: These cache data, serve data from cache in offline mode or when downloading fresh content in the background, and enable push notifications. While service workers do caching for offline mode, they also bring reliability in the face of varying network conditions. We can view service workers as proxies implemented in JavaScript. These are proxies listening for network activity, intercepting them and handling them programmatically.
    • Application Shell Architecture: The app's layout is already with the service worker and hence this can be shown to user while content is being downloaded in the background. Thus, the "app shell" is almost instantly shown to the user without any waiting time. We can think of this shell as minimal HTML, CSS and JS without the dynamic content. App shell is not a Web API but really a design approach that works nicely with the capabilities of service workers.
    • Application Manifest: This tells the browser that the mobile website can be installed as an app.
  • What are the characteristics of a good PWA?

    In general, Google states that a delightful web experience needs to be fast, integrated, reliable and engaging. To quality as PWA, an app should have the following characteristics:

    • Progressive: Works across browsers and enabled with progressive enhancement.
    • Responsive: Works on a variety of devices of different form factors.
    • Connectivity-independent: Service workers make this possible by serving from cache.
    • App-like: Browser tabs and navigation are replaced with app shell architecture and app style navigation.
    • Fresh: Service workers keep dynamic content up to date.
    • Safe: All communication is over HTTPS.
    • Discoverable: Manifest file allows them to be identified as PWA. Search engines can find them.
    • Re-engageable: Push notifications keep user engagement and retention high.
    • Installable: Add to homescreen without requiring download and install via an app store.
    • Linkable: Deep link to specific pages within the app. Power of web linking is not sacrificed.
  • Is PWA a new web standard?

    No. Making a PWA is simply using existing web standards and adopting certain best practices to improve user experience. PWAs combine the best of the web and native apps.

    Having said that, browsers and platforms can recognize an app as PWA and give it special handling. For example, they may make it easier to add a PWA to homescreen, list it among installed native apps or even add it to their app stores.

  • What tools and techniques are available for building a PWA?
    Cached app shell loads first while dynamic content is shown when available. Source: Osmani and Gaunt, 2015.
    Cached app shell loads first while dynamic content is shown when available. Source: Osmani and Gaunt, 2015.

    Since PWA uses an app shell, it's important to keep the shell minimal. The app infrastructure and UI should be separated from the data. The former can be cached and only data needs to be fetched when changes occur.

    The use of PRPL pattern is common when building a PWA. Polymer templates can be used for this. HTTP/2 server push and/or the use of <link rel="preload"> can improve performance. Code splitting and lazy loading have been suggested. Feature detection and CSS fallbacks can help in delivering progressive enhancements. Consider using Knockout for small projects.

    The Application tab of Chrome Developer Tools is useful during development. It also comes with Lighthouse, which can give a PWA conformance score for your app. HN PWA is a useful reference that has Lighthouse scores of different frameworks. The Service Worker Cookbook, PWABuilder, Workbox, sw-precache and sw-toolbox are useful resources. In Chrome or Opera, chrome://serviceworker-internals can be useful. Osmani and Gaunt mention other useful tips and tricks.

  • Can I use PWA along with Accelerated Mobile Pages (AMP)?
    A comparison of AMP and PWA. Source: Backaus, 2016.
    A comparison of AMP and PWA. Source: Backaus, 2016.

    PWA loads an app shell first while service workers download and cache the dynamic content in the background. Cache helps when users revisit the page but PWA does not cut down on load time for the first access. This is the problem that Accelerated Mobile Pages (AMP) aims to solve.

    AMP gives the experience of "instant" loading of content at first access. They achieve this by statically laying out content and avoiding JS execution. In addition, AMP caches content for subsequent requests. AMP is suitable for static content but when dynamic functionality is required (push notifications, web payments, etc.) PWA is more suitable.

    In fact, AMP can work nicely with PWA. Different models have been proposed: AMP as PWA, AMP to PWA, AMP in PWA. Thus, AMP and PWA should be seen as complementary technologies. As an example, AMP HTML can be the canonical data format that's downloaded and cached by PWA service workers. Alex Russell says of AMP and PWA,

    AMP gets content in front of users fast. PWA deliver reliable performance for re-visits.
  • How does PWA relate to Single Page Applications (SPAs)?

    SPAs are heavy on JavaScript and regardless of the framework of choice they use the App Shell Architecture. Shell is served first to the user while JavaScript downloads and displays dynamic content to complete the view. SPAs can now benefit by adopting PWA to precache content, sync to dynamic content in the background and reuse content from cache. This means that SPAs are fundamentally unchanged but they are powered by PWA best practices to give better user experience.

    In fact, SPAs usually load only data and render them on the client side. With PWA, server-side rendering is preferred. Client-side rendering should be kept minimal to improve user experience.

    Some claim that you need an SPA to build a PWA. In other words, a site that already has an app-like interface will be easy to transition to PWA. However, Condé Nast makes the point that it's perfectly possible to build a PWA without it being an SPA.

  • How is browser and platform support for PWA?

    Since PWA is based on web standards, developers need to consider support for those standards. This would include parsing a manifest file, adding to homescreen, supporting service workers and so on. As of November 2017, Google Chrome and Mozilla Firefox support it but Safari doesn't. Jake Archibald maintains current support for service workers in browsers.

    There's no consensus on menu items such as "Add to Homescreen", which may be phrased differently in each browser.

    Where cross-browser support is lacking, a native mobile app may be better than a PWA. It's also been suggested that having an app as PWA plus native or hybrid variants may give users more choice.

    React, Preact, Angular and Vue.js are some examples of platforms that have support for service workers and app manifest file generation.

  • Are there good examples of PWA?

    A curated list of ten PWA apps includes Ali Express, Flipkart Lite, Wego, Trivago, Flipboard and Telegram. Flipkart Lite is an e-commerce app from India. Air Berlin that allows for online check-in and displays cached boarding cards in offline mode. Twitter, Lyft, Uber and Starbucks are some big names that have taken the PWA route. Other PWA examples include Wired, The Washington Post, The Guardian, The Weather Company, Forbes and Financial Times. AirHorner showcases PWA capabilities well.

  • Has PWA proven itself in the real world against web apps and native mobile apps?

    Here are some success stories:

    • Twitter Lite, built as PWA with React and Node.js, has achieved 75% increase in tweets and reduced data usage by as much as 70%.
    • Google PWA install banners have 5-6x more conversions than native install banners.
    • The Weather Channel achieved 80% faster loading with PWA.
    • Lancôme's PWA version of its e-commerce site gave 84% decrease in time to interaction and 17% increase in conversion.
    • India's MakeMyTrip saw conversion rate triple and a 160% increase in shopper sessions.
    • Alibaba's PWA has brought 76% rise in conversions and four times higher interaction rate.
    • Forbes has seen a 100% increase in session duration and more 43% more sessions per user.
  • Is PWA only for the mobile world?

    No. PWA can be used to enhance desktop experience as well. Samsung DeX is an example of this. While Chrome for Android supports PWA, desktop version of Chrome will also start supporting PWA in 2018. If we consider VR experiences within a browser using WebVR, PWA can enable these on mobile as well as desktop.

Milestones

2011

It becomes possible to bookmark web apps to the homescreen.

Oct
2014

Web app manifest is now a JSON file allowing us to specify app name, icon and how the app should be launched. The implies that we no longer need to give configuration in the head part of the HTML page.

Dec
2014

Chrome starts supporting service workers.

Jun
2015

Google engineer Alex Russell explains PWA.

May
2016

Google announces PWA.

Oct
2017

Mozilla announces that will embrace PWA, starting first with Android. Firefox has supported service workers and push notifications since 2016.

References

  1. Arsenault, Cody. 2017. "Progressive Web Apps The Right Way." KeyCDN Blog. May 25. Accessed 2017-12-02.
  2. Backaus, Paul. 2016. "What Are Progressive Web AMPs?" Smashing Magazine. December 8. Accessed 2017-12-02.
  3. Bellman, Eric. 2017. "The End of Typing: The Next Billion Mobile Users Will Rely on Video and Voice." The Wall Street Journal. August 7. Accessed 2017-12-04.
  4. Benes, Ross. 2017. "Wired is launching a Progressive Web App to boost page speed." Digiday. October 23. Accessed 2017-12-02.
  5. David, Matthew. 2017. "The 5 best tools for building progressive web apps fast." TechBeacon. February 22. Accessed 2017-12-02.
  6. De Silva, Kimberly. 2017. "Progressive Web Apps: The Next Mobile Experience?" Bizness Apps. August 15. Accessed 2017-12-02.
  7. DoubleClick. 2016. "The need for mobile speed: Better user experiences, greater publisher revenue." DoubleClick. September. Accessed 2017-12-04.
  8. Dube, Divya. 2017. "10 Best Progressive Web Apps." Mofluid. September. Accessed 2017-12-02.
  9. Edwards, Ada Rose. 2016. "The Building Blocks Of Progressive Web Apps." Smashing Magazine. September 5. Accessed 2017-12-02.
  10. Farrugia, Kevin. 2016. "A Beginner's Guide To Progressive Web Apps." Smashing Magazine. August 11. Accessed 2017-12-02.
  11. Gartenberg, Chaim. 2017. "Google is taking another shot at budget Android phones with Android Go." The Verge. May 17. Accessed 2017-12-04.
  12. Google. 2017a. "Web Fundamentals." Google Developers. December 1. Accessed 2017-12-02.
  13. Google. 2017b. "Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage." Google Developers. May 17. Accessed 2017-12-03.
  14. Google. 2017c. "AMP + Progressive Web Apps: Start fast, stay engaged - Google I/O 2016." February 9. Accessed 2017-12-02.
  15. Google Developer Training. 2017. "Progressive Web Apps Terminology." Accessed 2017-12-02.
  16. Google Developers YouTube. 2017. "Progressive Web Apps: What, Why, and How? (GDD Europe '17)." YouTube. September 5. Accessed 2017-12-04.
  17. HNPWA. 2017. "Hacker News readers as Progressive Web Apps." Accessed 2017-12-02.
  18. Ionic Framework. 2017. "Progressive Web Apps." Accessed 2017-12-02.
  19. Kinlan, Paul. 2017. "Installable Web Apps with the Web App Manifest in Chrome for Android." Google Developers. May 16. Accessed 2017-12-03.
  20. Kumar, Mrityunjay. 2016. "Progressive Web Apps: Better and Low Cost Mobile Presence." DZone. July 23. Accessed 2017-12-04.
  21. Max. 2016. "What are Progressive Web Apps?" Ionic Framework Blog. May 18. Accessed 2017-12-02.
  22. Moray, Deepali. 2016. "33% smartphone users in India run out of memory space every day: Western Digital." BGR. November 10. Accessed 2017-12-04.
  23. Moufarrege, Sacha. 2017. "AMP vs. Progressive Web Apps: Which is Right for Me?" The Search Agency. September 5. Accessed 2017-12-02.
  24. O'Shaughnessy, Peter. 2017. "6 myths of Progressive Web Apps." Samsung Internet Developers. October 11. Accessed 2017-12-02.
  25. Osmani, Addy. 2017. "The App Shell Model." Google Developers. September 26. Accessed 2017-12-02.
  26. Osmani, Addy and Matt Gaunt. 2015. "Instant Loading Web Apps With An Application Shell Architecture." Medium. November 17. Accessed 2017-12-02.
  27. Paul, John K. 2017. "Progressive Web Apps? No, we are building Alien Web Apps." Condé Nast. September 21. Accessed 2017-12-02.
  28. Peterson, Rob. 2016. "14 key facts on website speed and 4 top tips when it's slow." Biznology. November 9. Accessed 2017-12-04.
  29. Pravin, Pravya. 2017. "Progressive Web Apps (PWA), AMP and Everything in Between." Biztech. July 12. Accessed 2017-12-02.
  30. Raible, Matt. 2017. "The Ultimate Guide to Progressive Web Applications." Scotch. June 13. Accessed 2017-12-02.
  31. Rowinski, Dan. 2015. "Why Progressive Web Apps Are The Future Of Web Development." Applause. November 30. Accessed 2017-12-02.
  32. Russell, Alex. 2015. "Progressive Web Apps: Escaping Tabs Without Losing Our Soul." Medium. August 10. Accessed 2017-12-02.
  33. Spero, Jason. 2017. "Why a progressive web app might be right for you." Think with Google. July 21. Accessed 2017-12-02.
  34. Thurrott, Paul. 2017. "Mozilla Embraces Progressive Web Apps." Thurrott. October 24. Accessed 2017-12-02.
  35. Tse, Tiffany. 2017. "What is Progressive Enhancement and Why Should You Care?" Shopify Blog. February 15. Accessed 2017-12-03.

Further Reading

  1. Google Developers. 2017. "Progressive Web Apps." Accessed 2017-12-02.
  2. Russell, Alex. 2015. "Progressive Web Apps: Escaping Tabs Without Losing Our Soul." Medium. August 10. Accessed 2017-12-02.
  3. Taradaev, Sergey. 2016. "Building Progressive Web Apps in 5 Simple Steps." Waverley Software. December 16. Accessed 2017-12-02.
  4. Osmani, Addy. 2015. "Getting started with Progressive Web Apps." AddyOsmani.com. December 23. Accessed 2017-12-03.
  5. Lawson, Bruce and Shwetank Dixit. 2016. "Progressive Web Apps: The definitive collection of resources." Dev.Opera. November 11. Accessed 2017-12-02.
  6. AMP Project. 2017. "Combine AMP with Progressive Web Apps." Accessed 2017-12-02.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
Avatar of user arvindpdmn arvindpdmn
5
0
2262
Avatar of user devbot5S devbot5S
1
0
6
DevCoins due to articles, chats, their likes and article hits are included.
1992
Words
2
Authors
6
Edits
0
Chats
7
Likes
15K
Hits

Cite As

Devopedia. 2022. "Progressive Web Applications." Version 6, February 15. Accessed 2023-11-12. https://devopedia.org/progressive-web-applications
Contributed by
2 authors

Last updated on
2022-02-15 11:48:32