progressive web app - for begineers
TRANSCRIPT
![Page 1: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/1.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/2.jpg)
![Page 3: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/3.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/4.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/5.jpg)
Example
![Page 6: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/6.jpg)
UNACADEMY
![Page 7: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/7.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/8.jpg)
Connectivity independent - Enhanced with service workers to work offline or on low /poor network
![Page 9: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/9.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/10.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/11.jpg)
SPLASH SCREEN
![Page 12: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/12.jpg)
Instant Loading – Thanx to Service worker they are loaded via cache api.
![Page 13: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/13.jpg)
Re-engageable - Makes re-engagement easy through features like push notifications.
![Page 14: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/14.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/15.jpg)
Safe - Served through HTTPSVia TLS (Transport Layer Security)TLS 1.0 = SSL 3.1
![Page 16: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/16.jpg)
![Page 17: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/17.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/18.jpg)
![Page 19: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/19.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/20.jpg)
APP SHELL
![Page 21: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/21.jpg)
Service WorkerScripts that run in background, seprate from page.
Respond to event.
Short Life Time.
![Page 22: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/22.jpg)
![Page 23: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/23.jpg)
![Page 24: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/24.jpg)
![Page 25: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/25.jpg)
![Page 26: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/26.jpg)
![Page 27: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/27.jpg)
IMPACT : From “ APP ONLY MODEL” to “Back to Web”
![Page 28: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/28.jpg)
![Page 29: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/29.jpg)
Development Framework
•Vanilla JS•React•Angular•Polymer•Express
![Page 30: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/30.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/31.jpg)
Reference :Google Web Starter Kit
PWA by Mike Russel
www.addyosmani.com
Udacity Progressive Web App
![Page 32: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/32.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/33.jpg)
Twitter/abhishek5139190
www.abhishekmishra.me
Reach out to me @
![Page 34: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/34.jpg)
Merry Christmas &
Happy New Year
![Page 35: Progressive Web App - For Begineers](https://reader035.vdocument.in/reader035/viewer/2022070516/58737a211a28ab3c1a8b6ffb/html5/thumbnails/35.jpg)
THANK YOU