News;   6 years ago

What's a Progressive Web App, and Should I Build One?

By Joseph Madden

As web technology advances and web experiences begin to mirror those of native apps, a new term for HTML5 web apps, the Progressive Web App (PWA), has been coined. What is a PWA? Simply put, it is an enhanced experience of your existing website design that allows for greater functionality on modern devices to give your website an app-like experience.

Some of the app-like functionality that modern browsers will allow include push notifications, offline support, add to home screen banners (think app install banners that many websites use today for their native apps) and more. With functionality like push notifications you can retarget and present your user with relevant information from your website just like you would an app, even if they are not viewing your website. With offline support, your users can still use some functionality of your website even if they don't have an internet connection.

By allowing users to add your website as an app on their home screen or app drawers you can encourage them to use your site more often. The best part is since all of this functionality comes from the user's browser they can get the same experience no matter the device they use. PWAs are also setup to be faster than normal websites due to their caching capabilities that provide faster loading times. They also require the sites to run under an SSL which helps implement best security practices for your website. Lastly, PWAs are responsively designed so they will work on all mobile devices as well as desktop computers.

When implementing a PWA there are some things you must consider. When you implement your offline support there will be things that just can't be done with your application/website without an internet connection, so you need to decide if the user can only do a few things what those things might be. If you are a publisher, you might save the most recent posts in the user's cache so they can still read the most recent content. If you are a retailer, you might cache contact information, latest specials or the previous closest location to the user. Determining what a user can do offline will not only provide a better experience for the user, it can also help you prioritize the most important actions on your website to help create a better UX and conversion flow for your users.

Another thing you must consider when implementing a PWA is that your website will need to have additional functionality to help it function like a single page application (SPA). By this, I mean that when the user is utilizing your website like an app the normal browser controls are not present. So you must provide functionality for users to be able to easily go back to previous content without a back button. This could mean providing controls or linking structures or gesture support to allow users to navigate back or forward to new content. In implementing this type of functionality you make it easier for your users to navigate your site whether it’s a PWA or simply in the browser.

So should you fully implement your website as a PWA? Well, this depends on if your website is more like an app and provides app-like functionality already. If you are providing an application-like interface already I would strongly recommend it. This can be much faster to implement and provide a lower barrier of entry than building native applications that your users may not install. If your website does not have an app-like experience, still implementing proper offline support and navigational controls is to your benefit. Also ensuring your site is secure and loads fast for your users will only increase conversion. While you might not need push notifications or for users to install your site to their home screen, the concepts of PWA are founded upon best practices and will only make your website better.

For more information on PWAs checkout this great resource from the Progressive Web App Summit 2016

We're ready when you are.