Question

我正在为一个网站制作一个想法，该网站将为某些目的使用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

错误在最后一行。

当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)

这是我在 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>

这是我的 manifest.appcache 文件：

CACHE MANIFEST
/style.css
/script.js

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

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

或

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

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

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

有人能帮助我吗？

Answer 1

我原本以为这个会起作用：

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

但无论如何，您不应该对静态文件的URL进行硬编码。最好将清单作为模板提供（移动到“templates”文件夹），以便您可以使用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

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

1 个答案: