Con caché de la aplicación es fácil de hacer una versión sin conexión de una aplicación web, mediante la creación de un archivo de manifiesto de caché.
¿Qué es la memoria caché de aplicaciones?
HTML 5 introduce caché de la aplicación, lo que significa que una aplicación web se almacena en caché, y accesible sin una conexión a Internet.
caché de la aplicación da una aplicación tres ventajas:
- navegación fuera de línea - los usuarios pueden utilizar la aplicación cuando están fuera de línea
- De velocidad - los recursos en caché se cargan más rápido
- Reducción de la carga del servidor - recursos del navegador sólo descargará actualizados / modificados desde el servidor
Fondo
aplicaciones web consisten en páginas web que necesitan ser descargado desde una red. Para que esto suceda tiene que haber una conexión de red. Sin embargo, hay muchos casos en los que los usuarios no pueden conectarse a una red debido a circunstancias fuera de su control. HTML5 ofrece la posibilidad de acceder a la aplicación web, incluso sin una conexión de red mediante el manifiesto de caché.
Las aplicaciones web se componen de los recursos identificados por las direcciones URL. Estos pueden ser HTML, CSS, JavaScript, imágenes o cualquier otra fuente que se requiere para una aplicación web que se prestarán. Sus direcciones pueden copiarse en un archivo de manifiesto, que puede ser actualizada periódicamente por el autor de la aplicación web, indicando las nuevas direcciones web que se agregan o se eliminan. Cuando se conecta a una red por primera vez, un navegador web leerá el archivo de manifiesto de HTML5, descargue los recursos dados y almacenarlos localmente. Luego, en ausencia de una conexión de red, el navegador web se desplazará a las copias locales en lugar y hacer que la línea de aplicaciones web.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con memoria caché de aplicaciones.
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Cache Manifest Ejemplo
El siguiente ejemplo muestra un documento HTML con un manifiesto de la caché (for offline browsing) :
Ejemplo
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html> Inténtalo tú mismo " Fundamentos de manifiesto de caché
Para que las aplicaciones fuera de línea para trabajar, un archivo de manifiesto de caché debe ser creado por el desarrollador web. Si la aplicación web supera más de una página a continuación, cada página debe tener un atributo de manifiesto que apunta al manifiesto de la caché. Cada página de referencia del manifiesto se almacena localmente. El archivo de manifiesto de caché es un archivo de texto situado en otra parte del servidor. Debe ser servido con el siguiente tipo de contenido:
text/cache-manifest
Para habilitar la caché de la aplicación, incluya el manifest atributo en el documento de <html> etiqueta:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Cada página con el manifest atributo especificado se almacenará en caché cuando el usuario lo visita. Si el manifest no se especifica el atributo, no se almacenan en caché la página (unless the page is specified directly in the manifest file) .
La extensión de archivo recomendada para los archivos de manifiesto es: ".appcache"
Un archivo de manifiesto necesita ser servido con el correct media type , que es "text/cache-manifest" . Debe estar configurado en el servidor web.
El archivo de manifiesto
El archivo de manifiesto es un archivo de texto simple, que le dice al navegador qué almacenar en caché (and what to never cache) .
El archivo de manifiesto consta de tres secciones:
- CACHE MANIFEST - Los archivos enumerados en esta cabecera se almacenan en caché después de que se descargan por primera vez
- NETWORK - Archivos aparece en esta cabecera requerir una conexión con el servidor, y nunca se almacena en caché
- FALLBACK - Los archivos enumerados en esta cabecera especifica las páginas de retorno si una página es inaccesible
manifiesto de 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 en el directorio raíz del sitio web. Entonces, cada vez que el usuario no está conectado a Internet, los recursos seguirán estando disponibles.
RED
La sección de red a continuación especifica que el archivo "login.asp" nunca debe ser almacenado en caché, y no estará disponible sin conexión:
NETWORK:
login.asp
Un asterisco puede ser utilizado para indicar que todos los demás recursos / archivos requieren una conexión a Internet:
NETWORK:
*
RETROCEDER
La sección de EMERGENCIA a continuación se especifica que "offline.html" se sirve en lugar de todos los archivos en el directorio / html / catálogo, en caso de que no se puede establecer una conexión a Internet:
FALLBACK:
/html/ /offline.html
Nota: La primera es la URI de recursos, el segundo es el de reserva.
La actualización de la caché
Una vez que se almacena en caché una aplicación, ésta se mantiene en caché hasta que uno de los siguientes casos:
- El usuario borra la caché del navegador
- El archivo de manifiesto es modificado (see tip below)
- El caché de la aplicación se actualiza mediante programación
Ejemplo - Cache completo archivo de manifiesto
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Tip: Las líneas que comienzan con un "#" son líneas de comentarios, sino que también pueden servir para otro propósito. el caché de una aplicación sólo se actualiza cuando cambia su archivo de manifiesto. Si edita una imagen o cambiar una función de JavaScript, no serán re-almacenan en caché esos cambios. Actualización de la fecha y la versión en una línea de comentario es una manera de hacer que el navegador re-caché de sus archivos.
Notas sobre la caché de la aplicación
Tenga cuidado con lo que se hace una caché.
Una vez que se almacena en caché un archivo, el navegador seguirá mostrando la versión en caché, incluso si cambia el archivo en el servidor. Para asegurar el navegador actualiza la memoria caché, es necesario cambiar el archivo de manifiesto.
Nota: Los navegadores pueden tener diferentes límites de tamaño para los datos almacenados en caché (some browsers have a 5MB limit per site) .