Embed Size (px)
Citation preview
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
Why?
Progressive Web Apps
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/
Aren’t we already building 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/
Our Goal
You’re kidding, right?
Our Goal
• Installable!
• Works Offline!
• Receives Push Notifications!
Baby Steps
Add to Home Screen
manifest.json
We can do better than that.
Instant Loading
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
Registering a Service Worker
Installing a Service Worker
Intercept network requests
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
Cache then network
So what did that buy us?
From network
From cache
Offline!
I’d say that we did better.
Push Notifications
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
Subscribe to push notifications
Send that to your server
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
Listen for push events
Get the message and display notification
Handle notification click
Caching / offline strategy
Push notifications
Handle 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/
All we really did…
• manifest.json
• Service Worker
Tools
https://brucelawson.github.io/manifest/
https://github.com/GoogleChrome/lighthouse
https://developers.google.com/web/#progressive-web-apps
https://pwa.rocks
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/
Let’s make the web better.
