Dropbox. Have you heard of it? If not, a colleague Jason Wagner recently wrote "Have You Heard Of Dropbox?", which is a good introduction with gushing praise. Steve O'Grady also recently wrote "There's More to Dropbox Than Piracy", which is a good read.
OK. So I installed it. On my laptop and my iPod Touch. Tried a few files. Nice.
The iPod Touch / iPhone version of the app does all it's own rendering of the shared files as near as I can tell - that is, it renders them in the Dropbox app, rather than launching another app to view/edit the shared files. So I thought - does it handle HTML files? Let's try.
experiment 1 - simple HTML page
For the first experiment, I created an HTML file with some embedded styling and JavaScript.
Here's the HTML:
<div style="font-size:300%; font-face:Optima; text-align:center;">
<p>experiment-1:
<p><a href="javascript:alert('it works')">click me</a>
</div>
Note that I created and subsequently edited this file right from the Dropbox folder on my laptop.
Trying it on my iPod - it works! Here's the screen after pressing the "click me" link, showing the alert:
Next, I dropped my network connection, and tried again.
Woops. Turns out that the Dropbox iPhone app only downloads a file for offline viewing when you mark the file as a 'Favorite'. OK, easy to fix. Connect to the network, view the page, mark it as a Favorite, disconnect, try again - it works!
BTW, what an ugly "fail whale"!
experiment 2 - external JavaScript, CSS and image
That worked out ok, so let's try something a little more challenging. Basically the same test, only move the styling to a separate CSS file, move the JavaScript to a separate file, and reference a shared image.
Here's the HTML:
<link rel="stylesheet" href="experiment-2.css"> <script src="experiment-2.js"></script> <div> <p>experiment-2: <p><a href="javascript:clickHandler()">click me</a> <p><img src="experiment-2.jpg"> <p><i>"kittens"</i> from <a href="http://www.flickr.com/photos/mathias-erhart/2562106102/"> http://www.flickr.com/photos/mathias-erhart/2562106102/ </a> </div>
Here's the JavaScript:
function clickHandler() {
alert('it works');
}
Here's the CSS:
div {
font-size: 300%;
font-face: Optima;
text-align: center;
}
And here's what I get when I view the HTML file:
Woops. None of my referenced files were loaded. On a hunch, I decided to "Favorite" all the files. After doing that, it works!
You can just make out those adorable kittens behind the alert dialog. You'll have to load the page yourself to see them in all their adorable-ness.
experiment 3 - using localStorage
OK, time to get serious. Does this thing support localStorage?
Here's the HTML:
<div style="font-size:300%; font-face:Optima; text-align:center;">
<p>experiment-3:
<p>This page has been viewed by you <span id="times">???</span> times.
<div id="message" style="color:red" ></div>
</div
<script>
(function() {
var timesSpan = document.getElementById("times");
var messageDiv = document.getElementById("message");
function log(message) {
messageDiv.innerHTML += message + "<br>";
}
if (!this.localStorage) {
log("localStorage is not available!");
return;
}
var times = localStorage.getItem("times-run");
if (!times) times = "0";
times = parseInt(times);
times = times + 1;
timesSpan.innerHTML = times;
localStorage.setItem("times-run", "" + times);
})();
</script>
And here's the page when loaded, then reloaded a few times. It works!
Just a few experiments, whetting my appetite for more. I assume it must support SQL storage as well. What about app-cache? XHR to another shared file?
Where am I going with this? Well, seems to me like if could create a little "application" as a single HTML file - embedded style, JavaScript, data: URLs for images, etc - then you have a nice little way of deploying your application. Just leave it in your Dropbox folder, edit away, test on your device, rinse and repeat. Editing such a wad would be a bit painful. You could write the application as pieces, like in experiment-2, then use a pre-processor to stitch the bits together and copy to your Dropbox (or provide a link to it).
Seems like there are many aspects of deploying a little app in this way which would be much nicer than how you have to do this using Mobile Safari. Using Dropbox would be a bit of a low-fi experience in comparison, but might be easier to write and update.
All three experiments are available in my public Dropbox folder, which you can access via your browser:
