firefoxos london meetup february 2014: hands on web activities

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!