Building Progressive Web Apps (Kyle Buchanan)
-
Upload
red-hat-developers -
Category
Software
-
view
605 -
download
2
Transcript of Building Progressive Web Apps (Kyle Buchanan)
About Me
Kyle Buchanan
Senior Software Engineer at Red Hat
10+ Years of Front-End Development
Excited and frustrated at the same time
What is a Progressive Web App?
Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native
applications to users. They're reliable, fast, and engaging.
Source: https://developers.google.com/web/progressive-web-apps/
Principles of a Progressive Web App
• Fast
• Secure
• Responsive
Source: https://developers.google.com/web/progressive-web-apps/
Principles of a Progressive Web App
• Fast
• Secure
• Responsive
• Add to Home Screen
• Instant Loading
• Push Notifications
Source: https://developers.google.com/web/progressive-web-apps/
Service Worker
• Create offline experiences
• Intercept network requests
• Cache
• Push notifications
• Background sync
Source: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
Service Worker
• Create offline experiences
• Intercept network requests
• Cache
• Push notifications
• Background sync
Source: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
Responding to Fetch Events• Cache only
• Network only
• Cache, falling back to network
• Cache and network race
• Network falling back to cache
• Cache then network
Steps for Receiving Push Notifications
1. Register service worker
2. Get reference to subscription manager
3. Subscribe to get endpoint
4. Send endpoint to backend
5. Listen for push notifications in service worker
6. Show notification when push event is received
7. Respond to notification click
Steps for Receiving Push Notifications
1. Register service worker
2. Get reference to subscription manager
3. Subscribe to get endpoint
4. Send endpoint to backend
5. Listen for push notifications in service worker
6. Show notification when push event is received
7. Respond to notification click
Steps for Receiving Push Notifications
1. Register service worker
2. Get reference to subscription manager
3. Subscribe to get endpoint
4. Send endpoint to backend
5. Listen for push notifications in service worker
6. Show notification when push event is received
7. Respond to notification click
Principles of a Progressive Web App
• Fast
• Secure
• Responsive
• Add to Home Screen
• Instant Loading
• Push Notifications
Source: https://developers.google.com/web/progressive-web-apps/
Principles of a Progressive Web App
• Fast
• Secure
• Responsive
• Add to Home Screen
• Instant Loading
• Push Notifications
Source: https://developers.google.com/web/progressive-web-apps/
Links
Build your first progressive web app https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/
Progressive Web Apps: Escaping Tabs Without Losing Our Soulhttps://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
The Offline Cookbook https://jakearchibald.com/2014/offline-cookbook/
Getting started with Progressive Web Apps https://addyosmani.com/blog/getting-started-with-progressive-web-apps/