Application caching: El archivo de manifiesto

Application caching: El archivo de manifiesto
Application caching: Actualizar el appcache

HTML5 ofrece la posibilidad de que una aplicación web funcione incluso en modo offline. Para conseguir esto se emplea el application caching.

Algunas de las ventajas del application caching serían:

Los usuarios puedan navegar el sitio sin conexión, ya antes mencionado.
Incremento en el rendimiento ya que los archivos al estar almacenados en el navegador del usuario se cargan más rápido.
Como consecuencia de lo anterior, se reduce la carga del servidor ya que no es preciso que tengan que descargar los recursos otra vez, salvo que hayan cambiado.

HTML5 define una aplicación de caché especial llamada appcache y permite indicar al navegador qué recursos(scripts, imágenes…) puede almacenar.

Para saber si el navegador soporta dicha característica bastará en introducir en un bloque de javaScript

var appcache_support = !!window.applicationCache;

1	var appcache_support = !!window.applicationCache;

El archivo de manifiesto

Este archivo lista todos los recursos que pueden ser almacenados, cuales no y requieren estar en línea y recursos alternativos. El archivo estaría en la raíz de tu sitio web/aplicación con un nombre como ejemplo.appcache.

Es importante que el servidor acepte el MIME type text/cache-manifest sino no funcionará. Normalmente en el servidor hay un archivo de configuración encargado de gestionar los MIME types. En Apache por ejemplo, debe estar en conf/mime-types. Puede que el tipo ya este añadido pero conviene asegurarse.

En cuanto el archivo de manifiesto puede tener un aspecto similar a este

CACHE MANIFEST
# 2017-04-21:v1

# Recursos en caché 
CACHE:
img/favicon.ico
index.html
css/estilos.css
img/logo.png
scripts/main.js

# Resources que tienen que estar en online.
NETWORK:
login.php
http://api.prueba.com
/api

# Recursos alternativos
FALLBACK:
index.html /static.html
img/large/ img/offline.jpg
*.html /offline.html
*.css /simple.css

CACHE MANIFEST

# 2017-04-21:v1

# Recursos en caché

CACHE:

img/favicon.ico

index.html

css/estilos.css

img/logo.png

scripts/main.js

# Resources que tienen que estar en online.

NETWORK:

http://api.prueba.com

/api

# Recursos alternativos

FALLBACK:

index.html /static.html

img/large/ img/offline.jpg

*.html /offline.html

*.css /simple.css

Secciones del archivo de manifiesto

Se comienza con CACHE MANIFEST y debajo un comentario indicando la versión y fecha. A continuación se pueden diferenciar 3 apartados:

CACHE -> Se indican los archivos o recursos que puede almacenar en appcache después de descargarse la primera vez.
NETWORK -> Son los recursos dinámicos que tienen que ser llamados al servidor. No se almacenan en caché y puedes emplear caracteres comodín.
FALLBACK -> Son los recursos alternativos que se emplean cuando el principal no funciona. La primera URI sería el recurso principal y el segundo sería el alternativo que se usa cuando no funciona el primero. Se pueden emplear caracteres comodín de hecho, en él indico que si no funciona ningún archivo .html o .css emplee una determinada hoja de estilos y página estática.

Para finalizar todos los archivos html que estén en el manifiesto, deben tener la etiqueta html de la siguiente manera

<html manifest="ejemplo.appcache"> <!--Nombre del manifiesto-->

1	<html manifest="ejemplo.appcache"> <!--Nombre del manifiesto-->

Hay que tener en cuenta que cada navegador permite almacenar hasta 5MB en caché por sitio. Procura no excederte almacenando recursos.

Y hasta aquí lo referido al archivo de manifiesto en application caching. A seguir picando 🙂