1. WEB PUSH Johannes Brodwall

2. Outline

3. The low down Is it time? Implementation notes Firefox Chrome Safari Implementation bits

4. What’s up?

5. What

6. http://k33x.com/push

11. What Notification bubbles on web and mobile

12. http://k33x.com/push

16. What Based on (unstable) standards

18. What Using major push networks Google Cloud Messaging Apple Push Notification service

19. Why

20. No installation required Don’t need to be on webpage

21. Why Keep users up to date Notify of pending work

22. Why Reach more clients with less code

23. How

24. Set up application with push service provider(s)

25. How Client JavaScript: navigator.serviceWorker.register <- registration registration.pushManager.subscribe <- endpointId Sends endpointId to server Application server saves endpoint

26. How Application server Sends a proprietary command to Push Provider Client ServiceWorker registration.showNotification

27. What Why How

28. Potential and reality

29. Safari OS X Mavericks October, 2013

30. Safari announcement screenshot

31. Safari Web, but not iPhone Non-standard Technologically … advanced

32. Chrome 42, April 21 st, 2015

33. Chrome Mac, PC, Android, but not iPhone Based to open standards Pretty easy to implement

34. Others

35. Firefox nightly almost there Opera experimental, but doesn’t work Internet Explorer – never? Microsoft Edge – “Under consideration”

36. Trouble

37. Permissions HTTPS SSL (APNs)

38. Ready?

39. Today ~ 50% desktops and ~40% mobiles Optional value added feature

40. Yes – as optional feature

41. Implementation

42. Implementing registration 1. Setup application with push provider 2. Client starts JavaScript service worker 3. Client requests permissions 4. Client registers with push provider 5. Client sends endpointId to app server

43. Implementing notification 1. App server notifies push provider 2. Push service awakens service worker on client 3. Service worker fetches message from app server 4. Service worker shows notification

44. == Register a user for push notifications == User -> webpage: Click registration webpage -> serviceworker:register webpage -> browser: subscribe browser -> GCM: subscribe webpage <-- browser: endpointId webpage -> appserver: endpointId User -> webpage: Closes window

46. == Send push notifications == [-> appserver: Send message to user appserver -> GCM: POST endpoints GCM -> serviceworker: onpush() serviceworker -> appserver: GET /last-message serviceworker -> browser: showNotification browser -> User: Shows notification User -> browser: Clicks notification browser -> serviceworker: onnotificationclick() serviceworker -> browser: openWindow browser -> webpage: Display webpage webpage -> User

50. Firefox (Nightly)

51. No registration needed with Mozilla push Do HTTP PUT to endpointId

57. TODO: Code for app server

58. TODO: Code for service worker

61. Implementation bits

64. Promises Permissions ExpressJs

81. Implementation bits Promises Permissions ExpressJs

83. Implementation bits Promises Permissions ExpressJs

89. Chrome

90. Register application with Google Developer Console Do HTTP POST with a list of endpointIds as JSON payload

108. TODO: Code for service worker

109. Safari

110. Apple Push Notification service Get SSL certificate from Apple Create push package (zip file with ssl signature) Request push permission Send payload to Apple over ssh port 2195

112. Create push package

127. Open SSL reference 1. Getting the key and pem cert files openssl genrsa -out.key 2048 openssl req -new -sha256 -key.key –out.csr Sign.csr with Apple and get.cer openssl x509 –in website_aps_production.cer –inform DER –out website_aps_production.pem –outform PEM

128. Files.key – private key in PEM (readable) format – keep secret!.csr – Certificate signing request in in PEM (readable) format – give to Apple and then discard website_aps_production.cer – Valid certificate you get from Apple in DER (binary) format website_aps_production.pem – Valid certificate in PEM (readable) format

129. Open SSL reference 2. Signing files openssl smime -sign -signer certificate.pem -inkey.key -in -binary -outform DER -out signature file Verify signature (for debugging) openssl smime –verify –in signature file –inform DER –content –noverify

130. Registering client

133. Sending push notifications

136. Cordova

137. Cordova/Adobe Phonegap Supports Android, iOS, Windows Push notifications through 3 rd party plugin (not Windows) Uses APNs and GCM (like web push)

138. Azure

139. Azure notification hubs Provides common contact point Doesn’t actually solve the hard bits

140. Summary

141. Push API Provides web push to almost ½ of desktop market now Only web supported on Chrome (50%), but look out for Firefox (15%)! Replaces many apps on Android Easy to implement

142. Safari push Not supported on mobile Needlessly hard to implement, but APNs is also needed for iOS apps

144. Implementation bits Promises ExpressJS Permissions

145. My last mobile app used Cordova My next will be pure web for Android

146. THANK YOU Johannes.Brodwall@SopraSteria.com http://johannesbrodwall.com https://github.com/jhannes/web-push http://twitter.com/jhannes