Communication between a web-based application and a desktop application

New functionality to be added to a web-based application and a desktop application is expressed as declarative and/or procedural code that a conventional rendering engine of the web-based application and the desktop application can use to directly update the state of the applications. Users need not update client-side components—such as the desktop application and/or any plug-ins used by the browser hosting the web-based application—to take advantage of new types of functionality.

BACKGROUND

The present invention generally relates to the field of web-based applications, and more specifically, to communication between a web-based application and a desktop application.

In some cases, the creators of a web-based application may also wish to provide users with a desktop application for viewing part or all of the information from the web-based application. For example, a particular organization might provide users with a web-based social networking application using their web application servers. Additionally, the company might provide users with a desktop application—i.e., an application written using an API of the underlying operating system that does not run within a web browser—that provides functionality specifically tailored to a specific aspect of the social networking application, such as chat. Given that a user may concurrently execute both the web-based application and the desktop application, it is desirable for changes in the state of the social networking application—such as substantive changes to the user interface layout—to be reflected in the desktop application, and vice-versa.

Using conventional communication techniques, however, any time that the provider of the web-based application wishes to add a new type of functionality, such as support for a new type of user interface change, the provider must update both the web-based application and the desktop application so that both can properly interpret the meaning of, and implement, the new functionality. For example, if the provider wishes to allow the web-based application to send a message to the desktop application that instructs the desktop application to make a particular user interface change, the web-based application must be updated to send the message and the desktop application must be updated to accept, interpret, and implement the message. Such updates may be inconvenient for a user who uses the social networking application, leading the user not to update the applications, with the result that the applications become outdated, not supporting the new functionality.

SUMMARY

Embodiments of the invention express new functionality to be added to a web-based application and a desktop application as declarative and/or procedural code that a conventional rendering engine of the web-based application and the desktop application can use to directly update the state of the applications. Thus, the web-based application need not have knowledge of some extrinsic meaning of an update message sent between the web-based application and the desktop application; rather, the meaning of the communication is implicit in the code itself. Accordingly, users need not update client-side components—such as the desktop application and/or any plug-ins used by the browser hosting the web-based application—to take advantage of the new functionality.

DETAILED DESCRIPTION

System Architecture

FIG. 1is a high-level block diagram of a computing environment according to one embodiment.FIG. 1illustrates a server120and a client device100connected by a network170. A user uses the client device100to interact with the server120, the server120providing a web-based application113that executes within a browser111of the client. The client device100, or another separate device, additionally executes a desktop application115that is kept in sync with the web-based application113. These components are now described in more detail.

The client device100is a computing device that executes client software, e.g., a browser111or other application, for performing actions such as interacting with social networking services or other applications provided by the server120. The client device100might be, for example, a desktop computer; an ultrabook or other laptop computer; a smart phone or tablet computer using the IOS, ANDROID, or WINDOWS PHONE operating systems; or a personal digital assistant, for example.

The client device100has a browser111that hosts a web-based application113provided by the server120.

The browser111comprises a rendering engine112that interprets or otherwise processes declarative and/or procedural code (e.g., HTML and JavaScript) that make up the web-based application113, generating a user interface that the user can use to interact with the web-based application, as well as reacting to events triggered by the user, the server120, or others. For example, the user interface may be generated by a rendering engine112such as WEBKIT based on HTML code provided by the server120in response to a user using the browser111to visit a URL associated the web-based application113.

In some embodiments in which the browser111and a desktop application115both execute on the same client100, interactions between the browser and the desktop application are carried out using a plug-in118of the browser111. The plug-in118is software that conforms to a plug-in API of the browser111that permits it to interact with the browser, and may be written using any of a variety of different programming languages or technologies. The plug-in118is provided by the same organization that provides the web-based application113via the server120and that provides the desktop application115. Unlike the web-based application113, the plug-in118does not run within the browser111, but rather is effectively part of the browser, and hence the plug-in is not subject to the same security restrictions that the browser imposes on the web-based application. Thus, the plug-in118is well-suited to handle the interprocess communications that may be used by the web-based application113to communicate with the desktop application115.

