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







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!



  1. It's Simple Push
  2. We respect user's privacy




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









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:


Push Notifications with Firefox OS

By Francisco Jordano