Tutorial with examples on how to use and define Web Activities in Firefox OS

1. FIREFOX OS
LONDON MEETUP
FEBRUARY 2014
!
Hands on Web Activities

2. WELCOME!
Today we are going to have a
practical session around
!
Web Activities
!
(and the new app manager!)

3. WHAT ARE WEB ACTIVITIES?
Web activities are one way for applications to
interact which each other.
We delegate a functionality on a different
application and wait for the result.

5. STARTING AN ACTIVITY
SYNTAX
var activity = new MozActivity({
name: "/*Verb, usally 'pick', 'open', 'share' ...*/",
data: {
// We can pass parameters to the activity
}
});
!
activity.onsuccess = function() {
// Success return from the activity
// We can ask for the result, if any
var result = this.result;
console.log(result);
};
!
activity.onerror = function() {
// Called when a error happened
console.log(this.error);
};

6. WHERE CAN I FIND THEM?
https://developer.mozilla.org/en-US/docs/WebAPI/Web_Activities

7. EXAMPLE
HTTPS://GITHUB.COM/FIREFOXOS-LONDON-MEETUP/USING-WEB-ACTIVITIES

8. OFFERING OUR SERVICES
•
Is your app particularly
good doing some task?
•
Do you want to drive more
users to your app?
•
Make other developers to
recognise your work!

9. DEFINING AN ACTIVITY
3 simple steps
•
Define it on your application manifest.
•
Handle the activity request.
•
Return the result of the activity.

10. DEFINE THE ACTIVITY
IN YOUR MANIFEST FILE
{
// Your manifest goes here
!
}
// Activity registration, you can define as much
// as you want
"activities": {
// It starts with the verb (pick, share, new ..
"pick": {
// Document to be opened
"href": "./index.html",
// How the activity will be opened
"disposition": "inline",
// Extra data to filter if we can handle
// the activity request
"filters": {
"type": ["image/*","image/jpeg","image/png"]
},
"returnValue": true
}
}

11. HANDLING THE ACTION
navigator.mozSetMessageHandler('activity', function(activityRequest) {
var options = activityRequest.source;
!
// In options.name we have the verb used
console.log(options.name);
// options.data will contain the object
// we used to invoke the activity
console.log(options.data);
!
});

12. RETURN THE RESULT
navigator.mozSetMessageHandler('activity', function(activityRequest) {
// Send back the result
if (result) {
activityRequest.postResult(result);
} else {
activityRequest.postError("Error executing the activity");
}
});

13. EXAMPLE
HTTPS://GITHUB.COM/FIREFOXOS-LONDON-MEETUP/
DEFINING-WEB-ACTIVITIES

14. THANKS!