Blog

Expectations of performance and functionality for web-based applications are accelerating at a blinding pace. To meet these demands, virtually all of the big players in technology such as Google, Microsoft, Apple, and Mozilla are getting behind the concept of Progressive Web Apps (PWA).

A Progressive Web App is a collection of web standards that when combined, add functionality to a standard web application that makes it almost indistinguishable from a native app. At Omnitech, we've been investigating how these features can help solve business needs and challenges.

Many companies, such as Twitter [1] and Pinterest, have found benefits from adding PWA functionality to their web applications. Pinterest stated that “Time spent is up by 40% compared to the old mobile web experience, user-generated ad revenue is up 44% and core engagements are up 60%.” [2] It's possible that much of this improvement comes from how PWAs can greatly improve responsiveness and load times. According to Google's research, "53% of mobile site visits are abandoned if pages take longer than 3 seconds to load." [3]

When compared to their native app, Pinterest found that "Time spent went up 5%, user-generated add revenue up 2%, and core engagements went up 2-3%" [2]. While this may not seem significant, it could eliminate the need to develop and maintain separate Android and iOS apps.

Benefits of PWAs

• Improved responsiveness
• Usable offline or when connectivity is unreliable
• Installable to the user's device
• Appears and behaves like a native application without needing to go through an AppStore
• Automatically asks returning users if they'd like to install your app
• Still functional even if browser or device doesn't support PWAs
• Push notifications from your application, even if it's not currently open
• Deeper access to the device's hardware such as touch gestures, accelerometer, etc.

PWA Requirements

• HTTPS
• Web App Manifest
• Service Worker

Web App Manifest

The manifest describes how you want your application to be displayed to the user when installed.

• Name of the Application
• Device orientation support (portrait and/or landscape)
• Icons for multiple size requirements
• Hide browser controls so that the installed application looks like a native app from an app store

The Service Worker

The backbone of a PWA is called the Service Worker. This runs in the background on a user's web browser and acts as a proxy through which all calls to the server pass through. It also can be configured to store information which can be used for offline functionality and improved responsiveness. Data entered offline can be stored until connectivity is regained and then sent to the server.

Other Resources:

• Google's PWA documentation: https://developers.google.com/web/progressive-web-apps/
• Today is a great PWA that shows the features that are supported by your browser
• AlignedDev Blog - PWA Links: A collection of other related articles and resources

References:

[1] https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite.html

[2] https://medium.com/@addyosmani/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

[3] https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/