Progressive Web Apps

Bhanu Prakash Korthiwada -

Progressive Web Apps (PWA) are the next big thing in web development as they bring mobile-app-like experiences to users without requiring them to install an app from the app store/ play store. It is now the new way to deliver amazing user experiences on the web.

What is it? and Why do we need it?

It is the same web but better. PWA's allow us to develop great websites that can behave like native apps.

Below are some advantages of it,

  • Load's instant, even in uncertain network conditions.
  • Responds quickly
  • Behaves like a native app with features like adding to Home Screen, push notifications, accessing to Camera, splash screen etc.,
  • Work's offline with Service Worker.
    many more...

We need it as PWA's will help for higher conversions and increases user engagement.

What are qualities of PWA?[1]

  • Progressive - Work for every user, regardless of browser choice because 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 - Use the app-shell model to offer app-style navigations and interactions.
  • Fresh - Always up-to-date thanks to the service worker update process.
  • Safe - Served via TLS to prevent snooping and make sure content hasn’t been tampered with.
  • Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable - 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 need complex installation.

Basic Progressive Web App Checklist

  • Site is served over HTTPS
  • Site is responsive across phone, tablet and desktop screen sizes
  • All app URLs load while offline
  • Metadata provided for Add to Home screen
  • First load fast even on 3G
  • Site works cross-browser
  • Each page has a URL
  • Page transitions don't feel like they block on the network

How to test Tools PWA?

Lighthouse Chrome Extension will provide analysis of PWA's

Here is the amazing list of PWA's available over web.

Cover Image[2]

Wiki ↩︎

Google ↩︎