What Are Progressive Web Apps?

For years, Diagram’s team have been advocates for progressive enhancement, a methodology that encourages websites to utilize newer technologies to improve the user experience, while still providing a perfectly usable site to people using older browsers. Progressive Web Applications apply that same methodology to “next generation” web-based applications - websites that embrace standard progressive enhancement and responsive web design principles, but additionally provide a traditional “app” experience.

“Add to home screen” options for smartphones are not new, but Progressive Web Apps take this full screen “app” experience to the next level by working both online and offline, harnessing push notifications (as you may have seen on sites like Facebook and Slack), and providing a single URL for all users, regardless of the device they are using.

How Do They Work?

Prior to Progressive Web Apps, software such as Apache Cordova could be used to take a web application and wrap it in a platform specific application “wrapper” that could be installed via the appropriate app store. This wrapper would then essentially open the website inside the wrapper. While this system technically works, it doesn’t provide many advantages over a well made website that users can directly visit in their browsers, outside of easier access to some device features like the camera or notifications. It also allowed the app to be installed on the device’s home screen, but as mentioned above, creating a home screen shortcut for a website is a pretty standard option.

As HTML standards have converged and become more widely supported, Progressive Web Apps now have many of the same capabilities as native apps, such as push notifications and the ability to be installed on the home screen, which reduces the need to build and support native applications for multiple platforms.

How About An Example?

The Financial Times has a Progressive Web App that provides the exact same experience as a native application, but all its features are provided through a standard browser. An icon can be added to a device’s home screen that, when tapped, takes the user directly to the web app and begins loading content. In fact, all of the articles are loaded initially and stored locally, making browsing between them quicker and possible even without an internet connection. As the user navigates between articles, the URL updates as expected, meaning that sharing content is as simple as copying and pasting.

For the site’s developers, having a single Progressive Web App means they can update it as needed, and users will see the changes immediately without having to manually update anything. This eliminates a lot of headaches, since they don’t have to worry about building and supporting native apps for multiple platforms.

Many of the technologies that power Progressive Web Apps are supported in recent browsers, but there is one notable exception. Service Workers are the key piece of JavaScript that power Progressive Web Apps, and at this point, Apple’s Safari browser does not currently support them. However, since properly built web apps are Progressive, they can still be installed on the home screen of an iPhone/iPad and provide a great user experience. Some features will be missing, but the core experience will still work, and alternative methods and polyfills can still enable advanced features like offline caching.

As more and more people use mobile devices to access websites, utilizing technology like Progressive Web Apps will ensure that site owners are able to provide them with a good experience. Whether you’re looking to implement your own Progressive Web App or just ensure that your site is accessible to mobile users, we can help! Please contact us to speak to a Solutions Engineer, and we’ll work with you to make sure your site meets your users’ needs. If you have any questions or comments, please feel free to share them below.