読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Advent Calendar 7 - appcacheでアプリケーションキャッシュ

Meteor

Meteorでアプリケーションキャッシュを有効にする方法は簡単です。

meteor add appcache

ピリオド。
これでマニフェストを自動生成してくれます。マニフェストはサーバーを再起動する度に再生成されます。
ウェブアプリ(クライアント)はマニフェストが更新されると、(当然新バージョンをロードし)、キャッシュのロード後、ウェブアプリを自動的に再起動してくれます。なので、アップデートの際のクライアントとサーバーの不整合も最小限で防げます。

記事がこれだけでは手抜き過ぎなのでもう少し足します。

最新用キャッシュのロードは通常のウェブサイトのロードと比較して時間が掛かります。(なんででしょう？)
なので、ロード中であることをユーザーに明示するのが親切です。
Meteorはサーバーと密に通信するフレームワークなので、ついでに通信状態も明示するようにしましょう。
以下の例ではbootstrapも使ったので、

meteor add bootstrap

を実行しておきます。

<body>
  ...
  {{> server-status}}
  ...
</body>

<template name="server-status">
    {{#unless status.connected}}
    <span class="label label-warning">{{status.status}}</span>
    {{/unless}}
    {{#if loading}}
    <span class="label label-warning">Loading new version...{{loaded}}/{{total}}</span>
    {{/if}}
</template>

Template['server-status'].status = -> Meteor.status()
Template['server-status'].loading = -> Session.equals 'applicationCacheStatus', 3
Template['server-status'].loaded = -> Session.get 'applicationCacheLoaded'
Template['server-status'].total = -> Session.get 'applicationCacheTotal'
if applicationCache?
    for e in ['checking', 'noupdate', 'downloading', 'progress', 'cached', 'updateready', 'obsolete', 'error']
        applicationCache.addEventListener e, (->
            Session.set 'applicationCacheStatus', applicationCache.status
        ), false
    applicationCache.addEventListener 'progress', ((event) ->
        Session.set 'applicationCacheLoaded', event.loaded
        Session.set 'applicationCacheTotal', event.total
    ), false