Push Notifications

Hi! I'm Francisco Jordano

@mepartoconmigo

arcturus

A full box of awesomeness

All the power of the web on it
New set of web apis for accessing hardware
Freedom to the user and developers

... but we were missing something

Push Notification Service was not part of release 1.0.1

... but that's the past!

Welcome the new Web API for Push Notifications

Simple PUSH

Ready from version 1.1

On the process of becoming W3C Push API

Before diving into it let's review 2 concepts in Firefox OS

Permissions

Defined in each application manifest
Different permissions with different security levels

 "permissions": {
    "browser":{},
    "systemXHR":{},
    "settings":{ "access": "readonly" },
    "geolocation" : {},
    "storage": {},
    "desktop-notification" : {},
    "device-storage:pictures" : { "access": "readwrite" },
    "device-storage:videos" : { "access": "readwrite" },
    "device-storage:music" : { "access": "readwrite" }
  }

System Messages

Events sent from the system to an app, always delivered.

 "messages": [
     { "notification": "/index.html" }
  ]

(In your manifest.json)

 window.navigator.mozSetMessageHandler('notification',
      this.onNotification.bind(this));
 }

(In your js code)

How does it works

      +--------+           +--------+             +--------+           +--------+
      | webapp |           |  user  |             |  push  |           |  app   |
      |        |           | agent  |             | server |           | server |
      +--------+           +--------+             +--------+           +--------+
          |                    |                      |                     |
          |-----register------>|                      |                     |
          |                    |                      |                     |
          |              (user accepts)               |                     |
          |                    |                      |                     |
          |                    |<-setup push service->|                     |
          |                    |                      |                     |
          |<---success---------|                      |                     |
          |                    |                      |                     |
          |<--activate service with PushService attributes----------------->|
          |                    |                      |                     |
          |                    |                      |<--push notification-|
          |                    |                      |   per service API   |
          |                    |                      |                     |
          |                    |             (match to user agent)          |
          |                    |                      |                     |
          |                    |<--push notification--|                     |
          |                    | per service protocol |                     |
          |                    |                      |                     |
          |            (match to webapp)              |                     |
          |                    |                      |                     |
          |<---system message--|                      |                     |
          |                    |                      |                     |

... err ... ok,

let's see it on detail

but before, what kind

of information do we send

through the Simple Push API ?

We just exchange a

version number!

It's Simple Push
We respect user's privacy

... and what's the Push Notification Server?

Provides the push service
It's configure in the phone, so no need of doing anything
Already different implementations:

Now YES, let's take a look ;)

Before we start,
setup your manifest in your web app

"permissions": {  "push": {}},"messages": {  "push": "/index.html"
}

We need to ask for 'push' permissions

And decide which document will handle the notification

1. Register for receiving push notifications

if (!navigator.push) {  alert('Sorry push not supported');  return;}
var request = navigator.push.register();request.onsuccess = function onSuccess() { ... };request.onerror = function onError(e) { ... };

Send a DOMRequest to ask for a channel

2. Save the end point for push in your server side application

request.onsuccess = function onSuccess() {  var endPoint = request.result;   // ... now we have a way to be notified}

The endpoint is unique
Refers to a url of the push notification server
We can ask for as many end point (channels)
as needed per application.

3. Share the end point with your server side app

Once we send the end point to our server, this can start sending notifications just by doing:

 curl -X PUT --data 'version=<version_number>' '<end point we got>'

The version number must be autoincremental.
So we need to keep track of it.

4. Receive the notification in our client side web app

window.navigator.setMessageHandler('push', function onPushNotification(evt) {  var endpoint = evt.pushEndpoint;  var version = evt.version;
  .... do your magic ....});

What we should do just with the version number?
That's up to us to decide.

Demo time!

Let's see a real example.

You can download both web app and server side app from:

https://github.com/arcturus/campusparty-firefoxos-push