HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML5 Web Workers HTML 5 Base de datos local

HTML5 Caché de aplicaciones

Uso de HTML5, al crear un archivo de manifest de caché, se puede crear fácilmente una versión sin conexión de la aplicación web, lo que introduce la caché de aplicaciones, lo que significa que las aplicaciones web pueden realizarse en caché en el cliente y pueden acceder sin conexión cuando no hay conexión a internet.

¿Qué es la caché de aplicaciones (Application Cache)

HTML5 Proporciona un mecanismo de caché de aplicaciones que permite que las aplicaciones basadas en web funcionen sin conexión. Los desarrolladores pueden usar el interfaz Application Cache (AppCache) para establecer los recursos que el navegador debe cachear y hacerlos disponibles para usuarios sin conexión. Incluso cuando el usuario está en estado de desconexión, la aplicación puede cargar y funcionar normalmente al hacer clic en el botón de recargar.

La caché de aplicaciones ofrece tres ventajas para las aplicaciones:

Navegación sin conexión - Los usuarios pueden usarlos mientras la aplicación está sin conexión
Velocidad - Carga más rápida de recursos en caché
Reducción de la carga del servidor - El navegador solo descargará recursos actualizados o modificados desde el servidor.

¿Qué navegadores admiten

Internet Explorer 10, Firefox, Chrome, Safari y Opera admiten la caché de aplicaciones.

HTML5 　Ejemplo de Manifesto de Caché

El siguiente ejemplo muestra un documento HTML con manifest de caché (para navegación sin conexión):

Ejemplo en línea

Ejemplo

<!DOCTYPE HTML>
<html manifest="demo.appcache">
	<body>
	Contenido del documento......
	</body>
	</html>

Prueba aquí ‹/›

Fundamentos del Cache Manifest

Para habilitar la caché de la aplicación, incluya la propiedad manifest en la etiqueta <html> del documento:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Cada página que especifique un archivo Manifesto se almacenará en caché cuando el usuario la acceda. Si no se especifica la propiedad Manifesto, la página no se almacenará en caché (a menos que se especifique directamente esa página en el archivo Manifesto).

La extensión de archivo recomendada para el archivo Manifesto es: ".appcache".

Tenga en cuenta que el archivo Manifesto necesita estar configurado con el MIME correcto-type, es decir, "text/caché-"manifest". Debe configurarse en el servidor web.

Archivo Manifesto

El archivo Manifesto es un archivo de texto simple que informa al navegador sobre el contenido almacenado en caché (y el contenido que no se almacenará en caché).

El archivo Manifesto se puede dividir en tres partes:

CACHE MANIFEST - A continuación se listan los archivos especificados bajo este título que se almacenarán en caché después de la descarga inicial
NETWORK - A continuación se listan los archivos especificados bajo este título que necesitan conexión con el servidor y no se almacenarán en caché
FALLBACK - A continuación se listan los archivos especificados bajo este título como páginas deFallback cuando la página no se puede acceder (por ejemplo 404 página)

CACHE MANIFEST

La primera línea, CACHE MANIFEST, es obligatoria:

MANIFESTO DE CACHE
/style.css
/logo.png
/main.js

El archivo Manifesto anterior lista tres recursos: un archivo CSS, una imagen GIF y un archivo JavaScript. Después de que se carga el archivo Manifesto, el navegador descarga estos tres archivos desde el directorio raíz del sitio web. Luego, estos recursos seguirán siendo accesibles independientemente de si el usuario se desconecta de la red.

NETWORK

La sección NETWORK a continuación especifica que el archivo "login.php" nunca se almacenará en caché y no estará disponible en modo desconectado:

NETWORK:
login.php

Se puede usar un asterisco para indicar todos los otros recursos/Todos los archivos necesitan conexión a red:

NETWORK:
*FALLBACK

La sección FALLBACK a continuación especifica que si no se puede establecer una conexión de red, se utilizará "offline.html" como sustituto /html5/ Todos los archivos en el directorio:

FALLBACK:
/html/　/index.html

Atención: El primer URI es el recurso, el segundo es el substituto.

Actualizar caché

Una vez que la aplicación se ha almacenado en caché, se mantendrá en caché hasta que ocurra una de las siguientes situaciones:

El usuario vacía la caché del navegador
El archivo Manifesto se ha modificado (ver las instrucciones a continuación)
El programa actualiza la caché de la aplicación

Ejemplo de archivo Manifesto completo

MANIFESTO DE CACHE
#　2018-02-21　v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/　/index.html

Consejo:Las líneas que comienzan con "#" son líneas de comentarios, pero también pueden satisfacer otros propósitos. La caché de la aplicación se actualizará cuando se cambie el archivo manifest. Si edita una imagen o modifica una función JavaScript, estos cambios no se volverán a cachear. Actualizar la fecha y la versión en la línea de comentarios es una manera de hacer que el navegador vuelva a cachear los archivos.

Descripción de la caché de aplicaciones

Tenga cuidado con el contenido en caché.

Una vez que el archivo se haya almacenado en caché, el navegador continuará mostrando la versión en caché, incluso si ha modificado el archivo en el servidor. Para asegurarse de que el navegador actualice la caché, debe actualizar el archivo manifest.

Atención: Los límites de capacidad de los datos en caché pueden variar entre navegadores (algunos navegadores tienen configuraciones de límites que son por sitio). 5MB).