Web Activities – Firefox OS: the platform HTML5 deserves

In the sixth video of our “Firefox OS – the platform HTML5 deserves” series (the previous five videos are published here) we talk about how Web Activities allow you as a developer to access parts of the hardware without having to package your app.

Firefox OS - be the future

Check out the video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Telefónica Digital/ W3C talking about the why and how of Web Activities. You can watch the video here.

Web Activities are a way to extend the functionality of HTML5 apps without having to access the hardware on behalf of the user. In other words, you don’t need to ask the user to access the camera or the phone, but instead your app asks for an image or initiate a call and the user then picks the app most appropriate for the task. In the case of a photo the user might pick it from the gallery, the wallpapers or shoot a new photo with the camera app. You then get the photo back as a file blob. The code is incredibly simple:

var pick = new MozActivity({
   name: "pick",
   data: {
       type: ["image/png", "image/jpg", "image/jpeg"]}
});

You invoke the “pick” activity and you ask for an image by listing all the MIME types you require. This small script will cause a Firefox OS device or an Android device running Firefox to show the user the following dialog:

pick dialog

All activities have a success and failure handler. In this case you could create a new image when the user successfully picked a source image or show an alert when the user didn’t allow you to take a picture or it was the wrong format:

pick.onsuccess = function () {// Create image and set the returned blob as the src
    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(this.result.blob);
 
    // Present that image in your app
    var imagePresenter = document.querySelector("#image-presenter");
    imagePresenter.appendChild(img);
};
 
pick.onerror = function () {// If an error occurred or the user canceled the activity
    alert("Can't view the image!");
};

Other Web Activities work in a similar fashion, for example to ask the user to call a number you write the following:

var call = new MozActivity({
    name: "dial",
    data: {
        number: "+46777888999"
    }
});

This opens the application the user has defined as the one to make phone calls, and asks to call the number. Once the user hangs up, you get a success handler object back.

Web Activities have a few benefits:

  • They allow secure access to hardware – instead of asking the user to allow yet another app to use the camera you send the user to the application they already trust to do this.
  • They allow your app to be part of the user’s device experience – instead of building a camera interface you send the user to the one they already are familiar with to take photos
  • You allow apps to become an ecosystem on the device – instead of having each app do the same things, you allow them to specialise on doing one thing and one thing well
  • You keep the user in control – they can provide you with the photo from anywhere they want and they can store results from your app’s functionality where they want rather than in yet another database on their device

We’ve covered the subject here before in detail in the Introducing Web Activities post.

The simplest way to get started with Web Activities on a Firefox OS device (or simulator) or an Android phone running Firefox is to download the Firefox OS Boilerplate App and play with the activities and the code:

Firefox OS Boilerplate App

Web Activities are a simple way to enable the apps hosted on your servers to reach further into the hardware without acting on behalf of the user. Instead, you let users decide how to get the information you want and concentrate on what to do with the data once you have it instead.

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…


7 comments

  1. Ivan Dejanovic

    I just wanted to tell you that after your previous video this was put more faith in me when it comes to accessing hardware. It is much easier for me as a developer to create a webapp using web activities and when I need a picture for instance I just ask a user to provide it instead of accessing the hardware myself because user might already have a photo on his computer or phone and does not want me to use the camera. I wanted to ask you one thing regarding web activities and I apologize if this was asked and answered already. Is there a way for a user to pick a default app for certain action similar to android (use just once/use always)? It seems like a convenient thing to have if user always want to provide data to my app in the same way. Thanks in advance and keep up with good work.

    August 23rd, 2013 at 01:42

  2. Bingo Romnaia

    I have the same question as Ivan Dejanovic, if is posibile to receive an answer from you, thank you and good work.

    August 25th, 2013 at 10:01

  3. Robert Nyman [Editor]

    To my knowledge, right now there’s no way for the user to save a default action for a Web Activity. Over time, though, I can definitely see the need for this.

    August 26th, 2013 at 20:40

  4. felix

    Where is the video that is playable with Firefox out of the box?

    August 29th, 2013 at 14:07

    1. Lennie

      When you go to http://youtube.com/html5 you can tell YouTube you want to use HTML5-videos like WebM/VP8/Vorbis.

      If you click on the video and open it in a new window/tab you’ll then get the WebM/VP8/Vorbis video.

      August 31st, 2013 at 04:34

  5. skierpage

    Great!

    When will Web activities come to desktop Firefox? [Pick image] and [Compose mail] should already work on the desktop, and others make sense when you can nominate web apps that implement the functionality, much like you can already nominate “Use Gmail” as a mailto: handler in Preferences > Applications in desktop Firefox.

    September 11th, 2013 at 19:16

    1. Robert Nyman [Editor]

      Great question! I personally would really like to see that happen.

      September 12th, 2013 at 02:42

Comments are closed for this article.