Breaking Out The Edges of The Browser

19 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. David Calhoun

    Interesting timing considering the announcement today that Google moving away from Gears.

    Thanks for shedding light on this new and somewhat still esoteric subject :)

    I also recommend Brad Neuberg’s introduction to HTML5 video, which touches briefly on the subject of storage: http://developer.yahoo.com/yui/theater/video.php?v=neuberg-html5

  2. Matt Hobbs

    Great read, just curious about secure this is? Not that you would want to cache sensitive data. Is there a way of encrypting what is stored?

    Will add this to the ever expanding to-look-at list!

  3. Ryan Seddon

    Firefox throws an exception when the localStorage data is larger than 1024bytes so it’s a far cry from the 5mb limit in the spec.

    Native JSON is in most stable release browsers now: IE8, Safari 4 (need 4.0.3) and Chrome 3 so it has pretty wide support now.

  4. Ray Brown

    The new capabilities in HTML5 are spell-bounding and will really help push the transition from websites being internet-only to fully fledged desktop apps. Very exciting. Great read!

  5. Simon Hamp

    Remy, great article! I will definitely be making more use of this part of the HTML5 spec.

    I’ve been following Gears since its inception, but never used it because due to its lack of full support across platforms and browsers.

    When I found out a certain iPhone OS update brought offline storage to Mobile Safari (through HTML5) and that Google was making use of it in their mobile web apps (such as Gmail), it seemed like the nail in the coffin.

    When this really starts to grow (with wider browser support and consumer awareness), you can forget AIR.

  6. Sean Delaney

    I really enjoyed reading this article – it was put together nicely!

    I found it very useful with the example code snippets as I’ve never played about with these APIs before or put any other form of attention to them apart from knowing about their existence…

  7. Matthew Pennell

    @Remy: Any comment on the difference in memory management and performance between storing a ton of data in memory (as an object or array, for example) and using local/sessionStorage?

    I’m thinking for example of a Google Maps implementation where you need to manage a lot of locations/markers/data; in that instance, using the equivalent of a local database to store and retrieve the data sounds like a great solution, but only if it’s going to perform better than simply storing it all in a big array.

  8. Remy Sharp

    @RYAN SEDDON – cheers for pointing that out – I hadn’t spotted that the other browsers had JSON support baked in.

    @DEVON GOVETT – yep, Safari has Web Databases as well as Web Storage, but from my playing around, I can’t see any advantage database has over storage. Sure you can do complicated queries, but 99% of the time I have a key and just want to get the value out. Similar to the CouchDB model. Also Web Database is only available in Safari (possibly Chrome, I’ve not checked), whereas Web Storage is available in 3 of the big 4.

    @JOHANNES GORSET – cheers for pointing out that the DOM tab introspects the storage object. It seems a bit lame compared to Safari’s DB view, but I guess the data’s still the same!

    @MATTHEW PENNELL – I’ve not tested memory management or performance yet, so when I find time, I’ll have a play around.

  9. Devon Govett

    @REMY SHARP – Before Safari 4 no version of Safari supported Web Storage, but Safari 3.1+ have supported Web Databases, so sometimes you might need to combine solutions to get the widest possible browser support. Also, if you have written a backend in a language like PHP to store data in Mysql, and you want to port it to JavaScript to run client side and offline, it is certainly easier to do with web databases since you can use the same queries. Just a thought.

  10. Charles Lehner

    Great article, thank you!

    You may find PersistJS useful. It is a wrapper library for all the offline storage APIs (global/localStorage, Safari’s SQLite, Gears, Flash, and IE’s old userData), so it supports almost every browser. It’s like dojo storage, but standalone and with more backends.

    http://pablotron.org/software/persist-js/

  11. Jonathan Stark

    Remy is correct when he says that debugging can be a real PITA when you are using a manifest file. A technique I’ve found useful is to monitor your web server logs while running your app to see exactly what resources your browser is requesting.

    For example:

    1) ssh into your server

    2) cd to your log directory (prolly /var/log/httpd/ or /var/log/apache2/)

    3) Run: sudo tail -f access_log

    4) Reload your app in the browser; your request(s) should pop into the terminal.

    When you are done watching the log, press Control-C to quit the tail process.

    You can also inspect the ApplicationCache sqlite database manually using sqlite3 at the command prompt (with Safari on Mac, at least – not sure about others).

    More here if y’all are interested:
    http://building-iphone-apps.labs.oreilly.com/ch06.html

    Cheers!

Impress us

Be friendly / use Textile