La mayoría de las aplicaciones basadas en Web funcionan sólo si estás en línea, lo que hace que un cierto tipo de sentido. Pero HTML5 tiene un mecanismo para forzar parte de una página web y sus recursos para ser almacenados en el equipo local para que pueda verla sin conexión. Usted puede tener una página identificarse para este comportamiento y tratar de guardar una copia en la automáticamente- equipo local, por ejemplo:

Desconectado Almacenamiento demo

Aunque es extremadamente simple, esta página se las arregla para extraer recursos de varios archivos diferentes. Por supuesto, se requiere de la imagen pot.jpg, pero también utiliza un archivo externo javascript (offline.js) Y una hoja de estilos externa (offline.css). HTML5 ofrece un mecanismo que permite que el navegador para guardar automáticamente no sólo el archivo HTML, pero todos los otros recursos que necesita para funcionar correctamente.

Usted no construir una página tan sencilla con tantas dependencias externas, pero ese es el punto de este ejercicio en particular.

El secreto está en un archivo especial llamado cache.manifest. Este archivo especial es simplemente un archivo de texto que indica que se necesitan otros archivos de la página. He aquí el contenido de cache.manifest Para este ejemplo particular:

CACHE MANIFESToffline.cssoffline.jspot.jpg

El archivo debe comenzar con la frase CACHE MANIFEST (todo en mayúsculas). Cada línea subsecuente debe contener el nombre de un archivo necesario para completar la página. Es más fácil si todos los archivos están en el mismo directorio, pero las referencias relativas son aceptables.

Siga estos pasos para configurar una página de caché sin conexión:

1. Configure su servidor para administrar cachés.

   Utiliza el mecanismo de caché de la texto / manifiesta Tipo MIME. Su servidor no puede ser configurado para este tipo de datos. Si estás usando Apache, esto es fácil de arreglar. Busque (o crear) un archivo de texto llamado .htaccess en el directorio raíz de tu servidor web. Agregue la siguiente línea a este archivo:

   AddType texto / .manifest-manifiesto de la caché

   Si usted no tiene permiso para agregar o modificar .htaccess o si está utilizando otro servidor, puede que tenga que pedir a su administrador del servidor para agregar este tipo MIME.

2. Crea tu archivo de manifiesto mediante la creación de un archivo de texto llamado cache.manifest en el mismo directorio que el proyecto.

   Haga la primera línea de leer CACHE MANIFEST. En cada línea posterior, la lista de uno de los activos de su página va a necesitar. Puede que tenga que mirar a través de su código fuente para encontrar los distintos elementos (normalmente imágenes, CSS y los archivos javascript) que va a necesitar su página.

3. Creación de la página de la manera normal.

   Lleve un registro de los recursos externos que pueda necesitar.

4. Indique que su página solicitará almacenamiento local mediante la adición de la manifiesto atribuir a la etiqueta y un enlace a su cache.manifest archivo.

5. Carga tu página.

   Obviamente, no se puede probar la memoria caché en un equipo local (a menos que usted está funcionando su propio servidor web y la prueba a través de la http: // localhost dirección). Usted tendrá que cargar sus archivos a un servidor. La primera vez que intente acceder a la página, su navegador probablemente pedir permiso para guardar los datos a nivel local. Otorgar permiso para hacerlo.

6. Prueba fuera de línea.

   Para ver si la página funciona, desconectarse de Internet (por apagar su móvil o desenchufar el cable de red). Trate de cargar la página de nuevo. Si tienes éxito, toda la página se cargue.

Los navegadores ya tienen una forma de caché que almacena automáticamente las páginas que el usuario ha visitado, pero este tipo de memoria caché es una forma diferente, más intencional de caché.

Tenga en cuenta que no se puede poner enlaces a los activos del lado del servidor en la caché. Un caché local no puede almacenar un programa PHP o base de datos. Sin embargo, puede almacenar todos los datos que necesita en el cliente para que su proyecto seguirá funcionando sin una conexión de servidor.

Si cambia de cache.manifest presentar y probar de nuevo, el navegador no se actualiza inmediatamente. Eso es porque los navegadores están configurados para mantener el caché actual durante un par de horas. Si el resultado es de nuevo después de un par de horas, podrás ver los cambios reflejados. Durante las pruebas, puede activar el almacenamiento en caché automático navegador fuera añadiendo estas líneas a su .htaccess archivo:

ExpiresActive OnExpiresDefault "acceso"

Sólo tiene sentido para desactivar el almacenamiento en caché del navegador en un servidor de prueba. Deja el comportamiento de almacenamiento en caché en su nivel predeterminado para un servidor de producción.

Si uno de los archivos cambios pero el cache.manifest archivo no, el navegador no sabe volver a cargar el archivo modificado. Si desea activar una recarga archivo completo, tiene que cambiar al menos un carácter en el cache.manifest archivo. Esto puede ser un comentario, por lo que sólo puede añadir un número de versión de esta manera:

#version 3

Cambiar el número de versión se activará el mecanismo de recarga la próxima vez que usted está en línea, por lo que la versión en línea será actualizado.