Node.js/ExpressでHTML5オフライン・キャッシュを使う

まずHTML5のオフライン・キャッシュとはどのようなものかお見せします。

まず普通にオンラインの状態です。

こちらのページも普通に見ることができます。

次にオフラインにしてみます。もちろんGitHubを見ることはできません。

ところが先ほどのページは見ることができます。

JavaScriptを実行することもできます。

開発者ツールを見ると、 from cache と書かれています。

---

私は connect-cache-manifest モジュールを使いました。

まず package.json に connect-cache-manifest を追加します。

package.json

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.3.5",
    "connect-cache-manifest": "*",
    "jade": "*"
  }
}

モジュールをインストールします。

$ cd project
$ npm install

app.js を編集します。

app.js

...
var cacheManifest = require('connect-cache-manifest');
...
// cache-manifest
app.use(cacheManifest({
  manifestPath: '/application.manifest',
  files: [{
    dir: __dirname + '/public',
    prefix: '/'
  }],
  networks: ['*'],
  fallbacks: []
}));
...

view/layout.jade も編集します。

view/layout.jade

html(manifest='application.manifest')
...

これで、一度キャッシュされたら2回目以降はオフラインでもページを見ることができます。

iPadなどでも使えるので、上手に使えば面白いことができそうです。

---

ブログやってます：PAPA-tronix !