Service Workers

Push Notifications, Offline Mode, and Background Sync with Service Workers

Transcript

1. Service Workers ヾ(⌐▪_▪)ノ♪
2. arnellebalane
3. What are Service Workers?
4. A script that is run by the browser in the background
5. Push Notifications Background Sync Offline Mode
6. Service Workers provide the foundation that these features can rely on Push Notifications Background Sync Offline Mode
7. Sounds cool. Should I use them right now?
8. NO
9. HELL NO
10. (well at least not yet)
11. But whyyy? ლ(ಠ益ಠლ)
12. source: caniuse.com
13. source: caniuse.com (ノಠ益ಠ)ノ彡┻━┻
14. Push Notifications Background Sync Offline Mode 42 46 49
15. Push Notifications Background Sync Offline Mode 42 46 49 ┻━┻ ︵ヽ(`Д´)ﾉ︵ ┻━┻
16. WTH?
17. ┬─┬ノ( º _ ºノ) ┬─┬ ┬─┬
18. ┬─┬ ┬─┬ ┬─┬ノ( º _ ºノ)
19. Okay fine. Tell me how to do it.
20. asyncOne(function() { asyncTwo(function() { asyncThree(function() { // callback hell }); }); }); asyncOne() .then(asyncTwo) .then(asyncThree) .catch(function(error) { // handle error }); traditional callbacks using promises Service Workers make extensive use of promises
21. Web APIs that are asynchronous (such as asynchronous XHR and localStorage) are not accessible inside service workers. Designed to be fully asynchronous
22. Service Worker LifeCycle http://www.html5rocks.com/en/tutorials/service-worker/introduction/
23. Detecting ServiceWorker Support if ('serviceWorker' in navigator) { // Yay! It's supported! }
24. Installing a ServiceWorker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { // Registration was successful! }) .catch(function(error) { // Registration failed. }); }
25. '/service-worker.js' ⇒ scope: '/' ServiceWorker Scope (；一_一)
26. Installing a ServiceWorker service-worker.js self.addEventListener('install', function(event) { // Do stuff to install the service worker. // We'll see more of this later. });
27. Installing a ServiceWorker service-worker.js self.addEventListener('activate', function(event) { // This service worker is now the active one! // The previous version (if any) has already been removed by the browser. });
28. That’s it! \ (•◡•) /
29. Push Notifications
30. Support Detection if ('Notification' in window) { // Yay we can show notifications! } Check support for notifications
31. Support Detection if (Notification.permission !== 'denied') { // Yay the user did not block notifications! } Check whether the user blocked notifications
32. Support Detection if ('PushManager' in window) { // Yay we have support for push notifications! } Check support for push notifications
33. (~˘▾˘)~
34. Subscribing to Push Notifications registration.pushManager.subscribe().then(function(subscription) { // Yay we are not registered to push notifications! // Now let's get our subscription token! }); Chrome: need to pass { userVisibleOnly: true } to subscribe() call.
35. Subscription Token subscription parameter is an object with a key called endpoint, which might look like this: https://android.googleapis. com/gcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG- rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi- zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh- L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
36. Subscription Token subscription parameter is an object with a key called endpoint, which might look like this: https://android.googleapis. com/gcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG- rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi- zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh- L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP
37. Unsubscribing from Push Notifications registration.pushManager.getSubscription().then(function(subscription) { if (subscription) { subscription.unsubscribe().then(function() { // Unsubscribe successful! }); } else { // We are not yet subscribed for push notifications. } }) Chrome: need to pass { userVisibleOnly: true } to subscribe() method.
38. Receiving Push Notifications service-worker.js self.addEventListener('push', function(event) { // We just got a push message! });
39. Displaying a notification service-worker.js self.addEventListener('push', function(event) { var title = 'Notification Title'; var body = 'Notification Body'; var icon = '/path/to/icon.png'; event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon }); ); });
40. Perform something when notification is clicked service-worker.js self.addEventListener('notificationclick', function(event) { // The notification just got clicked! });
41. Where do these push notifications come from?
42. Google Cloud Messaging
43. A Google Cloud Platform service that enables developers to send messages between servers and client applications or vice versa. Handles all aspects of the message transfer, from queueing of the messages up to their delivery to and from the client applications. Google Cloud Messaging
44. How It Works Google Cloud Messaging server client-456 client-123 client-789
45. Setting up GCM for Push Notifications Make a project in the Google Developer Console
46. Setting up GCM for Push Notifications Enable “Google Cloud Messaging” from the API Manager
47. Setting up GCM for Push Notifications Create a “Server Key” in API Manager > Credentials > API Key
48. Send a request to GCM with the following information: url: https://android.googleapis.com/gcm/send method: POST headers: Authorization: key=GCM_SERVER_KEY Content-Type: application/json Data: <GOOGLE_CLOUD_MESSAGING_OPTIONS> Sending notification from server to GCM
49. to Specifies the subscription token of the recipient registration_ids Specifies a list of subscription tokens for multiple recipients collapse_key Identifies a group of messages that can be collapsed, meaning that only the latest message with this key will be delivered to the client time_to_live Specifies how long (in seconds) the message should be kept in GCM storage while the client is still offline notification Specifies a predefined notifications object Google Cloud Messaging options
50. curl --header "Authorization: key=GCM_SERVER_KEY" --header="Content-Type: application/json" https://android.googleapis.com/gcm/send -d "{"to":"client- 123"}" Sample GCM request using curl
51. - Can’t pass data along with the push notification - Can’t get list of visible notifications for programmatic closing - Notifications can only be userVisibleOnly - On mobile, predefined notification data only appears when Chrome is closed - On desktop, when Chrome is closed, push notifications won’t be received Push Notifications - The ಠ╭╮ಠ Parts
52. Offline Mode
53. Achieved by intercepting network requests Cache API + Fetch API Offline Mode
54. Caching Resources service-worker.js var CACHE_NAME = 'sw-cache'; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME).then(function(cache) { // Cache successfully opened! }) ); }); Open a cache
55. Caching Resources service-worker.js var CACHE_NAME = 'sw-cache'; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME).then(function(cache) { return cache.add('/some/file.png'); }) ); }); Add resource paths to the cache
56. Caching Resources service-worker.js var CACHE_NAME = 'sw-cache'; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME).then(function(cache) { return cache.addAll([ '/', '/some/file.png' ]); }) ); }); Add resource paths to the cache
57. service-worker.js var CACHE_NAME = 'sw-cache'; self.addEventListener('activate', function(event) { event.waitUntil( caches.keys().then(function(keys) { return Promise.all(keys.map(function(key) { if (key !== CACHE_NAME) return caches.delete(key); })); }); ); }); Deleting old cache versions
58. service-worker.js self.addEventListener('fetch', function(event) { // Network request intercepted! // request = event.request }); (；一_一) Intercepting network requests
59. '/service-worker.js' ⇒ scope: '/' - Fires 'fetch' events for all network requests '/static/service-worker.js' ⇒ scope: '/static' - Fires 'fetch' events only for requests with paths that start with '/static' - Won’t fire 'fetch' event for e.g. '/images/sample.png' ServiceWorker Scope
60. service-worker.js self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { if (response) { return response; } // Resource is not cached. }) ); }); Respond with cached resource
61. service-worker.js self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { if (response) { return response; } return fetch(event.request); }) ); }); Fetch resource if it is not cached yet
62. - Only GET requests can be cached - Can also cache resources from other origins - Can also dynamically cache requested resources - Due to the ability to intercept network requests, Service Workers need to be served over HTTPS for security purposes Offline Mode - Other Stuff
63. Background Sync
64. Background Sync flowchart some data to be sent to server server supports background sync? send data to server the usual way save data to IndexedDB ( ﾟヮﾟ) ONLINE!!! NO register to background sync YES
65. Support Detection if ('SyncManager' in window) { // Yay background sync is supported! }
66. Registering for Background Sync registration.sync.register('send-message').then(function() { // Now registered for background sync! // Next, save the message to a persistent storage. }); The 'send-message' string passed to the register() method is a tag, which can be checked in the service worker to determine how it should send the data to the server.
67. Knowing if we can already sync to server service-worker.js self.addEventListener('sync', function(event) { if (event.tag === 'send-message') { // Retrieve from persistent storage those objects that are tagged // as 'send-message'. } }); One 'sync' event for each unique registered tag.
68. Yay I’m done talking! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
69. DEMO TIME! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ✧ﾟ･: *ヽ(◕ヮ◕ヽ)
75. goo.gl/1CQ82n
76. github.com/arnellebalane/the-machine
77. ಠ‿↼