At its core, a PWA is simply a web application that uses modern web techniques to deliver a native app-like experience to users. In comparison to traditional Mobile Web apps accessed by browsers, PWAs can send push notifications, work offline (leveraging data cached during your last sessions), and load as a top level full screen experience. Additionally, it has an icon on the home screen and offers the best user experience possible whatever the connectivity situation.

We see the number of PWA’s increasing since 2 years, and Chrome and Mozilla being perhaps today’s best test browsers (Safari is yet to get into it). To make things simple and short, we have listed below the main advantages of PWA’s. They are:

• Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
• Responsive - Fits 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 - Feels like an app, because the app shell model separates the application functionality from application content.
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
• Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
• Re-engageable - Makes re-engagement easy through features like push notifications.
• Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store
• Linkable - Easily share the application via URL, does not require complex installation.

PWA’s offer rich experiences even offline or in poor network conditions, while other apps would just sit idle for most of the time consuming a precious portion of the memory. Moreover, it costs around ten times to develop an app rather than creating a website for the same. The cost can get much higher if you plan to develop and maintain separate code bases for different platforms like Android, iOS and the web. All these functionalities and opportunities rely on two technical foundations: Service Workers and App Manifest.

Service Workers

Service worker is where most of the magic of happens. They are nothing but JavaScript codes that act as programmable proxies solely responsible for intercepting and responding to network requests. Since they act as a proxies and can be easily programmable, the application must be served over HTTPS to keep the data secure.

It’s worth noting that the service worker caches the actual response, including all HTTP headers, rather than just the response data. This means that your application can simply make network requests and process the response without any specific code to handle the cache.

The sheer power and flexibility of Service Workers makes them very complicated, and generally, developers will want to use pre-made “recipes” for common service worker use cases, such as offline mode. Mozilla has a great reference for service worker recipes that demonstrate the myriad applications with reusable code. Google also has a slew of Service Worker Samples.

App Manifest

Historically, mobile web apps were not installed like an app to the homescreen. Sure, a user could “pin” a mobile website to their home screen on iOS and Android, but the experience was second-rate, lacking the local features we expect out of native apps.

Recently, Chrome on Android added support for installing web apps to the homescreen with a native install banner. In order to do that, we need to tell Chrome our mobile website is installable as an app. This is now possible thanks to the app manifest file, manifest.json. This JSON file defines an app icon, how to launch the app (standalone, full-screen, in the browser etc), and any such related information. It’s located in the root of your app. A link to this file is required on each page that has to be rendered.

Currently, iOS doesn’t have any additional features here beyond Pin to Homescreen, so the experience won’t be as fluid, but upcoming iOS versions should be updated.

Conclusion

Progressive Web Apps are equal parts new Web APIs, design patterns, and marketing fluff. The mobile web comes closer to parity with installable app store apps through app manifest and homescreen install support, background worker functionality with Service Workers, and faster load time with App Shell.

Twitter recently launched mobile.twitter.com as a PWA built with React and Node.js, showing that the technology is finally ready for the masses. Twitter Lite sees 75% increase in tweets with new PWA and reduces Data usage.

PWAs are the best way for developers to make their webapps load faster and more performant. It will give your users a better experience, whatever the connectivity situation. Having it load over HTTPS is a reassuring good security practice and offline availability (given the user has already loaded data once) alleviates one of the biggest issues with webapps.

There are a multitude of other performance recommendations you can implement in your webapp that will make your web experience unique and rewarding.