Introduction to Progressive Web App
•Download as PPTX, PDF•
0 likes•404 views
This document introduces progressive web apps (PWAs) and service workers. PWAs aim to provide native app-like experiences through the browser by being reliable, fast, and engaging. Service workers act as proxies that allow developers to control caching and how resources are requested. The document discusses prerequisites for PWAs, the service worker lifecycle, features like offline access, and tools for auditing PWAs.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to Introduction to Progressive Web App
Similar to Introduction to Progressive Web App (20)
Recently uploaded
Recently uploaded (20)
Introduction to Progressive Web App
- 2. Why do developers need a native app? • Performance • Offline access • Periodic background processing • Notifications • Sensors • OS-specific features
- 3. ProgressiveWeb App are A 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
- 4. 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).
- 5. Prerequisites 1. PWAs can work across browsers 2. Security – HTTPS Service worker
- 6. 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.
- 8. Features • Offline • Push • Background Sync • …. Service worker
- 9. Serving suggestions - responding to requests • Cache only • Network only • Cached first • Network first • Cache then network • …
- 10. Cache only
- 14. Tools • Lighthouse (demo use tool to check)
- 15. Q&A
Editor's Notes
- A Progressive Web App is: Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. App-like - Feels like an app to the user with 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. Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. Re-engageable - Makes re-engagement easy through features like push notifications. Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store. Linkable - Easily share via URL, does not require complex installation.
- https://jakearchibald.github.io/isserviceworkerready Page.github.com ApFirebase.com pspot.com Heroku.com
- if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js’, {scope: ‘/’}).then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); } chrome://inspect/#service-workers