When it’s ready.

出来るまで出来ない

FlaskでHTMLのオフラインキャッシュを使う

python flask html5

Flaskを使ってキャシュさせる方法
イメージが何百枚も有るようなWebアプリでいちいちDLさせたくないのでキャッシュを使うようにしてしてみた。マニフェストを配信する必要がある。

マニフェストファイルのmime-typeは、’text/cache-manifest'で返せばいいらしい。
Flaskでの、mimeの変更の仕方は、render_templateにmimetype='text/cache-manifest'を渡している。

ファイルの構成

ソース

main.py

#!/usr/bin/env python
# coding:utf-8

from flask import Flask, render_template

app = Flask(__name__)
app.debug = True

@app.route('/')
def render_html():
  return render_template('top.html', p = {'title':'ManifestTest'})

@app.route('/manifest')
def getManifest():
  return render_template('cache_filelist.mfst', mimetype='text/cache-manifest')

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=9090)

templates/top.html

<!DOCTYPE>
<html manifest='manifest'>
  <head>
    <title>{{p.title}}</title> 
    <script type="text/javascript" src="/static/js/jquery-1.4.2.js"></script> 
    <script type="text/javascript"> 
      $(function(){            
          $('<img>', {src:'/static/img/t1.png'}).appendTo($('body')).click(chgImg);                 
      });

      var imgID = 1;

      function chgImg(){
        if (imgID < 11){
          imgID = imgID + 1;
        }else{
          imgID = 1;}
        $('img').attr({src:'/static/img/t'+imgID+'.png'})                                           
      }

    </script> 
  </head>
  <body>
  </body>
</html>

templates/cache_filelist.mfest

CACHE MANIFEST

CACHE:
/static/img/
*

NETWORK:


オフラインでも使えるようになったけど、そんなに劇的に速くならなかった・・・orz