How to Turn Your Website into a PWA (with code examples)

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.

• Offline capable: Users can view website content in low-connectivity situations or without the need for an internet connection altogether.
• Installable: Users can download PWAs to their device homescreen much like any other native application.
• Improved performance: PWAs offer fast load times and increased performance to help improve conversions.
• App-like experience: From within the PWA, the web experience functions much like a native application, including the use of a splash image and removing the browser bar to promote stickiness and engagement.
• Push notifications: PWAs afford marketers the ability to push content or messaging to users through push notifications.
• Discoverable: PWAs allow search engines and web indexes to identify the application and its capabilities.
• Linkable: PWAs support the ability to link the app to a specific URL, meaning no app store or complicated download process.
• Always up to date: By leveraging service workers, users no longer need to manually update their favorite applications.
• Safe: With HTTPS as a prerequisite, and by leveraging TLS, PWAs are safe and secure for users as well as businesses.
• Cost-effective: Without the need for an app store, or building apps for a specific OS, this reduces development complexity and costs.

‍

PWAs: A definition and brief history

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.

‍

Business case

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.

‍

Enable PWA features in three easy steps

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:

• Install event: This will include adding registration code to the site JavaScript, requesting the service worker JS file, and calling an install event.

<p> CODE: https://gist.github.com/thec2group-blog/b2ff61cefbb278320d13aa5f951d0f1c.js</p>

‍

• Activate event: This will run after a successful install event and page refresh. We can force the service worker to activate prior to the refresh with specific code.

<p> CODE: https://gist.github.com/thec2group-blog/3e0d141c6c02a26c65006c86c8d7035d.js</p>

‍

• Fetch event: This will allow the capture of network requests prior to page load and is how we'll create offline pages for offline functionality. For example, when the site is online, the fetch event will capture assets and cache them. When the browser is offline, the fetch event will return results and content from the cache.

<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.