Monday, July 16, 2018

What Makes a Progressive Web App Different than a Mobile-friendly Website?

For years, we have been using our phones as the catch-all for most of our problems. You need an update on who won the World Cup? Take out your phone and search on the web. Where’s the closest Starbucks? Pull that phone out and search for the nearest one. In 2016, mobile web usage surpassed desktop searches for the first time in history. We turn to the convenience of mobile search daily, and we have become pretty accustomed to the look and feel of mobile-friendly websites. But, more likely than not, we run into issues with so-called “mobile-friendly” sites that really make them anything but mobile-friendly. Sometimes they can take forever to load, and 53 percent of mobile site visitors will exit the site after three seconds of load time. Or maybe even though they claim to be mobile-friendly, the text is still too small or that scrolling feature isn’t quite as intuitive as we want it to be. We’ve reached a time where we want more from our mobile web experiences. We want it to look even better than it already is, we want more features than just a simple website, and we want the website to understand us better. This is where Progressive Web Apps (PWAs) come in. Google calls them the future of the mobile web, which might make you think they’re just ordinary mobile-friendly websites…but trust me, they’re so much more!

So What’s the Difference Between a Mobile-friendly Website and a PWA?
Mobile-friendly websites are simply a mobile version of a normal desktop website, and appear the same on any device. Nothing changes in the functionality other than the scale of the site. So how is a PWA different than that? Aren’t they just websites too? Yes and no. At the 40,000 foot view, yes a PWA is accessed by a URL through the web. The webpage is just the beginning of a PWA, and where it separates from a mobile-friendly site is in its functionality. The more you use a PWA, the more you can see its layers of functionality that allow it to feel like a native application. PWAs are dynamic and can be personalized based on the user while giving the options to enable location data, push notifications, camera access, and even the ability to add the mobile experience to your homescreen! Because they are accessed through the web, PWAs don’t require a download, and with Google’s full support of PWAs, they are already accessible through the Google Play Store and can be added to the homescreen directly on Android. Let’s take a look at just a few of the many game-changing features that PWAs bring to the table that really make them bigger and better than a normal mobile-friendly site.

Push Notifications
The first major distinction between PWAs and normal mobile friendly sites is the ability to enable push notifications. Upon opening a PWA, the user can be prompted as to whether or not they’d like to allow push notifications to be sent to their phone. The user must subscribe to receive the push notifications, and once they do, the user is assigned a subscription ID where each push notification is unique towards the user. And just like that, the PWA is becoming more native than a mobile website ever could be. Lyft provides a great example of how PWAs can use push notifications to maximize the PWA’s potential! Upon opening the PWA, the user is automatically prompted to enable push notifications in order to ease the ride sharing experience.

Geolocation Services
Adding another layer of native functionality to the mobile web experience, PWAs allow the user to opt in to location services. This will ensure that personalized and relevant content will be pushed to your phone based on GPS within the phone. Location services can make the push notifications you receive from a PWA much more relevant given proximity to places you tend to hang around (i.e. travel, traffic, coupons). While some mobile-friendly sites may have to ask for your location every time you access the site (even if you already gave it permission the last time), PWAs cache information as you use it, so when you allow it to use your location the first time, it won’t ever ask you again!

Camera Access
After waiting some time for a native app to download, it will ask you for access to the camera on your phone, which is an awesome feature for social media apps. Well, PWAs can access the camera just like any other native app can! PWAs allow you to skip the download and receive the same experience any native app can provide with just a tiny fraction of the storage that a native app typically holds.

Add to Homescreen
PWAs are able to live on the homescreen of the phone, with a tappable icon giving it the look and feel like a native mobile app. Android users have the luxury of having PWAs download directly to the home screen, while iPhone users have the option of adding to home screen with just a few taps using Safari’s “Add to Home Screen” feature. Adding to the homescreen is essentially the icing on the cake as to why PWAs exist just like a native mobile app, but have all of the back-end framework and connectivity that makes websites so appealing.

Tons of big name brands like Twitter, Starbucks, Alibaba, and Instagram have already implemented the awesome technology of progressive web apps. While mobile-friendly websites are becoming a thing of the past, PWAs contain everything a mobile site has, plus so much more! As this technology starts to gain traction with larger-name brands, we’ll begin to see that PWAs are more powerful than mobile-friendly sites, and the opportunities behind PWAs seem to be endless.