What’s next in mobile: Progressive web apps

At their core, PWAs are simply responsive websites that act and feel like native apps. This means your website (PWA) can do cool things like send push notifications, install an icon on your phone’s home screen and work offline.

Background on PWAs

The concept was first introduced by Google in 2015, but things really started to pick up steam in 2017 as big companies like Starbucks, Pinterest, Forbes, Instagram, Twitter, Uber, Tinder, the Washington Post and West Elm all released PWAs.

These PWAs were incredibly successful, as evidenced by the following stats:

• Uber’s PWA is designed to work well on intermittent networks. It only takes 3 seconds to become interactive on 2G networks. Particularly useful when you’re trying to hail an Uber in zero-degree Chicago weather and you’re not on WIFI.
• West Elm saw a 15% increase in average time spent and a 9% increase in revenue per visit on their PWA.
• Forbes saw a 6x completion rate on their PWA versus their previous mobile site.
• Starbucks’ PWA is 0.4% the size of its native app counterpart.

If you’re interested in reading additional compelling data for PWAs, check out pwastats.com.

Characteristics of PWAs

In order to be considered a true Progressive Web App, your project must fulfill a set of very specific technical requirements, which enable the following characteristics for your site:

• Responsive: PWAs are great for mobile audiences as well as desktop/tablet users. PWAs are responsive websites and will optimize to whatever device or screen size your users are on.
  A great example of this is Starbucks’ PWA at preview.starbucks.com. Check it out on both your desktop and your mobile web browser.
• Discoverable: This is key for SEO. Because all of your content lives on the web, and not in a native app, search engines are able to index and link to your PWA.
• Linkable: Other sites can link to the content on your PWA, which we know is an important SEO factor as well as a convenient to users. This is also great if your PWA is going to live in your digital ecosystem and you want the ability to link to other web properties.
• Connectivity independent: PWAs can cache certain content which will then be available to users who are offline or in areas of low connectivity.
• App-like: Once installed, the PWA can take over the user’s entire screen (just like native apps do). This means you get that full-screen experience, and there’s no browser header or tools taking up valuable real estate.
• Includes push-notifications: PWAs allow you to send your users push notifications, something that used to be possible only on installed native applications.
  • *Note, this feature requires Service Workers, which is in development for Safari (iOS) at this time.
• Easier & faster: PWAs are easier and faster to develop, because rather than developing separate apps for iOS, Android, Windows, etc – you just need to develop ONE time. This also means any future enhancements only need to be deployed one time, rather than on each platform. You also have full control over these updates, and aren’t at the mercy of waiting on approvals from an app store.
• Installable on home screen: PWAs allow users to easily save a home screen shortcut, so your icon will appear alongside all the other apps on your mobile phone. This is a great convenience to users and will encourage continual engagement.

Here’s a handy chart that compares the features of native apps vs. responsive websites vs. PWAs:

I’ve noted above that some of these characteristics are not fully functional yet on Apple’s Safari browser. Features like push-notifications and installability on the home screen are powered by something called Service Workers, which were not supported by Apple until last month.

In December 2017, Apple announced to their developer community that Service Workers would be enabled by default in the Safari Technology Preview (Release 46). This was huge news to anyone following PWAs. This means that in the very near future, all the above features of PWAs will be available on iOS devices. (PWAs are already fully functional on Android, which makes sense as this is a Google-driven concept.)

Examples of PWAs

If you’re interested and want to check out some examples yourself, here are some that I am using regularly:

• Starbucks
• Uber
• Twitter Lite
• Instagram

One North has also been investigating the exciting world of PWAs, and we developed our own PWA as part of our Fall 2017 Hackathon for this year’s Experience Lab. Check it out at pwa.onenorth.com.

The future is now

I am really excited by the promise of PWAs, and hope that you will consider them for your next web or mobile project! If you’re interested in learning more, I’ve included some supplemental links that you may find helpful.

Further Reading:

• Check out my Experience Lab talk.
• Read this Google Developer PWA checklist.
• Review this 101 article on PWA’s.