Connecting Web Apps with Web Intents

Thursday, August 04, 2011

In today’s browser ecosystem, web apps are completely disconnected or require the use of complicated APIs in order to make use of a third-party service, e.g., posting a comment to Twitter from your custom publishing domain. What if we could give sites the ability to leverage these services without any knowledge of the chosen service, except that it provides some set of predefined functionality?

Android OS addresses this problem with Intents, a facility for late run-time binding between components in the same or different applications. In the Intents system, the client application requests a generic action, e.g. share, and specifies the data to pass to the selected service application. The user is given a list of applications which have registered that they can handle the requested intent. The user-selected application is created in a new context and passed the data sent from the client, the format of which is predefined for each specific intent type.

We are hard at work designing an analogous system for the web: Web Intents. This web platform API will provide the same benefits of Android Intents, but better suited for web applications. When designing the system, we have first and foremost been interested in creating a simple, easy-to-use API. With Web Intents, you will be able to connect your web app to a service with as little as two lines of code! Chrome will perform the heavy lifting for you. As with Android, Web Intents documents an initial set of intent actions (edit, view, share, etc.) that likely cover the majority of use cases on the web today; however, as the web grows and sites provide more functionality, new intent actions will be added by services that document these intents, some more popular than others. To foster development and use of intents, we plan to create a site to browse existing intents and add new intents.

Consider an online photo storage site run by a cash-strapped startup: the developers don’t have the resources to add image editing abilities to their app, but they feel the site won’t be a hit without it. The Web Intent system will make it easy for them to offer this with little effort.

var intent = new Intent(Intent.EDIT, ‘image/png’, getImageDataURI());
window.navigator.startActivity(intent, loadEditedImage);

// This callback will be called when the service replies with the edited
// image data.
function loadEditedImage(data) {
var image = document.getElementById(‘image’);
setImageData(image, data);
}


When the user visits her favorite memegen service, the site will request registration to handle the EDIT intent for files of type ‘image/*’ using the following declaration:


<intent
action=”http://webintents.org/edit”
type=”image/*”
/>


When the user initiates the EDIT action, this service is presented to the user, along with other registered image editors. Once the user selects Meme Generator, the referenced site is opened in a new context and is able to load the image data from the intent payload:

var intent = window.intent;
memeImg.src = intent.data;

memegenForm.onsubmit = function() {
// Transform the image - meme it.
addMemeTaglines(memeImg, memeTopText, memeBottomText);

// Send the generated meme back to the client.
intent.postResult(getImageData(memeImg));
};


Once postResult() is called, the Meme Generator context is closed and the output data is sent back to the client via the callback passed to startActivity().

Mozilla is also actively exploring this problem space. In fact we’re working closely with Mozilla engineers to unify our two proposals into one simple, useful API. Visit the examples page to try out the feature in any current browser. To explore using the API in your site, check out out the JavaScript shim, which provides an implementation of the API for browsers that have not implemented this feature. We are rapidly prototyping this feature, so check back soon for an announcement when Web Intents is available behind a flag in Chrome.

Post a Comment