What you should know about Progressive Web Apps

Web technologies have evolved at a pace during the last decade, constantly improving our web surf experience…. and so did the strategies to provide the actual content.

From “Graceful Degradation” – which is about creating websites that look great in the latest browsers while keeping support for older software - to strategy of Progressive Enhancement – which emphasizes core webpage content first and then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content, depending on the end user’s browser/internet connection capabilities.

While one of biggest benefits of Progressive Enhancement is to provide basic content and functionality to all browsers, the principle is based on browser technologies becoming more and more powerful. Based on this, Google announced the Progressive Web Apps in 2015 as an extended mobile experience and a design pattern for modern web apps.

Users first

So what’s in it for the end users? Let’s start with easy access - the web app can be added to one’s home screen. Most importantly, the app is accessible online or offline and regardless of network connection. There’s plenty of speed too with fast loading and smooth animations. Safety by HTTPS securing the connection between server and end users is another feature and there’s good responsiveness so that users are able to perform the same tasks equally on a phone, tablet or laptop. Sending contextual information to the users while the browser is closed? Yes - now you can, thanks to push notifications. With these combined features, the effect is to be able to reach more users and make their experience more engaging.

“After implementing their Progressive Web App, AliExpress saw conversion rates for new users increase by 104%. This investment in the mobile web also resulted in conversion rates on Safari increasing by 82%. The new strategy also delivered a much better experience. Users now visit twice as many pages per session, and time spent per session increased an average of 74% across all browsers.”

- Google Developers (https://developers.google.com)

The tech behind

How does the ‘magic’ happen? Developers are able to create this functionality thanks to Service Worker technology, being a pillar for Progressive Web Apps, as well as Web App Manifest specification, which gives developers control in areas that are normally reserved for native apps, and finally the App Shell Model.

Service Worker intercepts network requests and acts appropriately depending on the conditions - background sync and cache benefits to minimal use of data. By adopting the App Shell Model, HTML, CSS, JavaScript and smart responsive design, developers can power the user interface and provide native-like experiences. In a way, the approach with this model is similar to preparing a bundle to publish on an app store when creating a native app.

One has to ask why so many developers have recently been looking into that type of approach? It’s worth remembering that Service Worker technology delivers significantly on performance and not just it’s powerful caching functionality. Essentially, the more an end user uses the web app, the more it turns into a native-like experience.

Crossing the line

It’s no wonder that Progressive Web Apps are gaining more and more attention globally. Due to its success, Google announced this year the deep integration of Progressive Web Apps into Android. Although Safari does not supporting Progressive Web Apps yet, the app can still be delivered to iOS - for example, by using classic channels with a hybrid approach and solutions such as Apache Cordova and Ionic. Keep in mind that millions of users are using browsers that do support Progressive Web Apps. In fact on one of the Chrome Dev Summits, an impressive 850 million active users was announced. It certainly seems there is a bright future for Progressive Web Apps, what do you think? Bartlomiej Mirynski is a Frontend Web Developer at Deloitte Digital. For more information, please visit www.deloittedigital.com/web-mobile-development