Progressive Web Apps for a better Mobile UX

1. Home
2. Blog
3. Progressive Web Apps for a better Mobile UX

                

A new methodology called Progressive Web Application is here. It promises to help bridge the gap between performance of Web and Native Apps, and may finally provide the solution for building fast and reliable apps and websites for the mobile age.

We use mobile applications every day, several times a day — utility apps, social networking apps, messaging apps, music apps and others. Many of these applications have matched our expectation in terms of speed and effectiveness. The “on-the-go” type of mobile experience is the dream of any user and any designer.

But unfortunately, some of the mobile websites and web-apps are not there just yet. They remain slow, heavy, and often crash the browser in the middle of navigation. It seems as if they were “delaying our lives”, compared to the speed of performance of native applications.

However, a new methodology called Progressive Web Application is here, and it promises to help bridge the gap between performance of Web and Native Apps, and may finally provide the solution for building fast and reliable apps and websites for the mobile age.

What is a Progressive Web Application?

Progressive Web Application (PWA) is a term coined by Google to denote a new software development methodology. Unlike a traditional mobile application, PWA can be seen as an app-like experience where web pages are able to offer connectivity control features, that only the native applications had previously, push notifications, home screen icons, and so on.

In June 2015, Alex Russell, a Google engineer put the web tab ‘out-of-the-box’ and turned it into a mobile application that works offline with the desired personalization and touch experiences. It has been progressively designed, with functionalities such as:

• An icon on the home screen that opens the site in full screen
• Native dialogs to allow users to add the site in their home screens with one click
• A quick and always usable site, even in bad network connections
• Push notifications, just like native applications

Most of these features allows websites, which have the right ingredients, to become mobile capable web applications.

"These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins. They keep the webs ask-when-you-need-it permission model and add in new capabilities like being top-level in your task switcher, on your home screen, and in your notification tray. Users don’t have to make a heavyweight choice up-front and don’t implicitly sign up for something dangerous just by clicking on a link. Sites that want to send you notifications or be on your home screen have to earn that right over time as you use them more and more. They progressively become “apps”."

Alex Russell, June 2015

How do Progressive Web Applications work?

In order to utilise Progressive Web App there are some fundamental technologies and principles which must be present, including:

• Responsive Web Design - an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the device one is viewing them on.
• Web App Manifest - a simple JSON file that gives the developer a centralized place to put metadata associated with web application to have a more native-like presence on the user’s home screen.
• Service Worker - a script that runs in the background, in between the network and device, to supplement the content. They are capable of using the Cache mechanism efficiently and error-free during offline mode.
• Application Shell Architecture - provides an initial static frame, a layout or architecture to load content progressively as well as dynamically. Technically, Shell is a bundle of code stored locally in the browser cache of the mobile device.

Mobile User Experience – Not a luxury, a ‘must have’

It is now the time to (re)design mobile sites or app to make them more effective and impactful, mainly to match users’ growing expectations. But whilst previously that meant a full web redesign project, the arrival of Progressive Web Apps has established new trends and hopes for the mobile web app users to experience native-like mobile experiences along with web advantages.

What are the fundamental principles which make a great webapp

Good User Experience (UX) is essential to the success of every app. It is not just about performance, nor is it all about how the app and its content is presented. For the designer, it’s become necessary to look at an “app” project much more holistically than we’ve seen in the past.

Websites must be:

• Progressive: Work for every user, regardless of browser choice since they’re built with progressive enhancement as a core tenet
• Responsive: Fit any form factor - desktop, mobile, tablet, or whatever is next
• Connectivity independent: Enhanced with service workers to work offline or on low quality networks
• App-like: Feel like an app to the user, with app-style interactions and navigation because they’re built on the app shell model
• 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: Identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them
• Re-engaging: 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 share via URL and not require complex installation

Final Thoughts

As a final note, the rise of PWA doesn’t mean that an “old” web application usage has ceased entirely. This is simply an enhancement approach in hopes that things are now made better and are easier to use. This is definitely the start of a revolution, which will eventually replace native applications. How long it will take is hard to say. However, it is a green field for Progressive Web Apps and the time to start is now.