prucommercialre.com


Cómo configurar una Página Web HTML5 para Desconectado caché

La mayoría de las aplicaciones basadas en la Web sólo funcionan si usted está en línea, lo que hace que un cierto tipo de sentido. Pero HTML5 tiene un mecanismo para obligar a 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 el equipo local de forma automática; por ejemplo:

<! DOCTYPE HTML>
<Html lang = "es"
manifiesto = "cache.manifest">
<Head>
<Title> offline.html </ title>
<Charset meta = "UTF-8" />
<Link rel = "stylesheet"
type = "text / css"
href = "offline.css" />
<Script type = "text / javascript"
src = "offline.js">
</ Script>
</ Head>
<Body onload = "setCaption ()">
<H1> almacenamiento sin conexión demo </ h1>
<Div>
<Img src = "pot.jpg"
alt = "cerámica grabada a mano" />
<P id = "leyenda"> </ p>
</ Div>
</ Body>
</ Html>

Aunque es extremadamente simple, esta página se las arregla para extraer recursos de varios archivos distintos. Por supuesto, se requiere la pot.jpg imagen, pero también utiliza un archivo externo JavaScript (offline.js) y una hoja de estilo externa (offline.css). HTML5 ofrece un mecanismo que permite al navegador 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. Aquí está el contenido de cache.manifest para este ejemplo en particular:

CACHE MANIFEST
offline.css
offline.js
pot.jpg

El archivo debe comenzar con la frase CACHE MANIFEST (todo en mayúsculas). Cada línea subsiguiente debe contener el nombre de un archivo que se necesita 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 memoria caché sin conexión:

  1. Configure su servidor para administrar cachés.

    El mecanismo de caché utiliza el texto / tipo MIME manifiesto. Su servidor aún no se puede configurar 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 línea siguiente 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, es posible que tenga que pedir al administrador del servidor para agregar este tipo MIME.

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

    Haga la primera línea decía CACHE MANIFEST. En cada línea posterior, enumerar 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 añadiendo el atributo manifest a la etiqueta <html> y un enlace a su archivo cache.manifest.
  5. Carga tu página.

    Obviamente, no se puede probar la memoria caché en una máquina local (a menos que usted está funcionando su propio servidor web y prueba a través de la dirección http: // localhost). Usted tendrá que cargar sus archivos a un servidor. La primera vez que intente acceder a la página, su navegador probablemente le pedirá permiso para guardar datos de forma 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 los datos que necesite en el cliente para que su proyecto seguirá funcionando sin una conexión de servidor.

Si cambia el archivo cache.manifest y vuelva a probar, el navegador no se actualizará 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 archivo .htaccess:

En ExpiresActive
ExpiresDefault "acceso"

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

Si uno de los archivos de cambios, pero el archivo cache.manifest 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 archivo cache.manifest. 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.