Как создать автономное веб-приложение с помощью Flask?

Я создаю прототип веб-сайта, который будет использовать кеш автономного приложения 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 дает сбой даже один раз, он полностью останавливает процесс, и автономный кеш не работает.

Вот как устроены мои файлы:

  • sandbox
    • offline-app
      • offline-app.py
      • static
        • manifest.appcache
        • script.js
        • стиль.css
      • templates
        • offline-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

or

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

Ни один из них не работал. Каждый раз возвращалась одна и та же ошибка.

Я уверен, что проблема здесь в том, как сервер обслуживает файлы, перечисленные в манифесте. Наверное, эти файлы ищут не в том месте. Я либо должен разместить их где-то еще, либо мне нужно что-то другое в манифесте кеша, но я понятия не имею, что. Я не смог найти ничего в Интернете об автономных приложениях HTML5 с Flask.

Кто-нибудь может мне помочь?


python flask html cache-manifest html5-appcache
person Rafael Alencar    schedule 27.06.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Я бы подумал, что это сработает:

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
person Miguel    schedule 27.06.2013
comment
Изменение его для использования в качестве шаблона решило это для меня. Спасибо! Для тех, кто будет использовать это в будущем, в ответе Мигеля не хватало только двух небольших вещей: вам нужно добавить импорт в make_response в свой файл (мой .py теперь имеет импорт из flask Flask, render_template, make_response) и в Функция просмотра вставляет строку ниже, где установлен заголовок Content-Type, который возвращает ответ (как в return res). - person Rafael Alencar; 28.06.2013