We look at how Progressive Web Apps can provide an enhanced experience for mobile users without the need for installing a separate app.
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.
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.
Have questions or comments about this post? We'd love to hear from you.
Images on websites have traditionally used raster graphics such as GIF, JPEG, or PNG types. With high density displays and responsive web design necessitating more flexibility, SVG (Scalable Vector Graphics) files offer better way to decorate the user interface.
Google search algorithm updates can wreak havoc on your website’s traffic. Don't let your organic rankings tank. Our free SEO health check can help you identify issues that make Google unhappy with your site.
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.