Who am I?

  • Aerospace Engineering student at Carleton University
    • Yay rockets!
  • Software Developer
    • Most recently interned at Mozilla as a web developer
    • Worked on an offline version of support.mozilla.org
    • Worked with web based technologies in my spare time for the last 4 years
    • Many projects: http://shuhaowu.com
Press 'p' to get presenter's notes


Building offline web applications with cutting edge* HTML5 technologies

  • Javascript frameworks
  • localStorage
  • IndexedDB
  • Appcache
  • Open webapps (Hosted apps)
  • Example applications
a.k.a.: How many buzz words can I fit into one slide... "synergy"


  • Customers' demand
  • My webapp is already written with the web stack
  • Cross platform
  • Less bandwidth consumption
  • Less code to maintain than multiple native apps
  • Browsers are good enough
  • And because...

Javascript Framework

  • Solves a bunch of problems for you
    • View switching
    • Rendering
    • Code structure
  • Some choices: Angular, Backbone, Batman, Ember
  • If you don't want frameworks: imagine writing a complicated server side app with only CGI
  • Writing front end code kind of feels like writing backend code
  • Beware of performance with frameworks

Storing data (localStorage edition)

  • localStorage allows you to store things on the client side
  • Easy to work with
  • Pretty much like a big hash table
  • Cannot store complicated structures easily
        localStorage.setItem("key1", "value");

        // automatically converted into "1"
        localStorage.setItem("key2", 1);

        // Automatically converted to "{name: "value"}"
        localStroage.setItem("key3", {name: "value"});

        // alerts out "value"

localStorage Support

  • Standardized
  • Nearly universally supported
  • Only not supported in Opera Mobile

Storing data (IndexedDB edition)

  • IndexedDB stores highly structured data
  • Has "high performance" searching via indexing
  • Asynchronous all the way
  •           // the second argument is the version of the database
              var request = window.indexedDB.open("myDatabase", 1);
              request.onsuccess = function(event) { // Get to do things
                var db = request.result;
                // ...
              request.onerror = function(event) { // Something gone wrong :(
                alert("Error opening database!");
              request.onupgradeneeded = function(event) { // schema creation, before open
                var db = request.result;
                db.createObjectStore("myDatabase", {keyPath: "id"});

Storing data (IndexedDB edition)

        request.onsuccess = function(event) {
          var db = request.result;
          var objectStore = db.transaction(["myDatabase"], "readwrite")
          var req = objectStore.add({id: "user1", name: "John Smith"});
          req.onsuccess = function(event) { /* added successfully */ };
          req.onerror = function(event) { /* failed for some reason */ };

          req = objectStore.get("user1");
          req.onsuccess = function(event) { alert(req.result.name); };

          req = objectStore.delete("user1");
          req.onsuccess = function(event) { alert("deleted!"); };

IndexedDB Support

  • Working draft with in the W3C
  • IE 10+, Firefox 4+, Chrome 11+, Opera 15+
  • No support on Safari, iOS Safari, Android Browser (Boo!)
  • To work on Android, you need either Firefox for Android or Chrome for Android
  • More detailed status
  • Slightly related: get data from server using CORS

Allowing your app to run offline: Appcache

  • Appcache is a d******
    • Everyone should read this article if you want to work with appcache
  • Server side plugins to ease the pain a little:
  • Once done correctly, its properties works surprisingly well with pushState
  • Saves a lot of bandwidth
    • Should do even if you require online resources (API), if you intend your webapp to be used as a native app
    • App: ~400kb. API Call: 300 bytes / minute

Example appcache manifest file

        # version 69ff0c665d7dd3aa8e1d62e40e348726db6fe47b


        / /


Appcache Support

  • Working draft within the W3C
  • Supported almost universally (IE 10+, is the only catch)
  • Seriously. Implement this. Especially if your mobile webapp is suppose to replace the native app

Open Web Apps

  • Idea
  • Unlike other technologies talked about so far, this one is actually easy to use
  • "Install" button
  • Not really supported... yet :(

Open Web Apps

          "name": "Your app name",
          "description": "Description",
          "version": "0.1",
          "launch_path": "/",
          "icons": {
            "128": "/static/img/icon-128.png"
          "developer": {
            "name": "Shuhao Wu",
            "url": "https://shuhaowu.com"
          "appcache_path": "/manifest.appcache",

Open Web Apps: not really open yet...

  • Experimentally supported in Firefox
  • Chrome version is different: not the standard, somewhat similar
  • Standards people, standards: Implemented only in Firefox
Am I saying Chrome is the new IE, maybe.

Case Study: Next Otrain

Case Study: Sudbury Bus Tracker

Case Study: Mozilla Offline SUMO


  • You should definitely take your app offline
    • Especially if it is suppose to be a substitute for the native app on mobile
  • Be careful with some of these technologies: they may not be supported on a lot of devices
  • Many pain points but hopefully will be okay
  • Very cutting edge, not a lot of examples (StackOverflow questions) out there