Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

スクリーンショット 2013-08-22 10.52.24.png

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

スクリーンショット 2013-08-22 10.51.50.png

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

スクリーンショット 2013-08-22 10.52.39.png

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

スクリーンショット 2013-08-22 10.52.54.png

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

スクリーンショット 2013-08-22 10.53.11.png

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

スクリーンショット 2013-08-22 11.05.29.png


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

まず package.jsonconnect-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 !

Feel-Physics
今はHoloLensのアプリを開発しており、技術記事はすべてブログ( http://weed.nagoya )に書いています。以前はSwift、OpenCV+Python、JavaScript、Objective-Cを書いていました。
http://feel-physics.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away