Jak zbudować aplikację internetową w trybie offline za pomocą kolby?

Mam prototypowanie pomysłu na witrynę internetową, która będzie używać pamięci podręcznej aplikacji HTML5 w trybie offline do pewnych celów. Strona zostanie zbudowana za pomocą Pythona i Flask i stąd rodzi się mój główny problem: pracuję z tymi dwoma po raz pierwszy, więc mam problem z uruchomieniem pliku manifestu zgodnie z oczekiwaniami.Jak zbudować aplikację internetową w trybie offline za pomocą kolby?

Problem polega na tym, że otrzymuję pliki 404 ze statycznych plików zawartych w pliku manifestu. Sam manifest wydaje się być pobrany poprawnie, ale pliki, na które wskazuje, nie są. To jest wypluwane w konsoli podczas ładowania strony:

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

Błąd znajduje się w ostatnim wierszu.

Gdy appcache ulegnie awarii nawet jeden raz, całkowicie zatrzymuje proces, a pamięć podręczna trybu offline nie działa.

ten sposób moje pliki są zorganizowane:

piaskownicy
- nieaktywny aplikacji
  - offline-app.py
  - statycznego
    - manifest.appcache
    - skrypt .js
    - style.css
  - szablony
    - nieaktywny-app.html

To jest treść 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)

To jest to, co mam w off-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>

To jest mój manifest.appcache file:

CACHE MANIFEST 
/style.css 
/script.js

Próbowałem o pliku manifestu na wszystkie sposoby, które mogłem wymyślić:

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

lub

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

Żadna z nich nie zadziałała. Ten sam błąd został zwrócony za każdym razem.

Jestem pewien, że problemem jest to, w jaki sposób serwer obsługuje pliki wymienione w manifeście. Te pliki prawdopodobnie znajdują się w niewłaściwym miejscu, jak sądzę. Powinienem je umieścić gdzieś indziej lub potrzebuję czegoś innego w manifeście pamięci podręcznej, ale nie mam pojęcia co.Nie mogłem znaleźć niczego online na temat aplikacji offline HTML5 z Flask.

Czy ktoś może mi pomóc?

Źródło

2013-06-27 Rafael Alencar

myślałem że ten będzie działać:

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

Ale w każdym przypadku, nie należy zakodować adresy URL dla statycznych plików. To najlepiej służyć manifest jako szablon (przeniesiono do katalogu „templates”), dzięki czemu można używać url_for wygenerować ścieżkę do plików statycznych, coś jak to:

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

Następnie w szablonie html miałyby odniesienie do trasy zamiast statycznego pliku:

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

i wreszcie, należy dodać nową funkcję widoku, który zwraca manifeście:

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

Źródło

2013-06-27 22:19:10 Miguel

Zmiana to być służył jako szablon rozwiązany dla mnie. Dziękuję Ci! Dla każdego, że będzie korzystać z tego w przyszłości, były tylko dwa małe rzeczy brakuje z odpowiedzią Miguel: trzeba dodać import do make_response w pliku (mój .py ma teraz „z Kolby importowej kolbie renderowanie_szablonu, make_response”) oraz w funkcji widoku wstawić linię poniżej, gdzie „Content-Type” nagłówek jest ustawiony, że zwraca odpowiedź (jak w „Res zwrotny”). –

Doskonała! I zostały zaktualizowane moim przykładem ze swoimi poprawkami. – Miguel

Jak zbudować aplikację internetową w trybie offline za pomocą kolby?

Odpowiedz

Powiązane problemy