Local Server

Lets app cache and serve all its resources locally (tutorial).
Controlled by your JavaScript, not the user's browser.
Browser will always serve these, unless the enabled = false.
In ManagedResourceStore gears keeps these files uptodate with server.

Write a manifest.json that lists files you want cached:

{
  "betaManifestVersion": 1,
  "version": "1.0",
  "entries": [
      { "url": "go_offline.html"},
      { "url": "go_offline.js"},
      { "url": "gears_init.js"}
    ]
}

Your HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript" src="go_offline.js"></script>

<title>Enable Offline Usage</title>
<style type="text/css">
<!--
.style1 {
        color: #003399;
        font-style: italic;
        font-weight: bold;
        font-size: large;
}
.style3 {
        color: #009933;
        font-weight: bold;
        font-style: italic;
}
-->
</style>
</head>

<body onload="init()">
<h2>Getting offline-enabled documents with Gears </h2>
<p>&nbsp;</p>
<div>
  <p class="style1">Status Message: <span id="textOut" class="style3"></span></p>
</div>


<p><strong>Q:</strong> I want to see these documents when I'm not online! What must I do?<br />
<strong>A:</strong> <a href="http://gears.google.com/">Install Gears</a> on your computer and then click &quot;Capture&quot; to store the documents to your computer. You can then access the URLs without a network connection. </p>
<p>
  <button onclick="createStore()" > Capture </button>
 </p>


<p><strong>Q:</strong> I want to remove my offline access to these documents. What must I do?<br />
<strong>A: </strong>Click &quot;Erase&quot; below to removed the &quot;captured&quot; documents from your computer.  The documents will no longer be available without a network connection. </p>
<p>
  <button onclick="removeStore()" > Erase </button>
</p>
</body>
</html>

The code:

var STORE_NAME = "my_offline_docset";

// Change this to set the URL of tha manifest file, which describe which
// URLs to capture. It can be relative to the current page, or an
// absolute URL.
var MANIFEST_FILENAME = "manifest.json";

var localServer;
var store;

// Called onload to initialize local server and store variables
function init() {
  if (!window.google || !google.gears) {
    textOut("NOTE:  You must install Gears first.");
  } else {
    localServer = google.gears.factory.create("beta.localserver");
    store = localServer.createManagedStore(STORE_NAME);
    textOut("Yeay, Gears is already installed.");
  }
}

// Create the managed resource store
function createStore() {
  if (!window.google || !google.gears) {
    alert("You must install Gears first.");
    return;
  }

  store.manifestUrl = MANIFEST_FILENAME;
  store.checkForUpdate();

  var timerId = window.setInterval(function() {
    // When the currentVersion property has a value, all of the resources
    // listed in the manifest file for that version are captured. There is
    // an open bug to surface this state change as an event.
    if (store.currentVersion) {
      window.clearInterval(timerId);
      textOut("The documents are now available offline.\n" + 
              "With your browser offline, load the document at " +
              "its normal online URL to see the locally stored " +
                                "version. The version stored is: " + 
              store.currentVersion);
    } else if (store.updateStatus == 3) {
      textOut("Error: " + store.lastErrorMessage);
    }
  }, 500);  
}

// Remove the managed resource store.
function removeStore() {
  if (!window.google || !google.gears) {
    alert("You must install Gears first.");
    return;
  }

  localServer.removeManagedStore(STORE_NAME);
  textOut("Done. The local store has been removed." +
          "You will now see online versions of the documents.");
}

// Utility function to output some status text.
function textOut(s) {
 var elm = document.getElementById("textOut");
  while (elm.firstChild) {
    elm.removeChild(elm.firstChild);
  } 
  elm.appendChild(document.createTextNode(s));
}