Single-Page Cached HTML5 Application Bootstrapping

Bootstrapper demo: http://www.chrisrussell.net/html5/bootstrapper/
You can follow links in the demo page to the sources on GitHub if you’re interested.

The link above will drop you into the root directory of the demo HTML5 app. I’ve intentionally disabled the redirect to the app HTML document so that you can easily browse the deployed build structure of the client application.

The demo comprises the entire deployed app and demonstrates a more-or-less generic HTML5 app bootstrap mechanism.

  • use of application cache manifest
  • monitoring of browser application cache status events
  • determination of true online status via fallback to AJAX request for a non-cached JSON resource.

The main routine looks like this:

// Generated by CoffeeScript 1.4.0
(function() {
  var namespaceApp, namespaceEncapsule;

  namespaceEncapsule = (typeof Encapsule !== "undefined" && Encapsule !== null) && Encapsule || (this.Encapsule = {});

  namespaceApp = (Encapsule.app != null) && Encapsule.app || (this.Encapsule.app = {});

  this.Encapsule.app.boot = {
    onBootstrapComplete: function(bootstrapperStatus_) {
      return Console.message("onBootstrapperComplete with status=" + bootstrapperStatus_);
    }
  };

  $(function() {
    try {
      Encapsule.core.bootstrapper.run(Encapsule.app.boot);
    } catch (exception) {
      Console.messageError(exception);
    }
    return this;
  });

}).call(this);

Instantiate/invoke your main application logic in onBootstrapComplete and leverage the information stored in Encapsule.app.boot namespace to influence the boot of your main application logic. A common example would be using the bootstrapper’s exit state to determine how the app’s local storage will be initialized.

Once the demo application has been “installed” in your local application cache, here a couple things to try:

  • Refresh the page while online and you’ll see that the bootstrapper understands its booting from cache.
  • Go offline and refresh the page and you’ll see that the bootstrapper understands it’s booting from cache AND may potentially be out-of-date (main app logic may leverage this information later if connectivity to the origin server is re-established).
  • Clear your application cache and refresh the page. This will “re-install” the application to your application cache. (chrome://appcache-internals allows you to do this conveniently on Chrome)

There are additionally other bootstrapper exit states you’re unlikely to encounter unless my server crashes (unlikely) or you catch me in the middle of updating the demo sources.

I’ve tried this in Chrome, Safari, Firefox and several WebKit browers on Linux (e.g. Chromium). IE10 may work? I haven’t tried it.

Ha – it just booted on my old iPhone 3GS in mobile Safari. Cool 🙂

Enjoy.

Advertisements

About Chris Russell

http://www.chrisrussell.net
This entry was posted in Internet, Software and tagged , , , , . Bookmark the permalink.

2 Responses to Single-Page Cached HTML5 Application Bootstrapping

  1. Pingback: Building Up on Top of the HTML5 Bootstrapper | blog.chrisrussell.net

  2. I’ve recently been reviewing this code written in February in order to fix bugs. If you’re interested in this subject search this blog for later articles on HTML 5 application cache. There’s updated information.

Comment on this article

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s