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!
- 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.
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 ....});
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
Push Notifications with Firefox OS
Learn how push notifications works in Firefox OS
