App Basics for FirefoxOS - Web Activities

Web Activities are an alternative way to Web APIs to access the hardware in a certain device. Instead of getting an API to speak to the device directly, Web Activities allow you to create an ecosystem of applications on the device talking to each other. For example, instead of trying to access the camera, your app would ask for an image and the users of the device can use their favourite application to take a photo. Instead of asking the users for access to the hardware (which is important in terms of security), you allow them to use applications they already trust to do that. Furthermore, you can register your application as the go-to application for certain tasks in the operating system. You can think of Web Activities as the same process right-clicking on a file in a Desktop OS does: you get several apps as the option to open this file and you have a chance to tell the OS to always use this app from now on for this kind of file. Web Activities allow apps to talk to each other - on the device, without any need of a server in-between. All they transmit from one app to the other is the final data.

More on Web Activities: https://wiki.mozilla.org/WebAPI/WebActivities
More information on the video series: https://developer.mozilla.org/en-US/Firefox_OS/Screencast_series:_App_Basics_for_Firefox_OS

Web activities are the way that your app

can talk to other apps. You don't always

want to implement functionality that our

other apps already implement so in this

screencast I will show you how to use

web activities effectively.

Web activities allow your app to talk to

other apps. They can be used by any app

to request other apps to handle many

kinds of situations. Any app can register

itself as handler of a particular file type.

Much like right-clicking a document

on your desktop and selecting open with

creates a connection between a file type

and an application. For example, let's say

that you want your application to let

users set a background picture. There are

many ways users can pick an image. They

can take one with the camera, select one

from the gallery, select one from

wallpapers, or even paint a new picture

Writing one solution for each of these

use cases is hard work so why not let

the system do the work for you. Using web

activities, you just tell the system that

you want the user to pick an image.

The system then knows what kind of apps the

user has that allowed to get an image

and give this one back to you. You don't

need to know and the user doesn't need

to grant you access to the app. You just

get back an image which is exactly what

you wanted. Let's see how that process

looks. Our application has a background

image in place and we want to be able to

change the image with a click of a

button. Our app shouldn't have to access

the data of other apps which is why we

call a web activity in order to pick an

image. That way the user can pick the app

best suited to pick an image. In other

words, we don't access other apps for the

users but instead leave them in control.

Now let's take a look at the code.

The app is a very small self-contained HTML

file with some JavaScript and an

external CSS file which is not important

but makes things look a bit nicer.

The HTML contains only two elements: an image

and a button. The image is the background

of the application and will be replaced

with the image we'll retrieve from the

user by calling a web activity.

In the JavaScript, we access the button

and attach a click handler to call a web activity.

We create a new activity using

a mouse prefix as web activities aren't

standardarized. When we create the

activity, we pass it a configuration

object in this case the name of the

activity is pick which allows us to get

pictures and the data object contains a

type property with an array of mime

types that will filter the kinds of

images will receive. Using this the web

activity knows to tell the user to give

us an image. When the user clicks our

button the web activities UI launches

asking the user to give us an image and

listing all the possible sources.

Web activities are dumb requests which are

objects that work is asynchronously which

is why we need to define two handlers.

One for the success case and another for

the error case. We do that by assigning

functions to the unsuccess and an error

properties of the pic web activity.

The success handler of the big web activity

returns a blob to display a blob as an

image we have to convert it to a URL

object that we can assign to the image

we do that by using window.url.create.object.url

All we need then to

display the image is to assign it to the

SRC attribute of the image in the HTML document.

If the error handler is called,

it means that either something went

wrong at some point in the flow or that

the user canceled the flow altogether.

If a real error occurred, we will show an

alert dialog showing the error. If the

user canceled the flow, we'll will simply exit

for the sake of this example. Now we have

our application working just as we wanted

and we didn't have to implement any

logic for picking images. Using web

activities, the system automatically

provided a wrap with the necessary

resources. This example shows just a

small part of the power of web

activities. To get a real feel of what

can be done with them, head over to the

MDN wiki where you can find

documentation for all the possible

activities, their parameters, and examples

showing how to use them.