Additionally, the plug-in118can provide the web-based application113with information about the status of the desktop application115, such as whether the desktop application is running, or what user is logged in to the desktop application. The web-based application113can use such status information to customize its own appearance or actions. For example, the web-based application113can enable or disable user interface elements that refer to the desktop application based on whether the desktop application115is running (e.g., graying out or otherwise disabling certain user interface elements if the desktop application is not running). As another example, the web-based application113can show or hide certain communications based on whether the desktop application115is running and hence will handle the communications (e.g., suppressing popup windows for chat messages that will instead be handled by the running desktop application).

In one embodiment, the client device100further comprises the desktop application115, which provides an alternative or complementary view of the same underlying data displayed by the web-based application113. For example, in one embodiment both the web-based application113and the desktop application115display information associated with a user's account on a social networking system, such as FACEBOOK. For instance, the web-based application113might display a typical website-oriented view of the social networking system functionality as a whole, while the desktop application115might provide an alternate view, such as a view of the user's current chat sessions only.

The desktop application115is a standalone application not hosted by the browser111. For example, the desktop application115may be written using a user interface API provided by the underlying operating system, such as the user interface API for MICROSOFT WINDOWS. In one embodiment, some or all of the user interface117is generated using a rendering engine116that takes as input the same type of declarative and/or procedural code (e.g., HTML and JavaScript) as the rendering engine112used to produce the user interface114for the web-based application113. In some embodiments, the desktop application115defines a number of interfaces for use by the procedural code that it loads. For example, the desktop application115may define a window management interface that JavaScript loaded by the desktop application can use to manipulate the various windows of the desktop application, such as docking them.

In one embodiment, the desktop application115loads the declarative and/or procedural code only from some set of fixed URLs (e.g., defining default user interfaces), rather than allowing navigation to arbitrary URLs.

In other embodiments, the desktop application115need not execute on the client device100, but rather may additionally and/or alternatively execute on another device accessible over the network170. For example, the desktop application115might execute on a particular user's home computer, while the web-based application113might execute on the user's work computer (client device100).

The server120provides at least the web-based application113to the client(s)100and, in some embodiments, may help to keep the web-based application113and the desktop application115in sync.

Different events may take place that necessitate keeping the desktop application115in sync with the web-based application113. For example, when an event occurs within the web-based application113, the web-based application (e.g., using its plug-in118) will send state data corresponding to a state that reflects the event to the desktop application115. The desktop application115will then apply its rendering engine116to the received state data to update the user interface117.

As one example of an event necessitating keeping the desktop application115in sync with the web-based application, the user using the web-based application113may perform a user interface action that significantly changes the user interface of the web-based application113, and this change may need to be reflected in the user interface117of the desktop application115. For example, the web-based application113might include a particular tab or other user interface region that the user can move to user interface117of the desktop application115. For instance, the web-based application113might include a chat message tab for displaying and specifying the user's chat sessions within the web-based application, and the user might specify via a user interface of the web-based application that the chat message tab should instead be displayed within a desktop application115oriented to chat. Accordingly, logic within the web-based application (e.g., JavaScript code) will remove the chat message tab from the user interface of the web-based application113and will communicate to the desktop application115state data causing the chat message tab to be displayed within its user interface, e.g., HTML representing the chat message tab's appearance and location. The rendering engine116of the desktop application115will accordingly render that state data, thereby supplementing the existing user interface117with the chat message tab.

Similarly, the web-based application113and the desktop application115might need to be kept in sync following an action performed by some other user that provides additional data that may be displayed within the web-based application113. For instance, referring to the earlier example, another user may send a chat message that should appear in the chat message tab displayed within the desktop application115. The data corresponding to this chat message would arrive at the server120, after which the browser111would obtain it (e.g., in response to polling the server120for new information to refresh the current page, or in response to the server affirmatively pushing the information to the client100). Logic in the web-based application113would then provide the corresponding update to the desktop application (e.g., using the plug-in118). The web-based application113may provide the desktop application115with just the new data (e.g., the new chat message), or with a larger portion of the user interface state (e.g., all the HTML and JavaScript used to render the chat message tab and its messages, or to render the entire user interface of the web-based application).

