Mobify Web Push Service Worker

A high-level overview of the service worker used in Mobify's Web Push Notifications system.

Transcript

1. Mobify Web Push Service Worker Daniel Brook-Roberge, October 4, 2016 Engineering Meeting Web Push Service Worker 1
2. Service Workers » Javascript programs that run in the background » Persist even when the associated site is closed » Are associated with a URL scope, in which they have full control over HTTP requests » HTTPS only! ! Not on iOS or Safari! " Web Push Service Worker 2
3. Service Worker Environment » Restricted environment with no DOM » Event driven, with a variety of events sent from the browser » Data persistence using IndexedDB » Started and stopped by the browser outside its control, destroying any closures Web Push Service Worker 3
4. Web Push » Push messaging in the browser » W3C standard implemented in Chrome and Firefox (and soon MS Edge) » Safari for Mac has it, but implemented entirely differently » No support on iOS. At all. ! (Ask again after WWDC '17) Web Push Service Worker 4
5. The Service Worker's Role in Web Push » When we send a message, we make a request to the web push server corresponding to that subscription » The web push server then sends the message to the browser » For flexibility, it is not interpreted by the browser but is instead received by the service worker. » The service worker must (eventually) display a notification in response. Web Push Service Worker 5
6. Our Web Push Service Worker » The web push service worker has three main tasks: » Receive and display messages » Keep the backend updated on the state of the subscription and browser » Map files from the backend into the web push hosting domain » It is written in non-transpiled ES5-plus-Promises Web Push Service Worker 6
7. Two Push Types, Two Codepaths » When web push first became available in Chrome 42, pushes came with no data » These 'tickles' required the service worker to fetch the actual notification from the backend. » Starting with Firefox 44 and Chrome 50, support for encrypted push payloads was introduced. » Having received the payload, the worker can then display the notification immediately without making any network requests. Web Push Service Worker 7
8. Click Response » For flexibility, the browser defines no default action for clicking on a message. » Instead, it sends an event to the service worker, which can respond however it deems appropriate » In our system, we attach a URL to the message and notification, and then open that URL when the message is clicked. » It also is able to send analytics events to Sandy Web Push Service Worker 8
9. Subscription Updates » A number of things about the browser can change without the backend knowing. » This includes crucial things like the payload encryption key » But also nice-to-haves like browser version. » On push, registration, and a few other non-urgent events, the worker checks these and sends an update to the backend if they have changed. Web Push Service Worker 9
10. Path Mapping » To access the web push permissions and subscription for a domain, the current page must exist on that domain. » Since we often do not control the subscription domain, we would like a way to deploy and change assets that does not require changes in the customer's system » With the service worker, we can proxy asset requests so that assets in our system can be returned for requests in the subscription domain. Web Push Service Worker 10
11. Service Workers and HTTP Requests » Each service worker is registered to control a specific URL scope. » Any HTTP request in that scope, regardless of source, triggers a fetch event in the worker. » The worker can decide to let this request continue, or respond to it with content of its own. » In particular, we can forward the request to a different URL, while returning the result at the initial URL. Web Push Service Worker 11
12. Mapping Example https://www.pureformulas.com/webpush/webpush.html becomes https://webpush-cdn.mobify.net/mapped/pureformulas/ webpush.html Web Push Service Worker 12
13. Virtual Manifests » The worker can also return content it has cached or generated » This has been used to provide the manifest file required for GCM push subscriptions (on older versions of Chrome) Web Push Service Worker 13
14. Source Code: https://github.com/mobify/duncan/tree/master/js/worker Web Push Service Worker 14
15. Summary » The web push worker is needed to receive the message, display it, and respond to clicks. » It also provides useful services for the maintenance of our system » The service worker proxy functionality is used to allow easy customization Web Push Service Worker 15