Working offline with Cloud9 on Google Chrome

MAY 10, 2011

By Rik Arends, CTO of Ajax.org / Cloud9 IDE

This post is part of Who's at Google I/O, a series of guest blog posts written by developers who are appearing in the Developer Sandbox at Google I/O.

Cloud9 is an online IDE for JS, Python, PHP and Ruby development. By placing all your code in the cloud, you can access your code anywhere, anytime and on any device. But what if you’re not online?

Working with web applications offline has been a difficult problem to solve. Traditional web applications required all the logic for HTML generation and user interaction to be located on a remote server. The "go offline" feature in some of the earliest browsers was hardly more than caching static content and could not deal with much interactivity.

Since the advent of AJAX, many websites and apps have moved to using JavaScript heavily on the client side, providing a much richer and smoother user experience. Now the ability to run a web application in full offline mode is within reach.

Cloud9 IDE is one such application. Built from the ground up to have the user interface running in the browser, the server application provides Cloud9 with WebDAV for file I/O, and APIs for project provisioning and authentication. For a rich offline experience, we would need to make the WebDAV API somehow available offline.

The first step in Cloud9’s offline experience has been to implement the HTML5 offline manifest, also known as Application Cache, to make sure the application loads smoothly while offline. The next step is to provide offline workspace synchronization using the new API provided in Google Chrome for local file system I/O. The Chrome file system implementation, based on the current W3C working draft, allows web applications to have access to the device (through a sandboxed file system). So even if you are marooned on a distant planet and disconnected from the collective, you can still work on your code.

Getting access to the local file system is very easy. The API method to call is the obviously named webkitRequestFileSystem, which takes options to create either a temporary or permanent file system, and to define the size of the sandbox location. The difference between temporary and permanent is quite clear, with temporary acting only as a cache: the files may disappear when the browser needs to free up disk space. Once the file system has been successfully created, you can do all the operations you expect, such as creating, deleting, copying, and moving files and directories.

More information on the full HTML file system API can be found at HTML5Rocks, which includes a detailed entry on what types of file system operations you can achieve with the API.

We are showcasing this feature at Google I/O, and will release this feature later this month on http://c9.io. We are working on creating a nice integration with Google App Engine too, so you can develop and deploy entirely online.

Update 5/11: Corrected information about temporary files; removed paragraph about having to start the browser with a special flag.

Come see Cloud9 in the Developer Sandbox at Google I/O on May 10-11.

Rik Arends has been a developer for 15 years and now manages the development team behind Cloud9 IDE.

Posted by Scott Knaster, Editor