Aplicaciones Offline En HTML5
Enviado por RichRich • 25 de Septiembre de 2012 • 645 Palabras (3 Páginas) • 366 Visitas
Lee una página web offline siempre había sido posible. Descargabas la página y las hojas de estilos y listo, ya podías ojearla. Pero ¿y las aplicaciones? Eso ya era otra cosa, ahí ya estabas limitado.
HTML5 llega con la posibilidad de la creación de aplicaciones offline. Imaginemos que hemos puesto un juego creado en una etiqueta canvas con javascript (uno mismamente como CanvasRider), y queremos que el usuario pueda usarla aunque no esté conectado. Lo que tenemos que hacer es crear un archivo app.manifest listando los archivos que tienen que descargarse. Algo así:
#Cache para la aplicación offline
#HTML
index.html
#Javascript
_js/aplicacion.js
#CSS
_css/aplicacion.css
#Imágenes
_img/imagen1.png
_img/imagen2.png
_img/imagen3.png
_img/animacion.gif
Una vez hecho el archivo .manifest hay que enlazarlo con la web. Lo primero es meterlo como atributo en la etiqueta html del archivo hmtl principal:
1 <html manifest = "app.manifest" >
Se debe configurar el tipo MIME correcto en el servidor para que reconozca bien el archivo. Si usas Apache en la carpeta /conf/ encontrarás la carpeta mime.types, debes añadir al final:
#HTML5 applicacion cache_offline access
text/cache-manifest manifest
Si por lo que sea no puedes acceder a este archivo (tal vez porque tu empresa de hosting no te lo permita), puedes crear un archivo .htaccess en la carpeta web con este texto:
AddType text/cache-manifest .manifest
Cuando el usuario visita el sitio, el navegador compara los archivo manifest (local y remoto) y comprueba si son iguales. Si el archivo remoto cambió el navegador descarga todos los archivos listados en él. Es posible forzar al navegador a cargar determinados recursos siempre de la red, por medio de la instrucción NETWORK. Por ejemplo, si quisiéramos que una imagen siempre sea cargada desde el servidor, dentro del archivo manifest habría que declararlo así:
NETWORK:
imagen1.png
El problema de hacer esto es que si la aplicación se utiliza offline la imagen se tratará de cargar desde el servidor. Para solucionar esto se puede utilizar otra instrucción que especifica que si no existe conexión se cargue un archivo local, y si la hay se cargue el archivo desde el servidor. Este es la instrucción FALLBACK:
FALLBACK
imagen1.png imagen1Local.png
Y no sólo esto, sino que también podemos especificar que en caso de que estemos sin conexión se muestre la misma imágen para todas las imágenes de la página, tal que así:
FALLBACK
_img/ _img/imagen1Local.png
Mientras
...