Come costruire un'applicazione web offline usando Flask?

Sto prototipando un'idea per un sito Web che utilizzerà la cache di applicazioni offline HTML5 per determinati scopi. Il sito web sarà costruito con Python e Flask e da lì viene il mio problema principale: sto lavorando con quei due per la prima volta, quindi ho difficoltà a far funzionare il file manifest come previsto.Come costruire un'applicazione web offline usando Flask?

Il problema è che sto recuperando 404 dai file statici inclusi nel file manifest. Il manifest stesso sembra essere scaricato correttamente, ma i file a cui punta non lo sono. Questo è ciò che sputa nella console durante il caricamento della pagina:

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

L'errore è nell'ultima riga.

Quando l'appcache si interrompe anche una volta, interrompe completamente il processo e la cache non in linea non funziona.

Ecco come il mio file sono strutturati:

sandbox
- offline-app
  - offline-app.py
  - statico
    - manifest.appcache
    - sceneggiatura .js
    - style.css
  - modelli
    - offline-app.html

Questo è il contenuto di 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)

Questo è quello che ho in 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>

Questo è il mio manifest.appcache di file:

CACHE MANIFEST 
/style.css 
/script.js

Ho provato con il file manifesto in tutti i modi diversi che ho potuto pensare:

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

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

Nessuno di questi ha funzionato. Lo stesso errore è stato restituito ogni volta.

Sono certo che il problema qui è come il server serve i file elencati nel manifest. Probabilmente quei file verranno cercati nel posto sbagliato. O dovrei metterli da qualche altra parte o ho bisogno di qualcosa di diverso nel manifest della cache, ma non ho idea di cosa.Non sono riuscito a trovare nulla online sull'avere applicazioni offline HTML5 con Flask.

Qualcuno è in grado di aiutarmi?

fonte

2013-06-27 Rafael Alencar

avrei pensato questo dovrebbe funzionare:

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

Ma in ogni caso, non si dovrebbe hardcode gli URL per i file statici. E 'meglio per servire il manifesto come modello (spostati nella cartella "template") in modo che è possibile utilizzare url_for per generare il percorso dei file statici, qualcosa di simile:

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

Poi nel template HTML avrebbe un riferimento ad un percorso invece di un file statico:

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

E, infine, si dovrebbe aggiungere una nuova funzione di visualizzazione che restituisce il manifesto:

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

fonte

2013-06-27 22:19:10 Miguel

Cambiare per essere servito come modello risolto per me. Grazie! Per chiunque lo utilizzi in futuro, mancavano solo due piccole cose alla risposta di Miguel: è necessario aggiungere un'importazione a make_response nel file (my .py ha ora "da Flask import Flask, render_template, make_response") e nella funzione di visualizzazione inserire una riga sotto la quale è impostata l'intestazione "Content-Type" che restituisce la risposta (come in "return res"). –

Eccellente! Ho aggiornato il mio esempio con le tue correzioni. – Miguel

Come costruire un'applicazione web offline usando Flask?

risposta

Problemi correlati