Progressive Web App - For Begineers

WEB APPCONS :

Large Over Head - Slower than Native Apps, Response-Request Flow

Stuck with JS – Client Side, JS is dynamic,limiting ability to optimze app

Less Control Over Computer Resources –

Not much offline support

Mobile App is best option than Mobile Website

Off Browser Limitation’s

NO SUPPORT FOR RECURRENCE USE

Cons :Platform Constrains

DOWNLAOD –INSTALL-USE

Limited App Download (Space War)

App Store :Deployment Limitation for Developers

App store not available in each country

NATIVE MOBILE APP

PROGRESIVE WEB APP (PWA)

BEST OF WEB + BEST OF APP = PWA

“A Progressive Web Apps is a web application which takes advantage of modern browser features and can be added to your homescreen, behaving just like a native application.”

Example

UNACADEMY

Features

Progressive - Works for every user, regardless of browser choice.

Responsive - Fits any form factor: desktop, mobile, tablet

Connectivity independent - Enhanced with service workers to work offline or on low /poor network

App-like - Feels like an app to the user, app-style interactions and navigation because it's built on the app shell model.

Fresh - Always up-to-date thanks to the service worker update process

Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store.

SPLASH SCREEN

Instant Loading – Thanx to Service worker they are loaded via cache api.

Re-engageable - Makes re-engagement easy through features like push notifications.

Features

Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.

Linkable - Easily share via URL, does not require complex installation

Safe - Served through HTTPSVia TLS (Transport Layer Security)TLS 1.0 = SSL 3.1

Web App Manifest

The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the device home screen)

n order for the app install prompts to display your app must:Have a valid Web App manifestBe served over HTTPS (see letsencrypt for a free certificate)Have a valid service worker registeredBe visited twice, with at least 5 minutes between visits

In order for the app install prompts to display your app must:

Have a valid Web App manifest

Be served over HTTPS

Have a valid service worker registered

Be visited twice, with at least 5 minutes between visits

SPLASH SCREEN

APP SHELL

Service WorkerScripts that run in background, seprate from page.

Respond to event.

Short Life Time.

IMPACT : From “ APP ONLY MODEL” to “Back to Web”

Development Framework

•Vanilla JS•React•Angular•Polymer•Express

Tools :

Manifest Chrome Manifest Creater

Manifest Validator

Service Worker

SW-Precache SW-Toolkit

Light House ( For PWA Validation)

Reference :Google Web Starter Kit

PWA by Mike Russel

www.addyosmani.com

Udacity Progressive Web App

Closing Notes :

Still is in infancy

But nice time to play around.

All Browser Support ( Waiting for Safari for Service Worker)

Twitter/abhishek5139190

abhishekmishra5139190@outlook.com

www.abhishekmishra.me

Reach out to me @

Merry Christmas &

Happy New Year

THANK YOU