El acceso fuera de línea se está volviendo cada vez más importante para las aplicaciones basadas en la web. Aunque todos los navegadores tienen mecanismos de almacenamiento en caché, no son confiables y pueden no siempre desempeñar el papel esperado. HTML5 utiliza la interfaz ApplicationCache para resolver algunos de los problemas causados por el uso fuera de línea.
El uso de una interfaz de caché puede traer los siguientes tres beneficios a su aplicación :Navegación fuera de línea: los usuarios pueden navegar por su sitio web completo mientras están fuera de línea
Velocidad: el recurso almacenado en caché es un recurso local, por lo que se carga más rápido.
Carga del servidor menos: el navegador solo descarga los recursos del servidor que ha cambiado.
App Cache (también conocido como AppCache) permite a los desarrolladores especificar qué archivos debe acceder el navegador para los usuarios fuera de línea. Su aplicación se cargará y ejecutará normalmente incluso si el usuario presiona el botón Actualizar cuando fuera de línea.
Archivo manifiesto de caché
Un archivo Manifest de Cache es un archivo de texto simple que enumera los recursos que el navegador debe almacenar en caché para el acceso fuera de línea.
Archivo manifiesto de referencia
Para habilitar el almacenamiento en caché de la aplicación para una aplicación, agregue el atributo de manifiesto en la etiqueta HTML del documento:
<html manifest = "ejemplo.appcache">
...
</html>
Debe agregar la propiedad de manifiesto en cada página de la aplicación web que desea almacenar en caché. Si la página no contiene el atributo manifiesto, el navegador no almacenará en caché la página (a menos que se enumere explícitamente en el archivo manifiesto). Esto significa que cada página web que el usuario navega con el manifiesto se agregará implícitamente al caché de la aplicación. Por lo tanto, no necesita enumerar cada página en la lista.
La propiedad manifiesta puede apuntar a una URL absoluta o una ruta relativa, pero la URL absoluta debe ser la misma que la aplicación de red correspondiente. El archivo manifiesto puede usar cualquier extensión de archivo, pero debe proporcionarse con el tipo de MIME correcto (ver más abajo).
<html manifest = "http://www.example.com/example.mf">
...
</html>
El archivo manifiesto debe proporcionarse en el tipo de mime de texto/caché-manifiesto. Es posible que deba agregar un tipo de archivo personalizado a su servidor web o configuración .htaccess.
Por ejemplo, para proporcionar este tipo MIME en Apache, agregue la siguiente línea a su archivo de configuración:
AddType Text/Cache-manifest .appCache Para proporcionar este tipo de mime en el archivo app.yaml del motor de la aplicación Google, agregue lo siguiente:
- url: /mystaticdir/(.*/.appcache)
static_files: mystaticdir // 1
mime_type: texto/cache-manifest
Carga: MystaticDir /(.*/. AppCache) Estructura de archivo manifiesto
El formato de lista simple es el siguiente:
Manifiesto de caché
index.html
Stylesheet.css
imágenes/logo.png
scripts/main.js Este ejemplo almacena cuatro archivos en la página web que especifica este archivo manifiesto.
Los siguientes puntos a los que debe prestar atención:
La cadena de manifiesto de caché debe estar en la primera línea y es esencial.
La cantidad de datos en caché en el sitio web no debe exceder los 5 MB. Sin embargo, si está escribiendo una aplicación para Chrome Web Store, puede usar UnlimitedStorage para ilimitar las restricciones.
Si el archivo manifiesto o el recurso especificado en él no se pueden descargar, no se puede realizar todo el proceso de actualización de caché. En este caso, el navegador continuará usando el caché de la aplicación original.
Echemos un vistazo a ejemplos más complejos:
Manifiesto de caché
# 2010-06-18: V2
# Explícitamente en caché 'entradas maestras'.
Caché :/favicon.ico
index.html
Stylesheet.css
imágenes/logo.png
scripts/main.js
# Recursos que requieren que el usuario esté en línea.
RED :Login.php
/myapi
http://api.twitter.com
# static.html se servirá si main.py es inaccesible
# Offline.jpg se servirá en lugar de todas las imágenes en imágenes/grandes/
# Offline.html se servirá en lugar de todos los demás archivos .html
RETROCEDER :/main.py /static.html
Imágenes/grandes/imágenes/fuera de línea.jpg
*.html /offline.html Las líneas que comienzan con # son líneas de comentarios, pero también pueden usarse para otros fines. El caché de la aplicación se actualiza solo si su archivo manifiesto cambia. Por ejemplo, si modifica un recurso de imagen o cambia una función JavaScript, estos cambios no son recacios. Debe modificar el archivo de manifiesto en sí para que el navegador actualice el archivo en caché. Cree líneas de comentarios con números de versión generados, valores de hash o marcas de tiempo para garantizar que los usuarios obtengan la última versión de su software. También puede actualizar mediante programación el caché después de que aparezca una nueva versión, como se describe en la sección Cache de actualización.
La lista puede incluir tres piezas diferentes: caché, red y alojamiento.
Caché :Esta es la parte predeterminada de la entrada. Los archivos enumerados en este encabezado se almacenan en caché explícitamente por primera vez (o archivos inmediatamente después del manifiesto de caché).
RED :Los archivos enumerados en esta sección son recursos de la lista blanca que deben conectarse al servidor. Todas las solicitudes a estos recursos evitan el caché independientemente de si el usuario está fuera de línea o no. Se pueden usar comodines.
RETROCEDER :Esta sección es opcional y se utiliza para especificar la página de alojamiento cuando no es accesible el recurso. El primer URI representa el recurso y el segundo representa la página web de copia de seguridad. Ambos URI deben estar relacionados y deben ser del mismo origen que el archivo manifiesto. Se pueden usar comodines.
Tenga en cuenta: estas secciones se pueden organizar en cualquier orden, y cada sección se puede repetir en la misma lista.
La siguiente lista define la página web integral (fuera de línea.html) que se muestra cuando un usuario intenta acceder a la raíz de un sitio web fuera de línea, y también indica que todos los demás recursos (como los recursos en un sitio web remoto) requieren una conexión a Internet.
Manifiesto de caché
# 2010-06-18: V3
# Entradas explícitamente en caché
index.html
css/style.css
# fuera de línea.html se mostrará si el usuario está fuera de línea
RETROCEDER:
//offline.html
# Todos los demás recursos (por ejemplo) requieren que el usuario esté en línea.
RED:
*
# Recursos adicionales para caché
CACHE:
imágenes/logo1.png
imágenes/logo2.png
Tenga en cuenta que imágenes/logotipo3.png: el sistema almacenará automáticamente el archivo HTML que hace referencia al archivo manifiesto. Por lo tanto, no necesita agregarlo a la lista, pero le recomendamos que lo haga.
Nota : Los encabezados de caché HTTP y las restricciones de caché establecidas para páginas web proporcionadas a través de SSL se reemplazarán con manifiestas de caché. Por lo tanto, la página web proporcionada por HTTPS se puede ejecutar fuera de línea. Actualizar cachéLa aplicación permanece almacenada en caché después de fuera de línea a menos que ocurra uno de los siguientes:
El usuario borra el almacenamiento de datos del navegador en su sitio web.
El archivo manifiesto ha sido modificado. Tenga en cuenta: Actualizar un archivo que figura en el manifiesto no significa que el navegador vuelva a comer el recurso. El archivo manifiesto en sí debe cambiarse.
El caché de la aplicación se actualiza programáticamente.
Estado de cachéEl objeto Windows.ApplicationCache es un método de acceso programático para el caché de aplicaciones del navegador. Su atributo de estado se puede usar para ver el estado actual del caché:
var appcache = window.applicationCache;
switch (appcache.status) {
Case AppCache.uncached: // Uncached == 0
regresar 'Uncaced';
romper;
Case AppCache.idle: // inactivo == 1
regresar 'inactivo';
romper;
Case AppCache.CHECTING: // Comprobación == 2
regresar 'verificación';
romper;
case appcache.downloading: // descarga == 3
devolver 'descarga';
romper;
case appcache.updaterady: // updaterAdy == 4
devolver 'updateLAdy';
romper;
Case AppCache.obsolete: // obsoleto == 5
regresar 'obsoleto';
romper;
por defecto:
devolver 'estado de caché conocido';
romper;
};
Para actualizar programáticamente el caché, llame a ApplicationCache.Update () primero. Esto intentará actualizar el caché del usuario (siempre que el archivo manifiesto haya cambiado). Finalmente, cuando ApplicationCache.status está en el estado de UpdateReady, llame a ApplicationCache.swapCache () para reemplazar el caché original con el nuevo caché.
var appcache = window.applicationCache;
appcache.update (); // Intenta actualizar el caché del usuario.
...
if (appcache.status == window.applicationcache.updaterady) {
appcache.swapcache (); // La búsqueda fue exitosa, intercambiar en la nueva memoria caché.
}
Tenga en cuenta : Uso de Update () y SwapCache () de esta manera no proporcionará recursos actualizados al usuario. Este proceso simplemente permite que el navegador busque nuevos manifiestos, descargue actualizaciones especificadas y rellene el caché de la aplicación. Por lo tanto, la página web debe volver a cargarse dos veces antes de proporcionar un nuevo contenido al usuario, el primero es obtener un nuevo caché de aplicaciones y el segundo es actualizar el contenido de la página web.La buena noticia es que puedes evitar la molestia de recargar dos veces. Para actualizar a los usuarios a la última versión del sitio web, configure un oyente para monitorear los eventos de actualización cuando se carga la página web:
// Verifique si hay un nuevo caché disponible en la carga de la página.
Window.adDeventListener ('load', function (e) {
Window.applicationCache.adDeventListener ('updateAteady', function (e) {
if (window.applicationcache.status == window.applicationcache.updaterady) {
// El navegador descargó un nuevo caché de aplicaciones.
// Cambiarlo y volver a cargar la página para obtener el nuevo calor.
Window.ApplicationCache.swapCache ();
if (confirmar ('una nueva versión de este sitio está disponible. ¿Cargarlo?')) {
Window.location.Reload ();
}
} demás {
// El manifiesto no cambió. Nada nuevo para el servidor.
}
}, FALSO);
}, FALSO);
Evento AppCacheComo esperaba, se utilizan eventos adicionales para escuchar el estado del caché. El navegador activará los eventos correspondientes para descargar progreso, actualizaciones de caché de aplicaciones y estado de error. El siguiente fragmento de código establece un oyente de eventos para cada tipo de evento de caché:
function handLecacheEvent (e) {
// ...
}
function handlecacheRor (e) {
alerta ('Error: el caché no se actualizó!');
};
// disparó después del primer caché del manifiesto.
appcache.addeventListener ('Cached', handLecacheEvent, falso);
// Comprobación de una actualización. Siempre el primer evento disparado en la secuencia.
appcache.addeventListener ('compensación', handLecacheEvent, false);
// Se encontró una actualización. El navegador está obteniendo recursos.
appcache.addeventListener ('descargar', handLecacheEvent, false);
// El manifiesto devuelve 404 o 410, la descarga falló,
// o el manifiesto cambió mientras la descarga estaba en progreso.
appcache.addeventListener ('Error', handLecacheError, falso);
// disparó después de la primera descarga del manifiesto.
appcache.addeventListener ('noupdate', handLecacheEvent, falso);
// disparó si el archivo manifiesto devuelve un 404 o 410.
// Esto da como resultado que se elimine el caché de la aplicación.
appcache.addeventListener ('obsoleto', handLecacheEvent, falso);
// disparado para cada recurso listado en el manifiesto a medida que se está recuperando.
appcache.addeventListener ('progreso', handLecacheEvent, falso);
// disparó cuando los recursos manifiestos han sido recién cargados.
appcache.addeventListener ('updaterArEAdy', handLecacheEvent, falso);
Si el archivo manifiesto o el recurso especificado en él no se puede descargar, la actualización completa fallará. En este caso, el navegador continuará utilizando el caché de la aplicación original