El acceso sin conexión es cada vez más importante para las aplicaciones basadas en web. Si bien todos los navegadores tienen mecanismos de almacenamiento en caché, no son confiables y es posible que no siempre funcionen como se espera. HTML5 utiliza la interfaz ApplicationCache para resolver algunos de los problemas causados por la conexión.
El uso de la interfaz de caché aporta tres ventajas a su aplicación:
Application Cache (también conocido como AppCache) permite a los desarrolladores especificar qué archivos deben almacenarse en caché en el navegador para que puedan acceder los usuarios sin conexión. Incluso si el usuario presiona el botón de actualización sin conexión, su aplicación se cargará y ejecutará normalmente.
Archivo de manifiesto de referenciaPara habilitar el almacenamiento en caché de una aplicación, agregue el atributo de manifiesto a la etiqueta html del documento:
El atributo manifiesto puede apuntar a una URL absoluta o a una ruta relativa, pero las URL absolutas deben tener el mismo origen que la aplicación web correspondiente. El archivo de manifiesto puede usar cualquier extensión de archivo, pero debe entregarse con el tipo MIME correcto (ver más abajo).
<html manifest=/cache.manifest> ...</html>
o
<html manifiesto=http://www.example.com/example.mf> ...</html>
Debe agregar el atributo de manifiesto en cada página de su aplicación web que desee almacenar en caché. Si una página web no contiene un atributo de manifiesto, el navegador no almacenará en caché la página (a menos que el atributo aparezca explícitamente en el archivo de manifiesto).
Esto significa que cada página web que navegue el usuario y que contenga un manifiesto se agregará implícitamente al caché de la aplicación. Por lo tanto, no es necesario que incluyas todas las páginas de tu inventario.
Los archivos de manifiesto deben proporcionarse como tipo MIME de manifiesto de caché/texto. El nombre del sufijo del archivo se puede personalizar (se recomienda .manifest), por lo que debemos declarar el tipo de archivo con el sufijo .manifest como texto/cache-manifest en el lado del servidor.
Tomando Apache como ejemplo, debemos agregar: AddType text/cache-manifest .manifest a httpd.conf
Estructura del archivo manifiestoUn formato de lista simple es el siguiente:
CACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
Este ejemplo almacenará en caché cuatro archivos en la página web que especifica este archivo de manifiesto.
Debes prestar atención a los siguientes puntos:
Veamos un ejemplo más complejo:
CACHE MANIFEST# 2010-06-18:v2# 'Entradas maestras' almacenadas explícitamente en caché.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# Recursos que requieren que el usuario esté en línea.RED:iniciar sesión. php/myapihttp://api.twitter.com# static.html se entregará si main.py es inaccesible# offline.jpg será servido en lugar de todas las imágenes en images/large/# offline.html se publicará en lugar de todos los demás archivos .htmlFALLBACK:/main.py /static.htmlimages/large/images/offline.jpg*.html /offline.html
Las líneas que comienzan con # son líneas de comentarios, pero también se pueden utilizar para otros fines. Por ejemplo, actualizar caché
El caché de la aplicación solo se actualiza cuando cambia su archivo de manifiesto. Por ejemplo, si modifica un recurso de imagen o cambia una función de JavaScript, esos cambios no se volverán a almacenar en caché. Debe modificar el archivo de manifiesto para permitir que el navegador actualice el archivo de caché. La creación de líneas de comentarios con números de versión generados, hashes de archivos o marcas de tiempo garantiza que los usuarios tengan la última versión de su software.
También puede actualizar la caché mediante programación cuando haya una nueva versión disponible, como se describe en la sección Actualización de la caché.
Si la página introduce un archivo de manifiesto de caché, entonces el archivo de manifiesto debe contener todos los archivos (css, js, image...) requeridos por la página actual; de lo contrario, no se cargará, excepto los archivos que deben almacenarse en caché. , se recomienda agregar RED en el archivo. Agregue un asterisco * a un elemento para indicar todos los demás archivos.
Un manifiesto puede incluir tres secciones diferentes: CACHE, RED y FALLBACK.
CACHE:Esta es la parte predeterminada de la entrada. Los archivos enumerados bajo este encabezado (o los archivos que siguen inmediatamente a CACHE MANIFEST) se almacenan en caché explícitamente después de descargarlos por primera vez.
RED:Los archivos enumerados en esta sección son recursos incluidos en la lista blanca que son necesarios para conectarse al servidor. Todas las solicitudes de estos recursos omiten el caché independientemente de si el usuario está desconectado. Se pueden utilizar comodines.
RETROCEDER:Esta sección es opcional y especifica una página alternativa si no se puede acceder al recurso. El primer URI representa el recurso y el segundo representa la página de respaldo. Los dos URI deben estar relacionados y tener el mismo origen que el archivo de manifiesto. Se pueden utilizar comodines.
Nota: Las secciones se pueden organizar en cualquier orden y cada sección puede aparecer repetidamente en la misma lista.
La siguiente lista define la página web completa (offline.html) que se muestra cuando un usuario intenta acceder a la raíz del sitio sin conexión y también indica que todos los demás recursos (como los de sitios remotos) requieren una conexión a Internet.
CACHE MANIFEST# 2010-06-18:v3# Las entradas explícitamente almacenadas en cachéindex.htmlcss/style.css# offline.html se mostrarán si el usuario está desconectadoFALLBACK:/// /offline.html# Todos los demás recursos (por ejemplo, sitios) requieren el el usuario debe estar en línea.RED:*# Recursos adicionales para cacheCACHE:images/logo1.pngimages/logo2.pngimages/logo3.png
Tenga en cuenta: los archivos HTML que hacen referencia a archivos de manifiesto se almacenan en caché automáticamente. Por lo tanto, no es necesario que lo agregues a tu lista, pero te recomendamos que lo hagas.
Nota: Los encabezados de caché HTTP y los límites de caché establecidos en las páginas entregadas a través de SSL se reemplazarán con manifiestos de caché. Por lo tanto, las páginas web servidas a través de https pueden ejecutarse sin conexión.
Actualizar cachéLas aplicaciones permanecerán en caché mientras estén fuera de línea a menos que ocurra una de las siguientes condiciones:
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.