introduction to progressive web app
TRANSCRIPT
Introduction to Progressive Web
AppsBINHBV
Why do developers need a native app?
• Performance• Offline access• Periodic background processing • Notifications• Sensors• OS-specific features
Progressive Web App areA new way to deliver amazing user experiences on the web.
• Reliable - Load instantly and works on flaky networks .• Fast - Smooth animation, scrolling and nav.• Engaging - Feel like a natural app on the device, with an
immersive user experience.• On the home screen, no URL bar, icons, splash • Re-engaging with push notifications
First progressive web app• Run demo on new Incognito window
(Any registrations and caches created from within an Incognito window will be cleared out once that window is closed)• Run again with real device.• Chrome will prompt user Add to HomeScreen
(app Installable).
Prerequisites1. PWAs can work across browsers
2. Security – HTTPS
Service worker
Introduction about Service Woker
A service worker is like a client-side proxy, written in JavaScript and puts you in control of the cache and how to respond to resource requests.
Life cycleService worker
Features
• Offline• Push• Background Sync • ….
Service worker
Serving suggestions - responding to requests
• Cache only• Network only• Cached first• Network first• Cache then network• …
Cache only
Tools
• Lighthouse (demo use tool to check)
Q&A
Documents
• https://developers.google.com/web/progressive-web-apps/• https://
developers.google.com/web/fundamentals/getting-started/primers/service-workers