如何使用Flask构建离线Web应用程序?

Raf*_*car 5 python html5 flask cache-manifest html5-appcache

我正在为一个网站构建一个想法,该网站将为某些目的使用HTML5离线应用程序缓存.该网站将使用Python和Flask构建,这就是我的主要问题所在:我第一次使用这两个,所以我很难让清单文件按预期工作.

问题是我从清单文件中包含的静态文件中获取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
Run Code Online (Sandbox Code Playgroud)

错误在最后一行.

当appcache失败一次时,它会完全停止进程,并且脱机缓存不起作用.

这就是我的文件结构:

  • 砂箱
    • 离线应用
      • offline-app.py
      • 静态的
        • manifest.appcache
        • 的script.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)
Run Code Online (Sandbox Code Playgroud)

这是我在offline-app.html中的内容:

<!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>
Run Code Online (Sandbox Code Playgroud)

这是我的manifest.appcache文件:

CACHE MANIFEST
/style.css
/script.js
Run Code Online (Sandbox Code Playgroud)

我已经尝试过以我能想到的各种方式使用清单文件:

CACHE MANIFEST
/static/style.css
/static/script.js
Run Code Online (Sandbox Code Playgroud)

要么

CACHE MANIFEST
/offline-app/static/style.css
/offline-app/static/script.js
Run Code Online (Sandbox Code Playgroud)

这些都没有奏效.每次都返回相同的错误.

我确定这里的问题是服务器如何提供清单中列出的文件.我想这些文件可能是在错误的地方查找的.我应该将它们放在其他地方,或者我需要在缓存清单中有不同的东西,但我不知道是什么.我在网上找不到有关使用Flask的HTML5离线应用程序的任何内容.

有人能帮帮我吗?

Mig*_*uel 7

我原以为这个会起作用:

CACHE MANIFEST
/static/style.css
/static/script.js
Run Code Online (Sandbox Code Playgroud)

但无论如何,您不应该对静态文件的URL进行硬编码.最好将清单作为模板提供(移动到"templates"文件夹),以便您可以使用它url_for来生成静态文件的路径,如下所示:

CACHE MANIFEST
{{ url_for('static', filename='style.css') }}
{{ url_for('static', filename='script.js') }}
Run Code Online (Sandbox Code Playgroud)

然后在HTML模板中,您将获得对路由的引用,而不是静态文件:

<html manifest="{{ url_for('manifest') }}">
Run Code Online (Sandbox Code Playgroud)

最后,您将添加一个返回清单的新视图函数:

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
Run Code Online (Sandbox Code Playgroud)