Published on October 30th, 2016 | by Guest

Progressive Web Apps and The Future of Web Development

One of the more interesting concepts to come out of the big Google machine these past few years, at least for web developers, is progressive web apps. This concept bundles well known technologies such as App Shells and JSON Manifests together with new ones such as Service Workers. Together, this mix of technologies wraps up into the concept of progressive web apps, which are meant to be used on web servers, enhancing existing websites.

Today, what happens when you click a link on a website is that your browser sends an internet request to the web server, and the web server will then send some content back to the browser.

With a progressive web app enhanced website, there will be an extra step in this process. This means that once a visitor clicks a link, before the browser asks the web server, it will first go through the service worker, which can show website content even without having internet access. This means that we can now develop a fully functional offline version of our existing websites, meaning that any user browsing a site and losing internet connection in the middle of his or her session, can continue uninterrupted.

Not only that, but Google has made other interesting features available in their Chrome browser, and both Firefox and Opera with their browsers have followed suit.

Add To Home Screen

We now have the option of adding a progressive web app to our smartphone’s and tablet’s home screens, meaning we can install a website like we install a mobile application, but without the need to go into App Store or Google Play to download it.

In fact, Chrome, Firefox and Opera will even prompt the users automatically, asking if they want to install the progressive web app, without webmasters having to do anything!

Offline Functionality

While it’s possible to develop a fully functional offline version of any website, it’s also possible to develop a simple offline error message, resembling those of 404 error messages. We can now customize our offline screen to display the website’s brand logo and contact information, if for some reason it does not make sense to make the website fully operational in offline mode.

For users with limited data plans, visitors browsing from 2G or 3G networks, and anyone else with intermittent internet access, this technology can revolutionize the availability of websites the world over. For even though we most often associate flaky internet access with third world countries, there are many users in developed nations not interesting in spending all their time online. But there are other benefits to having a service worker cache the website content and display it in offline mode as well.

Optimal Caching

Since the progressive web apps enable offline functionality because all website content is cached and then stored locally on each visitor’s personal device, this caching is quite advanced, and works exceptionally well. Coupled together with app shells that contain all stylesheets, images and scripts, Google have managed to create a technology that on average loads a web page 25% faster than a traditionally cached website.

This is huge because such a large decrease in page load times that this has to offer, will affect other metrics such as bounce rates, conversion rates and user engagement adversely. So for e-commerce websites this technology could very well earn them a substantial increase in revenue, and easily pay for development costs within a short time frame.

Push Notifications

With the advance of HTML5, we can also tap into the power of hardware access that was previously only accessible for native mobile app developers, meaning that we can now access Android, iPhone and Windows Phone cameras, microphones and other interesting hardware features, all directly from the web server and browser.

One of the most used of these features are push notifications. Since so many mobile and tablet users check these notifications regularly, the potential engagement from this one feature has been proven to be even better than e-mail newsletters and other traditional marketing techniques and tactics.

Not all is positive

While there are many great things to be said for progressive web apps, keen readers might have noticed one or two important browsers missing from the list of browsers supporting progressive web apps.

Currently, Microsoft is working on adding service worker support for their Edge browser, so while it’s not possible right now, it will most likely become possible to support Edge users in the future.

However, we’re still missing official support from Apple’s Safari browser, meaning that there are a large number of users (between 15-20% according to various sources) that will not be able to experience the progressive web apps in action.

The good news is that while Safari and Edge users will not be able to install the app on their devices, they will still be able to use the website as normal, they just won’t get any of the advantages such as push notifications, better performance or offline functionality.

Conclusion

If your website is primarily visited by Android users, Chrome, Firefox and Opera browsers, then it makes sense to consider implementing progressive web apps already. However, some websites cater exclusively at iPhone users, and so it would not make sense to use this technology on those sites yet.

Being backed by Google, Opera and Firefox, the technology itself seems strong and with a bright future ahead of it, especially when we read up on some of the case studies Google have published on their developer showcase platform.

About the author:

Mark has been developing for the web since 2001, always with a penchant for open-source technologies such as PHP. Since 2010 he has been working full time with app development, these days being employed at Nodes, a leading European app agency. He also regularly contributes to WordPress and other open-source projects.

Tags: apps, development, future, progressive, service workers, web