With the recent advancements in modern browsers, more native app-like features are coming to the browser. Things like push notifications, background sync, offline capabilities and home screen app icons have been added to browsers allowing developers to continue building web apps, but now include features that users expect from native apps. In this session we'll take an existing web app and transform it into a progressive web app. We’ll learn how to make the web app installable, how to make it work offline and finally we’ll learn how to add push notifications to re-engage our users.
8. 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/
10. Principles of a Progressive Web App
• Fast
• Secure
• Responsive
Source: https://developers.google.com/web/progressive-web-apps/
11. 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/
30. 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
39. 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
40. 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
42. 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
48. 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/
49. 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/
58. 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 Soul
https://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/