Progressive Web Applications

Every time there is a chance to build a mobile application with javascript, web developers are like “yeah, this is the way; the future of building mobile apps” and jump on the bandwagon of the saucy java intent avoidance.

[WHATEVER JS FRAMEWORK] will change the way we build mobile apps Every web developer ever

We’ve seen it with jQuery Mobile, Apache Cordova (Phonegap), Ionic, NativeScript and of course React Native.

How do progressive web apps fit into the picture?

What is it?

The fancy term was coined by Google where this technology originated. It sounds complex but progressive web apps are just web pages that use modern browser features – Web App Manifest, Service Workers and HTTPS. They are usually complemented with Cache Storage and IndexedDB.

They are linked with the browser and those technologies are currently experimental. At the moment you are mostly limited on Android platform as Safari doesn’t have a full support of service workers. You can check out the readiness of it at Is ServiceWorker Ready? site.

The web manifest is a simple file with a few information about your app – icon, name, description and others. When you add the site to your phone home screen this is the file where the icon comes from.

Service worker sits in between the browser and the server and is able to manage the network communication, work with the cache API and manage request when offline. It only works over HTTPS protocol.

Progressive web applications can mimic the material design of Android applications, but in the end you are in charge of your HTML and CSS. For that you could use Polymer or one of the native look emulating javascript libraries like Ionic.

Why would you want to use it?

Firstly, they won’t replace a mobile app. Or a website. They are a complement to them and are not faster to build or easier to maintain. They solve a different problem.

They help to overcome the barrier to install and launch apps. No need to go to the shop, search for the app, click install, agree on permissions and launch. You have them immediately in the browser and user can bookmark them to the home screen.

According to one of the Google presentations each step involved in installing an app has at least 20% drop out rate – meaning that with each click you lose 20% users. This is a huge! And for certain types of business like big e-shops, airlines or news it should be the reason to explore this area.

When using your cellphone your connection will be flaky and slow even if you don’t live in New Zealand. Removing that from the equation leads to better conversions and more sales on flaky networks. Users won’t leave your website because they’ve been staring at a blank screen for the past 3 minutes.

Apart from improving the speed of the app you also have the ability to work purely offline. That might be convenient for example for an airline app to show checked tickets.

Prosper Otemuyiwa did a nice write up of existing use cases and how they improved the business.

Where to learn more?

Offline Web Applications on Udacity by Google – a short but useful introduction into Service Workers, Cache Storage and IndexedDB by Michael Wales and Jake Archibald.
Rossta’s Progressive Web Application on Rails guide with a few additional resources to follow.
serviceworker-rails is a gem from Rossta that provides the basic pieces for your offline app and integrates it into Rails asset pipeline.
The Offline Cookbook by Jake Archibald shows different architecture patterns and approaches with their translation to Javascript.
Mozilla’s Service Worker Cookbook is a great collection of patterns and examples on how to solve common problems like deferring POST requests while offline.
IndexedDB Promised wraps IndexedDB interface into a promise based architecture – nice to have if you want to interact with it. It keeps the interfaces same with the original so you can still use documentation for original IndexedDB API.
Instant-loading Offline-first from Progressive Web App Summit 2016 where Jake Archibald’s demonstrates the capabilities of Progressive Web Apps, converts an existing online application into a fully functional offline web app and compares the results.
Building Progressive Web Apps Today from Chrome Dev Summit 2016 where Thao Tran shares some success stories from customers like Flipkart and Alibaba and gives some guidance on how to make the money rain.

Conclusion

Building a progressive web application requires the same amount of effort as creating a mobile app. You can’t easily convert your website into an app without major changes to the architecture and most of the early adopters solves it by creating and serving a mobile version different to the desktop one.

You shouldn’t think of it as a replacement for a mobile app, but as a complement to your website that will help with customer engagement, conversions on flaky networks and remove the barrier to install on the phone.

It is not a faster and cheaper way to develop mobile apps but it provides another way to support your business and generate more money.

Comments

Sintaxi: As one of the inventors of Cordova/PhoneGap allow me to set the record straight. We never intended for anyone to think PG was anything more than a temporary measure. Hence the mantra: “the ultimate purpose of PhoneGap is to cease to exist” –Brian LeRoux.

If anything this article should be acknowledging the role Cordova/PG served as a conceptual if not functional proof of concept for progressive web apps.

Jakub: You guys did a hell of a good job with Phonegap though. I think it is a wonderful piece of technology and it still has a great number of use cases.

People like to think about these as silver bullets to mobile development which I dont think exists.