35
WEB APP Over Head - Slower than Native Apps, Response-Request Flow with JS – Client Side, JS is dynamic,limiting ability to optimze app ontrol Over Computer Resources – ch offline support App is best option than Mobile Website owser Limitation’s PORT FOR RECURRENCE USE

Progressive Web App - For Begineers

Embed Size (px)

Citation preview

Page 1: 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

Page 2: Progressive Web App - For Begineers
Page 3: Progressive Web App - For Begineers

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

Page 4: Progressive Web App - For Begineers

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.”

Page 5: Progressive Web App - For Begineers

Example

Page 6: Progressive Web App - For Begineers

UNACADEMY

Page 7: Progressive Web App - For Begineers

Features

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

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

Page 8: Progressive Web App - For Begineers

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

Page 9: Progressive Web App - For Begineers

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

Page 10: Progressive Web App - For Begineers

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

Page 11: Progressive Web App - For Begineers

SPLASH SCREEN

Page 12: Progressive Web App - For Begineers

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

Page 13: Progressive Web App - For Begineers

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

Page 14: Progressive Web App - For Begineers

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

Page 15: Progressive Web App - For Begineers

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

Page 16: Progressive Web App - For Begineers
Page 17: Progressive Web App - For Begineers

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)

Page 18: Progressive Web App - For Begineers
Page 19: Progressive Web App - For Begineers

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

Page 20: Progressive Web App - For Begineers

APP SHELL

Page 21: Progressive Web App - For Begineers

Service WorkerScripts that run in background, seprate from page.

Respond to event.

Short Life Time.

Page 22: Progressive Web App - For Begineers
Page 23: Progressive Web App - For Begineers
Page 24: Progressive Web App - For Begineers
Page 25: Progressive Web App - For Begineers
Page 26: Progressive Web App - For Begineers
Page 27: Progressive Web App - For Begineers

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

Page 28: Progressive Web App - For Begineers
Page 29: Progressive Web App - For Begineers

Development Framework

•Vanilla JS•React•Angular•Polymer•Express

Page 30: Progressive Web App - For Begineers

Tools :

Manifest Chrome Manifest Creater

Manifest Validator

Service Worker

SW-Precache SW-Toolkit

Light House ( For PWA Validation)

Page 31: Progressive Web App - For Begineers

Reference :Google Web Starter Kit

PWA by Mike Russel

www.addyosmani.com

Udacity Progressive Web App

Page 32: Progressive Web App - For Begineers

Closing Notes :

Still is in infancy

But nice time to play around.

All Browser Support ( Waiting for Safari for Service Worker)

Page 33: Progressive Web App - For Begineers

Twitter/abhishek5139190

[email protected]

www.abhishekmishra.me

Reach out to me @

Page 34: Progressive Web App - For Begineers

Merry Christmas &

Happy New Year

Page 35: Progressive Web App - For Begineers

THANK YOU