Progressive Web Apps
Bringing the native experience to the browser
When mobile phones began to dominate the market in the early 2000s, they brought with them a demand for native applications. New and exciting, native apps utilized in-device features to offer capabilities unavailable to the browser experience — offline mode, push notifications, camera access, GPS, bluetooth connection, file access. For years, the native experience stood apart from browser-based applications, but with advancements in API technologies and features, the gap has narrowed. According to MDN, Progressive Web Apps can be defined as “web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications”.¹
Introduced by Google as a design pattern in 2015, Progressive Web Apps center around three main loci to mimic a native experience: capability, reliability and installability. These pillars enable web-based applications to be available to anyone, anywhere on any device using a single codebase. While some capabilities of native apps remain outside the bounds of browsers, as web.dev notes, “between modern APIs, Web Assembly, and new and upcoming APIs, web applications are more capable than ever, and those capabilities are only growing”.²
What makes an app a PWA?
In order to be considered a Progressive Web App, an application should have the following features:
Secure Contexts (HTTPS)
Most features of a PWA, such as geolocation and service workers, are available only when loaded over a secure network. Not only is this best practice, but users will also be assured that their sensitive information will remain private. The secure context establishes the PWA as a trusted site and embolden users to utilize any transaction features the PWA offers.
Service Workers
Service workers are a client-side programmable proxy between the web app and the outside world. They have a lifecycle independent of the web app and allow for the caching of information that can be served outside the single thread of the browser-network connection. Service workers achieve this by intercepting and controlling network requests and caching assets. The scripts of service workers are registered by the browser and then run in the background, prompted by events such as ‘load’ or ‘fetch’. The cache can be used in place of a network connection and offer users key resources that can be loaded instantly and provide a reliable experience.
Manifest File
One of the standout features of a PWA is its installability, meaning that the browser offers an install of the app that then launches the app outside the browser in a standalone tab. In order to do that, the browser needs to know what that standalone tab should look like. These details are kept in the manifest file, which is a single JSON file that contains the basic information about the app — name of application, color schemes, icons and start URL — so the browser knows how to properly display the app once installed.
Best of Both Worlds
At their core, Progressive Web Apps are just web applications, but ones that mimic the native experience by utilizing progressive enhancements and new capabilities of modern browsers. Using service workers and a manifest file, PWAs offer users an experience nearly identical to native apps. Their growing popularity is backed by results — when Twitter launched their PWA, Twitter Lite, they saw a 65% increase in pages per session, 75% more Tweets and a 20% decrease in bounce rate all while decreasing the size of their app by over 97%.³ Easily created with HTML, CSS and JavaScript, PWAs not only reach more users, across all devices and operating systems, but also cut down on development costs by requiring only a single codebase.