web push johannes brodwall. outline the low down is it time? implementation notes firefox chrome...
TRANSCRIPT
WEB PUSHJohannes Brodwall
Outline
The low downIs it time?Implementation notes• Firefox• Chrome• Safari• Implementation bits
What’s up?
What
What• Notification bubbles on web
and mobile
What• Based on (unstable)
standards
What• Using major push networks
• Google Cloud Messaging
• Apple Push Notification service
Why
Why• No installation required
• Don’t need to be on webpage
Why• Keep users up to date• Notify of pending work
Why• Reach more clients with less
code
How
How• Set up application with push
service provider(s)
How• Client JavaScript:
• navigator.serviceWorker.register <- registration• registration.pushManager.subscribe <- endpointId
• Sends endpointId to server
• Application server saves endpoint
How• Application server
• Sends a proprietary command to Push Provider
• Client ServiceWorker• registration.showNotification
WhatWhyHow
Potential and reality
SafariOS X Mavericks
October, 2013
Safari announcement screenshot
Safari• Web, but not iPhone
• Non-standard• Technologically … advanced
Chrome 42,April 21st, 2015
Chrome• Mac, PC, Android, but not iPhone
• Based to open standards• Pretty easy to implement
Others
Others• Firefox nightly almost there
• Opera experimental, but doesn’t work• Internet Explorer – never?
• Microsoft Edge – “Under consideration”
Trouble
Trouble• Permissions
• HTTPS• SSL (APNs)
Ready?
Ready?• Today ~ 50% desktops and
~40% mobiles• Optional value added feature
Yes – as optional feature
Implementation
Implementing registration1. 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
Implementing notification1. 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
== Register a user for push notifications ==
User -> webpage: Click registrationwebpage -> serviceworker: registerwebpage -> browser: subscribebrowser -> GCM: subscribewebpage <-- browser: endpointIdwebpage -> appserver: endpointIdUser -> webpage: Closes window
== Send push notifications ==
[-> appserver: Send message to userappserver -> GCM: POST endpointsGCM -> serviceworker: onpush()serviceworker -> appserver: GET /last-messageserviceworker -> browser: showNotificationbrowser -> User: Shows notificationUser -> browser: Clicks notificationbrowser -> serviceworker: onnotificationclick()serviceworker -> browser: openWindowbrowser -> webpage: Display webpagewebpage -> User
Firefox (Nightly)
Firefox (Nightly)• No registration needed with
Mozilla push• Do HTTP PUT to endpointId
TODO: Code for app server
TODO: Code for service worker
TODO: Code for service worker
Implementation bits
Implementation bits• Promises
• Permissions• ExpressJs
Implementation bits• Promises
• Permissions• ExpressJs
Implementation bits• Promises
• Permissions• ExpressJs
Chrome
Chrome• Register application with Google
Developer Console• Do HTTP POST with a list of
endpointIds as JSON payload
TODO: Code for service worker
Safari
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
Create push package
Open SSL reference1. Getting the key and pem cert files
openssl genrsa -out <name>.key 2048
openssl req -new -sha256 -key <name>.key –out <name>.csr
Sign <name>.csr with Apple and get .cer
openssl x509 –in website_aps_production.cer –inform DER –out website_aps_production.pem –outform PEM
Files• <name>.key – private key in PEM (readable) format –
keep secret!• <name>.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
Open SSL reference2. Signing files
openssl smime -sign -signer certificate.pem-inkey <name>.key-in <file> -binary-outform DER -out signature file
Verify signature (for debugging)
openssl smime –verify–in signature file –inform DER –content <file>–noverify
Registering client
Sending push notifications
Cordova
Cordova/Adobe Phonegap• Supports Android, iOS, Windows
• Push notifications through 3rd party plugin (not Windows)
• Uses APNs and GCM (like web push)
Azure
Azure• Azure notification hubs
• Provides common contact point• Doesn’t actually solve the hard bits
Summary
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
Safari push• Not supported on mobile
• Needlessly hard to implement, but APNs is also needed for iOS apps
Implementation bits• Promises• ExpressJS
• Permissions
My last mobile app used Cordova
My next will be pure web for Android
THANK [email protected]
http://johannesbrodwall.com
https://github.com/jhannes/web-push
http://twitter.com/jhannes