In one embodiment, the browser111performs a security check to determine the source of the web-based application113before it passes a state change from the web-based application to the desktop application115. For example, when the server120provides information about newly-received chat messages to the web-based application113, the web-based application113may delegate the state change information corresponding to the newly-received chat messages to the plug-in118for conveyance to the desktop application115. In this case, the plug-in118may check the source from which the information was received, such as the source IP address or the domain name of the source URL from which the web-based application113was loaded, and verify that it corresponds to the proper server120. For example, the plug-in may require that the URL of the web-based application be from a particular domain, or one or more particular sub-domains of that domain. This prevents a malicious server injecting unwanted content into the desktop application115, such as a rogue web-based application113attempting to inject spurious chat messages into a desktop application oriented towards chat, for example.

Note that using these techniques, a new type of user interface action (e.g., moving the chat message tab between applications113,115) or other action can be added without the client100needing to be updated. That is, because the web-based application113and the state data that constitutes the user interface117of the desktop application115are both provided by the server120and are made up of code (e.g., HTML and JavaScript) that can be interpreted by the rendering engines112,116without any knowledge extrinsic to the code itself, the server can introduce new functionality simply by sending new web-based applications to the client(s)100, and the existing rendering engines of the client(s) can implement it.

It is appreciated that although the web-based application113has been described as notifying the desktop application115of changes, the process could work in the other direction, as well, with the desktop application notifying the web-based application of changes via corresponding state data, which the rendering engine112of the browser112would then render to update the user interface of the web-based application.

Process for Inter-Application Communication

FIG. 2illustrates interactions of a browser111, a desktop application115, and a server120when keeping the desktop application in sync with a web-based application113running in the browser, according to one embodiment.

Initially, the server120provides205the web-based application113to the client100. That is, the server120provides205the declarative and/or procedural code (e.g., HTML and JavaScript) that, when interpreted by the browser111, constitutes the web-based application113. Accordingly, the browser111receives the code, interprets it, and renders210the web-based application113as a result of the interpretation. For example, the browser's rendering engine112may lay out the user interface of the web-based application113based on received HTML code, and may respond to events in that user interface, or take other more complex actions, based upon received JavaScript code.

The browser111may then run211the desktop application115if it is not running already. In one embodiment, for example, the web-based application113includes procedural code that causes the desktop application115to begin execution (e.g., JavaScript calls to the plug-in118, which in turn runs the desktop application). The browser111may cause the desktop application115to run in response to the web-based application113itself beginning to run, or in response to some asynchronous event occurring within the web-based application, such as the user taking an action that requires the desktop application. In some embodiments, the desktop application may automatically be run at system startup or user login, or the user may manually run the application.

At some point an event occurs within the web-based application113that causes a change that requires the desktop application115to be synchronized with the web-based application. As noted above, examples of such events include the user making a particular substantive change to the user interface that should be reflected in the desktop application115(e.g., requesting that a given panel of the user interface be displayed in the desktop application), or a new message arriving and being displayed within the web-based application113.

In response, the web-based application113additionally updates220itself as needed based on the event, such as updating the user interface of the web-based application in accordance with the event.

The browser111may optionally check that the source of any information provided by a server (e.g., a new chat message) came from the expected server120, as described above. For example, the plug-in118of the browser111may verify the IP address or source domain name, refraining from providing a state update to the desktop application115if verification fails.

To keep the desktop application113in sync with the web-based application113, the web-based application provides235—e.g., via the plug-in118—an update to the state of the desktop application115. As described earlier, the state update is in the form of declarative and/or procedural code that is interpretable by the standard rendering engine116of the desktop application, as opposed to particular commands or codes with a meaning specific to the web-based application113and/or the desktop application115. For example, in one embodiment the state update includes the HTML and JavaScript code that define the user interface117.

The desktop application115renders the state update, incorporating it into the user interface117. For example, HTML/JavaScript code of the state update could supplement or replace HTML/JavaScript code defining the state of the desktop application115prior to receipt of the state update.