This article will explore progressive web applications, or PWAs, including history, business cases, and three simple steps to enable PWA features for an existing website.
Progressive web applications, or PWAs, represent an emerging trend and exciting shift in standards for mobile web development. Combining the best of both web and mobile applications, PWAs have (rightfully) earned significant attention for both the ease of development and immediate gains for user experience.
Simply put, PWAs are websites built with standard web technologies that function much like a native mobile application from the user's perspective. Another great description comes from Chrome developer Alex Russell, who is widely credited for first using the term "PWA" in 2015:
"These apps aren't packaged and deployed through stores, they're just websites that took all the right vitamins."
While Russell gets credit for first coining the term, it was Apple co-founder and former CEO Steve Jobs who introduced the idea in 2007 with the launch of the iPhone.
"You've got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today," Job said. "We think we've got a very sweet story for you. You can begin building your iPhone apps today."
But this vision never quite materialized. Not long after, Jobs and Apple launched the App Store. While a highly profitable venture (to the tune of $40+ billion), it created barriers for iPhone app development while users eventually lost the desire to continuously download new and device-specific native applications.
The introduction of device-specific app stores between iOS and Android made developing native applications difficult and cost-prohibitive. Companies would need to build separate applications for each operating system, or build them in such a way to function across either OS. Meanwhile, the process of getting into the app store meant meeting specific and stringent criteria, and even having to agree to give Apple or Google a cut of any profits.
From a user perspective, while mobile traffic has increased 222% since 2013, less than half of smartphone users continue to download new apps each month from an app store. Meanwhile, user expectations around mobile web performance have increased dramatically, with 53% of users leaving a site or site pages that take more than three seconds to load.
Early adopters of PWA technology, including Twitter, the Washington Post, and Alibaba, haven taken advantage and enjoyed some amazing results based on some of the features we highlighted above.
The good news? You're likely able to enable some PWA features for your existing site with minimal effort. Below, we've outlined three steps you can take today unlock the potential of PWAs:
1. Make sure site is served over HTTPS: There's not much else to cover here. This is a best practice and modern standard for helping ensure a secure site.
2. Create a web app manifest file: This is a JSON file that will provide information about the PWA, including the application name, description, icon, and theme colors.
<p> CODE: https://gist.github.com/thec2group-blog/db4b2726fa0a79dbdc8c007be58856c5.js</p>
The example referenced below can be added to your site as a meta tag to your page layout.
<p> CODE: https://gist.github.com/thec2group-blog/6f1a1c989da9ae010c06fc059e540156.js</p>
3. Create a service worker: This is custom JavaScript that will respond to application events without the need for the site to be open to execute. The service worker performs all browser tasks in the background, is fully asynchronous, prevents access to the DOM, and offers an API for notifications, background sync, channel messaging, and much more.
<p> CODE: https://gist.github.com/thec2group-blog/d5209a60ca476d1bb62444272b844a19.js</p>
Again, we'll need to install the service worker for specific application events. These include our install, activate, and fetch events:
<p> CODE: https://gist.github.com/thec2group-blog/b2ff61cefbb278320d13aa5f951d0f1c.js</p>
<p> CODE: https://gist.github.com/thec2group-blog/3e0d141c6c02a26c65006c86c8d7035d.js</p>
<p> CODE: https://gist.github.com/thec2group-blog/929ccfebdaf208c49661250073d7322a.js</p>
That's it! It's pretty simple to begin harnessing the power of PWA technology. And, through the business and user benefits that we highlighted above, it's no wonder why 93% of Gartner respondents have indicated their interest in deploying a PWA by the end of 2020.