2013-06-27 12 views
5

HTML5オフラインアプリケーションキャッシュを特定の目的で使用するウェブサイトのアイデアを試作しています。このウェブサイトはPythonとFlaskで構築され、私の主な問題は次のようなものです。私はこれらの2つを初めて使っているので、マニフェストファイルを期待どおりに動作させるのは苦労しています。Flaskを使ってオフラインWebアプリケーションを構築するには?

問題は、マニフェストファイルに含まれる静的ファイルから404が取得されてしまうことです。マニフェスト自体は正しくダウンロードされているようですが、それが指すファイルはダウンロードされていません。これは、ページをロードするときにコンソールで吐き出されるものです。

Creating Application Cache with manifest http://127.0.0.1:5000/static/manifest.appcache offline-app:1 

Application Cache Checking event offline-app:1 

Application Cache Downloading event offline-app:1 

Application Cache Progress event (0 of 2) http://127.0.0.1:5000/style.css offline-app:1 

Application Cache Error event: Resource fetch failed (404) http://127.0.0.1:5000/style.css 

エラーは最後の行にあります。

appcacheが一度も失敗すると、プロセスは完全に停止し、オフラインキャッシュは機能しません。

  • サンドボックス
    • オフラインアプリ
      • offline-app.py
      • 静的
        • manifest.appcache
        • スクリプトを:

          は、これは私のファイルが構成されている方法です.js

        • style.cssに
      • テンプレート
        • オフラインapp.html

これはoffline-app.pyの内容です:

from flask import Flask, render_template 
app = Flask(__name__) 

@app.route('/offline-app') 
def offline_app(): 
    return render_template('offline-app.html') 

if __name__ == '__main__': 
    app.run(host='0.0.0.0', debug=True) 

これは私がオフラインapp.htmlにしたものである:私は、マニフェストファイルを持つ試みた

CACHE MANIFEST 
/style.css 
/script.js 

<!DOCTYPE html> 
<html manifest="{{ url_for('static', filename='manifest.appcache') }}"> 
<head> 
    <title>Offline App Sandbox - main page</title> 
</head> 
<body> 
<h1>Welcome to the main page for the Offline App Sandbox!</h1> 
<p>Some placeholder text</p> 
</body> 
</html> 

これは私のmanifest.appcacheファイルです私は考えることのできるすべての異なる方法で:

CACHE MANIFEST 
/static/style.css 
/static/script.js 

または

CACHE MANIFEST 
/offline-app/static/style.css 
/offline-app/static/script.js 

これらのどれも機能しませんでした。毎回同じエラーが返されました。

ここで問題となるのは、サーバーがマニフェストにリストされているファイルをどのように提供しているかです。これらのファイルは間違った場所で検索されている可能性があります。私はそれらをどこか別の場所に配置するか、キャッシュマニフェストでは別のものが必要ですが、私は何が分かりません。FlaskでHTML5オフラインアプリケーションを使用することについてオンラインで何かを見つけることができませんでした。

誰も私を助けることができますか?

答えて

7

私はこの1つが仕事だろうと思っているだろう:

CACHE MANIFEST 
/static/style.css 
/static/script.js 
しかし、いずれにしても、あなたはあなたの静的ファイルのURLをハードコーディングべきではありません。それは、あなたが静的ファイルへのパスを生成する url_forを使用できるように(「テンプレート」フォルダに移動)を鋳型としてマニフェストを提供するために、このようなものがベストです:

CACHE MANIFEST 
{{ url_for('static', filename='style.css') }} 
{{ url_for('static', filename='script.js') }} 

その後、あなたのHTMLテンプレートあなたに代わりに、静的ファイルのルートを参照する必要があります:

<html manifest="{{ url_for('manifest') }}"> 

をそして最後に、あなたはマニフェストを返す新しいビュー機能を追加します。

from flask import make_response 

@app.route('/manifest') 
def manifest(): 
    res = make_response(render_template('manifest.appcache'), 200) 
    res.headers["Content-Type"] = "text/cache-manifest" 
    return res 
+0

は、それがために変更します私のためにそれを解決したテンプレートとして役立った。ありがとうございました! これを将来使用する人には、Miguelの答えに欠けている小さなものが2つしかありませんでした。あなたのファイルにmake_responseへのインポートを追加する必要があります(私の.pyは "Flask import Flask、render_template、make_response" )、ビュー関数では、レスポンスを返す "Content-Type"ヘッダーが設定されている場所の下に行を挿入します( "return res"のように)。 –

+1

優秀!あなたの訂正で私の例を更新しました。 – Miguel

関連する問題