PWA – Delivering A Rich User Experience

Today the way we access the internet has changed. There are multiple devices including laptops, mobiles, and tablets through which a user accesses the internet. So, it is important that the application accessed in mobile devices is fast, reliable, and engaging. This is where PWA comes into the picture.

A white paper titled ‘Progressive Web Apps: The Possible Web-native Unifier for Mobile Development’ describes the need for PWA like this – “Until recently, the web platform lagged behind on mobile-centred innovation in terms of being capable of competing with native or cross-platform apps (Puder et al., 2014). A new set of standards advocated by the Google Web Fundamentals group seeks to bridge that gap by introducing features such as offline support, background synchronisation, and home-screen installation to the web. The approach is known as Progressive Web Apps (PWA), a term coined by Russel and Berriman (2015) in a blog post covering initial design ideas.”

According to Google – A PWA (Progressive Web Application) is a web development approach using existing tools and technologies to create targeted, ideal user experiences.

The foundations of a good web experience are

• The application responds quickly to user interactions
• Loads instantly and reliable
• It creates an experience that is true to the device
• Makes the user coming back

PWA is an attempt to create an app that provides the user with a great offline experience, fast uploads, and user engagement.

What is PWA (Progressive Web Application)?

PWAs are web apps which provide mobile user experience using modern web capabilities with traditional native app features like work offline, push notifications, user-interactions, navigations, etc. In other words, it is a combination of web and mobile apps without storage. Once a user opens the webpage in mobile, he/she will be prompted to “Add to home screen”. Once the user adds the page to the home screen and opens it, will start working as an app.

Attributes of PWA

‘Progressive Web Apps: Escaping Tabs Without Losing Our SoulProgressive Web Apps: Escaping Tabs Without Losing Our Soul’ by Alex Russell lists the attributes of PWA…

• Responsive: to fit any form factor
• Connectivity independent: Progressively-enhanced with Service Workers to let them work offline
• App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions
• Fresh: Transparently always up-to-date thanks to the Service Worker update process
• Safe: Served via TLS (a Service Worker requirement) to prevent snooping
• Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
• Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
• Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store
• Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.

Features of PWA

Listed by Thomas Steiner in his article- ‘What is in a Web View? An Analysis of Progressive Web App Features When the Means of Web Access is not a Web Browser’

• Offline capabilities – Ability to load and work when offline
• Push Notifications – Capability to display notifications even when the app is not running
• Add to Home Screen – The capability to be installed (added) to a device’s home screen
• Background Sync – The capability to synchronize data in the background
• Navigation Preload – The capability to start network navigation requests even while the Service Worker has not booted yet, which would else be a blocking operation
• Silent Push – The capability to use the Web Budget API to determine if potentially expensive operations like background refresh may be started upon a silent push notification.
• Storage Estimation – The capability to estimate the available storage that an application already uses and to know the available quota enforced by the browser
• Persistent Storage – The capability to persistently store data that is guaranteed not to be purged by the browser without user consent, even if memory is running out.
• Web Share – The capability to invoke the native sharing widget of the operating system, as defined in the Web Share API.
• Media Session – The capability to show customized media metadata on the platform user interface, customize available platform media controls, and access platform media keys found in notification areas and on lock screens of mobile devices as defined in the Media Session standard.
• Media Capabilities – The ability to make an optimal decision when picking media content for the user by exposing information about the decoding and encoding capabilities for a given format, but also output capabilities to find the best match based on the device’s display as defined in the Media Capabilities standard.
• Device Memory – The capability to read the amount of available Random Access Memory (ram) in Gigabyte of a device in order to allow servers to customize the app experience based on the built-in memory.
• Getting Installed Related Apps – The capability to detect if a corresponding native application is installed alongside the PWA in order to, for example, avoid showing push notifications twice on both the native app and the PWA.
• Payment Request – The capability to act as intermediary among merchants, users, and payment methods by means of a standardized payment communication flow that supports different secure payment methods.
• Credential Management – The capability to request a user’s credentials from the browser, and to help the browser correctly store credentials for future use to facilitate logins

Recently we developed a PWA for QA Touch, a Test Management Application – Below is its GIF

QA Touch PWA

Baseline PWA and Exemplary PWA

Google breaks down PWA into Baseline PWA and Exemplary PWA. Below is a checklist of what is expected of a Baseline PWA and Exemplary PWA…Baseline Progressive Web App Checklist

• Site is served over HTTPS
• Pages are responsive on tablets & mobile devices
• All app URLs load while offline
• Metadata provided for Add to Home screen
• First load fast even on 3G
• Site works cross-browser
• Page transitions don’t feel like they block on the network
• Each page has a URL

Exemplary Progressive Web App Checklist

Creating PWA

PWAs works based on

1. Web Manifest – It is a normal JSON file which contains meta information of the app like Name, Short Name, Icon of the app, Background Colour, Display, Orientation,  Scope, Start URL, Theme Color, Splash screen.
2. Service Workers  – Service workers control the networks programmatically and works in the background. Act as a bridge between network and application. Service workers cache the information and help to work in offline mode. They also help to send and display push notification. Service worker is a javascript file.
3.  Icon – It is an app icon used when PWA installs in an application drawer SSL Certificate – PWA works in a secured network, which helps to get trusted by the user, increases reliability and also avoids third-party attacks.

Examples of Progressive Web Apps

• AliExpress – AliExpress is a popular e-commerce site owned by the Alibaba Group
• Flipkart – Flipkart is India’s largest e-commerce site.
• BookMyShow  – BookMyShow is the largest ticketing company in India.
• OLX – OLX is one of the largest online classified ads directories in Pakistan and India.
• Lancôme – Lancôme is a French luxury cosmetics brand with an international presence.
• MakeMyTrip – MakeMyTrip is India’s leading online travel firm.
• Settled.co.uk is a real-estate firm that helps users buy and sell homes.
• Pure Formulas – Pure Formulas is a leading online health and supplement company based in the U.S.
• Trivago – Trivago is a German transnational technology company specializing in Internet-related services and products in the hotel, lodging and metasearch fields.
• Ola Cabs – Ola is an Indian origin online transportation network company

As mentioned above, PWA has a lot of benefits, including better user experience, grow engagement, and increase conversions. Why wait, start developing today.