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

我正在为一个网站设计一个原型，该网站将使用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失败一次时，它会完全停止进程，脱机缓存也不会工作。

这就是我的文件的结构：

沙箱
- 脱机应用程序
  - 脱机应用.py
  - 静态的
    - manifest.appcache
    - script.js
    - 样式.css
  - 模板
    - offline-app.html

这是离线应用程序的内容。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)

这就是我在离线应用程序.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>

这是我的清单。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离线应用程序的信息。

有人能帮我吗？

我本以为这个会起作用：

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

相关内容

最新更新

热门标签：