Wie erstellt man eine Offline-Web-App mit Flask?

Ich entwickle eine Idee für eine Website, die den HTML5-Cache für Offline-Anwendungen für bestimmte Zwecke verwenden wird. Die Website wird mit Python und Flask erstellt, und hier kommt mein Hauptproblem her: Ich arbeite zum ersten Mal mit diesen beiden, daher fällt es mir schwer, die Manifest-Datei wie erwartet zu bekommen.Wie erstellt man eine Offline-Web-App mit Flask?

Das Problem ist, dass ich 404 aus den statischen Dateien in der Manifest-Datei erhalten habe. Das Manifest selbst scheint korrekt heruntergeladen zu werden, aber die Dateien, auf die es verweist, sind es nicht. Dies wird beim Laden der Seite in der Konsole ausgegeben:

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

Der Fehler ist in der letzten Zeile.

Wenn der Appcache einmal fehlschlägt, wird der Prozess vollständig beendet und der Offline-Cache funktioniert nicht. Diese

ist, wie meine Dateien strukturiert sind:

Sandbox
- offline-App
  - offline-app.py
  - statische
    - manifest.appcache
    - Skript .js
    - style.css
  - Vorlagen
    - offline-app.html

Dies ist der Inhalt von offline-app.py:

Das ist, was ich habe 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>

Das ist mein manifest.appcache Datei:

CACHE MANIFEST 
/style.css 
/script.js

Ich habe versucht, die Manifest-Datei mit Auf alle möglichen Arten könnte ich folgendes denken:

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

oder

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

Keine von diesen funktionierte. Derselbe Fehler wurde jedes Mal zurückgegeben.

Ich bin sicher, dass das Problem hier ist, wie der Server die im Manifest aufgelisteten Dateien serviert. Diese Dateien werden wahrscheinlich an der falschen Stelle gesucht, denke ich. Ich sollte sie entweder woanders platzieren oder ich brauche etwas anderes im Cache-Manifest, aber ich habe keine Ahnung, was.Ich konnte nichts online über HTML5 Offline-Anwendungen mit Flask finden.

Kann mir jemand helfen?

Quelle

2013-06-27 Rafael Alencar

ich dieses funktionieren würde, hätte das gedacht:

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

Aber in jedem Fall, sollten Sie nicht die URLs für Ihre statischen Dateien codieren. Es ist am besten, die es als Vorlage dient (zum „templates“ Ordner verschoben), so dass Sie url_for zu erzeugen, um den Pfad zu den statischen Dateien, so etwas wie diese verwenden können: Sie

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

Dann in Ihrem HTML-Vorlage anstelle einer statischen Datei würde einen Verweis auf eine Route haben:

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

Und schließlich würden Sie eine neue Ansicht Funktion hinzufügen, die das Manifest zurückgibt:

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

Quelle

2013-06-27 22:19:10 Miguel

Ändern es zu sein als Vorlage diente löste es für mich. Vielen Dank! Für jeden, der dies in Zukunft verwenden wird, gab es nur zwei kleine Dinge, die Miguel nicht beantworten konnten: Sie müssen einen Import zu make_response in Ihrer Datei hinzufügen (mein .py hat jetzt "from flask import Flask, render_template, make_response")) und in der View-Funktion eine Zeile darunter einfügen, in der der Header "Content-Type" gesetzt ist, der die Antwort zurückgibt (wie in "return res"). –

Ausgezeichnet! Ich habe mein Beispiel mit Ihren Korrekturen aktualisiert. – Miguel

Wie erstellt man eine Offline-Web-App mit Flask?

Antwort

Verwandte Themen