Progressive Web App Overview

Google’s Definition of PWA :

Progressive Web Apps are user experiences that have the reach of the web, and are:

• Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
• Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
• Engaging — Feel like a natural app on the device, with an immersive user experience.

Microsoft’s Definition of PWA:

Progressive Web Apps (PWAs) are simply web apps that are progressively enhanced with native app-like features on supporting platforms and browser engines, such as launch-from-homescreen installation, offline support, and push notifications. On Windows 10 with the Microsoft Edge (EdgeHTML) engine, PWAs enjoy the added advantage of running independently of the browser window as Universal Windows Platform apps.

The bare Minimum features required for PWA (Minimum Viable — PWA)

Benefits:

1. Responsive — Fit any devices form factor and screen size.
2. Secure — Delivered over secure HTTPS
3. Offline Support — Works with low connectivity and offline.
4. Performant — Looks and feels like Native App with its own icon and Splash Screen, Push Notifications
5. Linkable — Easy installation with prompt ‘Add to Home screen Option’ and can be shared via link
6. Easy Updates — Application and Content is up to date when connected internet.
7. Lightweight — Size is less compared to Native/Hybrid Apps.

Challenges:

1. Browser Support — Not supported by all browsers .

2. Device Support — On iOS available onwards 11.3 , ’Add to homescreen’ banner not available on iOS.

3. Hardware feature support — Not all native hardware features are supported like fingerprint.

Case Studies:

1. Twitter Lite
2. Book My Show
3. Pinterest
4. Forbes
5. OLX
6. Alibaba
7. Flipkart Lite

PWAs in the Microsoft Store

Auto Indexing (beta) — Bing Discovers PWAs on the Web and are automatically reviewed and listed into the store

Self Publishing — Developer opens a dev account for the Microsoft Store and publishing app under dev name.

Getting Started with PWA:

1. Google — https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
2. Microsoft — https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/get-started
3. Service Worker — https://developers.google.com/web/fundamentals/primers/service-workers/
4. Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps. — https://developers.google.com/web/tools/workbox/
5. Web App Manifest Generator — https://app-manifest.firebaseapp.com/

Links:

1. https://www.netguru.co/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

2. https://jakearchibald.com/2014/service-worker-first-draft/

3. https://jakearchibald.github.io/isserviceworkerready/

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.