firefoxos london meetup february 2014: hands on web activities
DESCRIPTION
Tutorial with examples on how to use and define Web Activities in Firefox OSTRANSCRIPT
FIREFOX OS LONDON MEETUP
FEBRUARY 2014!
Hands on Web Activities
WELCOME!Today we are going to have a
practical session around !
Web Activities !
(and the new app manager!)
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.
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); };
WHERE CAN I FIND THEM?
https://developer.mozilla.org/en-US/docs/WebAPI/Web_Activities
EXAMPLE HTTPS://GITHUB.COM/FIREFOXOS-LONDON-MEETUP/USING-WEB-ACTIVITIES
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!
DEFINING AN ACTIVITY
• Define it on your application manifest.
• Handle the activity request.
• Return the result of the activity.
3 simple steps
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 } } }
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); !});
RETURN THE RESULT
navigator.mozSetMessageHandler('activity', function(activityRequest) { // Send back the result if (result) { activityRequest.postResult(result); } else { activityRequest.postError("Error executing the activity"); } });
EXAMPLE HTTPS://GITHUB.COM/FIREFOXOS-LONDON-MEETUP/
DEFINING-WEB-ACTIVITIES
THANKS!