WEB PUSHJohannes Brodwall

Outline

The low downIs it time?Implementation notes• Firefox• Chrome• Safari• Implementation bits

What’s up?

What

http://k33x.com/push

http://k33x.com/push

http://k33x.com/push

http://k33x.com/push

http://k33x.com/push

What• Notification bubbles on web

and mobile

http://k33x.com/push

http://k33x.com/push

http://k33x.com/push

http://k33x.com/push

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 YOUJohannes.Brodwall@SopraSteria.com

http://johannesbrodwall.com

https://github.com/jhannes/web-push

http://twitter.com/jhannes