Progressive web applications (PWAs) take on mobile web

Initially, there were mobile web applications and native applications. Native, however, has always been expensive and complex – mainly because of the variety of operating systems and screen size. Soon browsers packaged as pseudo-apps mimicked native applications – but those were bad at recreating realisitic, low-lag, low-jitter, native-like experience.

Shortly afterwards followed JS frameworks that translated to bloated native code. Suddenly, the world of mobile applications was at the fingertips of web developers. Yet there was a downside: the executables were blackboxes where noone really knew what was going on under the hood – and noone could efficiently support them, even native developers. Essentially, in case your application required a major update – or any non-trivial features – you had to throw away your existing codebase and start from scratch. That, of course, made both developers and managers unhappy, but more importantly, hindered productivity and effectiveness.

Surely, web-for-mobile-app-frameworks matured over time and we’ve seen the likes of Xamarin (C#), Cordova/PhoneGap and Ionic (JS) take center stage. Xamarin’s success in particular was so significant, that it prompted Microsoft to purchase the company in early 2016 and also make it available as part of Visual Studio.

Progressive Web Applications enter the mix

It’s been some time since a significant breakthrough in mobile development happened at scale. Google I/O 2016 promised to change that by introducing Progressive Web Applications (PWAs) – (web) apps that load like regular web (think nginx or Apache), but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.

According to Google developers, the most prominent characteristics of PWAs are:

• Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
• Responsive – Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
• Connectivity independent – Service workers allow work offline, or on low quality networks.
• App-like – Feel like an app to the user with app-style interactions and navigation.
• Fresh – Always up-to-date thanks to the service worker update process.
• Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
• Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
• Re-engageable – Make re-engagement easy through features like push notifications.
• Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
• Linkable – Easily shared via a URL and do not require complex installation.

Progressive web apps are an enhancement of existing web technology.

As such, they do not require separate bundling or distribution. Publication of a progressive web app is as it would be for any other web page. PWAs work in any browser, but “app-like” features such as connectivity-independence, home screen install & push messaging still depend on browser support.

At the heart of each PWA is a service worker – the hybrid between native’s rich experience and high performance and the web’s real-time updates, search engine visibility and limited storage requirements.

Technically, service workers provide a scriptable network proxy in the web browser to manage the web/HTTP requests programmatically. The service workers lie between the network and device to supply the content. They are capable of using the cache mechanisms efficiently and allow error-free behavior during offline periods.

Under the hood, PWAs use parallel JS workers for asynchronous content loading, WebAssembly for external libraries and IDB (indexed database) as a NoSQL storage within the browser, further enhanced by key stores like LocalStorage and SessionStorage.

Eager to try some?

The most important feature of any new framework is its adoptability. While PWA is rather new, Twitter, Yahoo! and Tinder already use it for their “lite” applications. And to a great success: many early adopters reported vast improvements in app responsiveness:

• While Tinder’s MVP took just three months to develop, they were able to squeeze load times down to 4.69 seconds (from 11.91), downsize the app tenfold (compared to their Android app) and enjoyed engagement upticks across the board. More here.
• Pinterest’s core engagement spiked by 60% after they introduced PWAs with 40% increase in time spent on the site – and enjoyed logical 50% ad-clickthrough (CTR) 44% ad spend hikes. Some of the loadtimes on the site dropped by 50% to 75%; the iOS native app size went down from 56MB to 150kB. More here.
• Twitter Lite saw a 65% increase in pages per session, 75% in Tweets, 20% drop in bounce rate – and loads in less than 3 seconds for repeat visits on slow networks. Their case study is available here and here.

If you are eager to find out more, check out this PWA directory or take a peek at some case studies here.

How do PWAs fit the portfolio of a web agency?

Let’s get one thing straight: PWAs are NOT just a mobile framework; they are a collection of methods to accelerate the web, both on desktop and mobile. Therefore any service company should consider adding them to their arsenal, but more importantly – understanding the underlying architecture and significance.

In our specific case, PWAs offer great alternatives to problems we come across with our customers. For example, poor Internet reception when filling in a marketing survey. Another great opportunity is the seemless transition between online and offline while looking at a BI dashboard and physically moving between rooms, for example.

In any case, PWAs are on our menu, and we are eager to create some. If you’re looking to develop one, do not hesitate to drop us a line.