Latest web development tutorials

HTML5 caché de la aplicación

Utilice HTML5, mediante la creación de un archivo de manifiesto de la caché, puede crear fácilmente versiones sin conexión de aplicaciones web.


¿Cuál es el caché de la aplicación (caché de la aplicación)?

HTML 5 introduce caché de la aplicación, lo que significa que las aplicaciones web pueden almacenar en caché, y se puede acceder sin conexión a Internet.

aplicación de caché de la aplicación trae tres ventajas:

  1. Navegación fuera de línea - los usuarios pueden utilizar en la aplicación sin conexión
  2. De velocidad - los recursos en caché se cargan más rápido
  3. Reducir la carga del servidor - el navegador sólo descargará recursos actualizados o modificados desde el servidor.

Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari y Opera admite la caché de la aplicación.


ejemplos HTML5 manifiesto de la caché

El siguiente ejemplo muestra el documento HTML con un manifiesto de la caché (para verlas sin conexión):

Ejemplos

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

<body>
文档内容......
</body>

</html>

Trate »


Manifiesto base caché

Para habilitar la caché de la aplicación, la etiqueta contiene el atributo de manifiesto en el documento <html>:

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

El manifiesto de página especificado cuando los usuarios acceden a su se almacenan en caché. Si no se especifica el atributo de manifiesto, no se almacenará en caché la página (a menos que especificar directamente la página en el archivo de manifiesto).

Sugerido extensión de archivo de manifiesto: ". AppCache".

observación Tenga en cuenta que los archivos de manifiesto necesitan para configurar el tipo MIME correcto, es decir, "text / cache-manifiesto". Usted debe estar configurado en el servidor web.


El archivo de manifiesto

archivo de manifiesto es un archivo de texto simple que dice a los contenidos del navegador de la memoria caché (y no almacena en caché el contenido).

archivos de manifiesto se pueden dividir en tres partes:

  • Manifiesto de la caché - en el encabezamiento de este documento se almacena en caché después de la primera descarga
  • RED - En este título los siguientes documentos tienen que conectarse al servidor y no se almacenan en caché
  • FALLBACK - En este aparece en las páginas de los documentos de título de reversión (por ejemplo, la página 404) cuando la página es inaccesible

manifiesto de la caché

La primera línea, manifiesto de la caché, se requiere:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

El archivo de manifiesto por encima de una lista de tres recursos: un archivo CSS, una imagen GIF, y un archivo JavaScript. Cuando se carga el archivo de manifiesto, el navegador descargará los tres archivos del directorio raíz de su sitio. Entonces, cada vez que el usuario se desconecta de Internet, estos recursos están todavía disponibles.

RED

Las siguientes disposiciones de los incisos archivo RED "login.php" Nunca se almacena en caché y está disponible sin conexión no está disponible:

NETWORK:
login.php

Puede utilizar un asterisco para indicar todos los demás otros recursos / archivos requieren una conexión a Internet:

NETWORK:
*

FALLBACK

secciones de emergencia previsto abajo Si no puede establecer una conexión a Internet, con "offline.html" alternativo / HTML5 / directorio de todos los archivos:

FALLBACK:
/html/ /offline.html

Nota: La primera es la URI de recursos, el segundo es un sustituto.


Actualizar caché

Una vez que se almacena en caché la aplicación, permanecerá en caché hasta que se produzca la siguiente:

  • Los usuarios vaciar la caché del navegador
  • archivo de manifiesto es modificado (ver consejos a continuación)
  • Por el programa para actualizar el caché de la aplicación

Ejemplo - Completar archivo de manifiesto

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

observaciónConsejo: El "#" al principio de la línea de comentarios, sino también para cumplir con otros fines.El almacenamiento en caché de aplicación será actualizada cuando cambia su archivo de manifiesto. Si edita una imagen, o modificar una función de JavaScript, no serán re-almacenan en caché estos cambios. línea de actualización de comentario es una fecha y número de versión del navegador para volver a la caché de archivos enfoque.


Acerca de instrucciones de caché de aplicaciones

Por favor, preste atención al contenido de la memoria caché.

Una vez que los archivos se almacenan en caché, el navegador continuará mostrando la versión en caché, incluso si está editando el archivo en el servidor. Para asegurarse de que su navegador para actualizar la memoria caché, es necesario actualizar el archivo de manifiesto.

Nota: El límite de capacidad del navegador para los datos almacenados en caché puede no ser la misma (algunos ajustes del navegador restricciones es que cada sitio 5 MB).