El manifiesto de caché en HTML5 es una función de almacenamiento de software que brinda la capacidad de acceder a una aplicación web incluso sin una conexión de red. Se convirtió en parte de la Recomendación del W3C el 28 de octubre de 2014. [1]
Extensión de nombre de archivo | .appcache |
---|---|
Tipo de medio de Internet | texto / caché-manifiesto |
Desarrollado por | Consorcio Mundial de la red |
Estándar | HTML5 |
¿ Formato abierto ? | sí |
Sitio web | html |
A partir de mayo de 2021, esta tecnología ya no está ampliamente disponible. Se eliminó de Firefox 85, [2] y se deshabilitó de forma predeterminada en Chrome 85 (con la eliminación completa planeada para Chrome 93). [3] En este momento, se desaconseja el uso de cualquiera de las funciones de la aplicación web sin conexión y, en su lugar, se recomienda el uso de trabajadores de servicio . [4]
Fondo
Las aplicaciones web constan de páginas web que deben descargarse de una red. Para que esto suceda, debe 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 proporciona la capacidad de acceder a la aplicación web incluso sin una conexión de red utilizando el manifiesto de caché .
Las aplicaciones web constan de recursos identificados por URL . Estos pueden ser HTML , CSS , JavaScript , imágenes o cualquier otra fuente que se requiera para que se renderice una aplicación web. Sus direcciones se pueden copiar en un archivo de manifiesto , que el autor de la aplicación web puede actualizar periódicamente, indicando cualquier dirección web nueva que se agregue o elimine. Al conectarse a una red por primera vez, un navegador web leerá el archivo de manifiesto HTML5, descargará los recursos proporcionados y los almacenará localmente. Luego, en ausencia de una conexión de red, el navegador web cambiará a las copias locales y renderizará la aplicación web fuera de línea.
Lo esencial
Para que las aplicaciones sin conexión funcionen, el desarrollador web debe crear un archivo de manifiesto de caché. Si la aplicación web excede más de una página, cada página debe tener un atributo de manifiesto que apunte al manifiesto de la caché. Cada página que haga referencia al manifiesto se almacenará localmente. [5] El archivo de manifiesto de la caché es un archivo de texto ubicado en otra parte del servidor. Debe publicarse con el tipo de contenido text/cache-manifest
[6].
El atributo manifest="
debe agregarse al elemento html para que funcione el archivo de manifiesto de caché. [6] Ejemplo:
< html manifest = "cache.appcache" > < cuerpo > ... cuerpo > html >
El argumento del atributo de manifiesto es una ruta relativa o absoluta al archivo de manifiesto.
Considere el archivo HTML que se proporciona a continuación. El elemento indica que un archivo llamado cache.appcache contendrá la lista de recursos (es decir, test.js, test.css) necesarios para que esta página web funcione sin conexión. Los nombres comunes para este archivo son cache.manifest y manifest.appcache.
< html manifest = "cache.appcache" > < head > < title > Test title > < script src = "test.js" > script > < link rel = "stylesheet" href = "test.css" > head > < body > Probando el archivo de manifiesto.cuerpo > html >
Sintaxis
El archivo de manifiesto debe comenzar con la línea CACHE MANIFEST
. Los comentarios comienzan con a #
, los espacios y las líneas en blanco se ignoran. [7]
A continuación se muestra un ejemplo de un archivo de manifiesto de caché.
Ejemplo 1:
MANIFIESTO DE CACHE /test.css/test.js/test.png
Este archivo de manifiesto enumera tres recursos: un archivo CSS, un archivo JavaScript y una imagen PNG. Cuando se carga el archivo anterior, el navegador descargará los archivos test.css, test.js y test.png del directorio raíz en el servidor web. [6] Como resultado, siempre que la red de uno no esté conectada, los recursos estarán disponibles para ellos sin conexión.
Los manifiestos de caché también pueden usar rutas relativas o incluso URL absolutas, como se muestra a continuación. [7] [8] [9]
Ejemplo 2:
MANIFIESTO DE CACHE/main/features.js/main/settings/index.csshttp: //files/images/scene.jpghttp: //files/images/world.jpg
Encabezados de archivos
El archivo de manifiesto de caché consta de tres encabezados de sección. [6]
- Sección explícita con el encabezado CACHE.
- Sección de lista blanca en línea con el encabezado RED.
- Sección de respaldo con el encabezado FALLBACK.
Nota: El ejemplo 1 y el ejemplo 2 anteriores no indican ningún encabezado de sección y, por lo tanto, se consideran una sección explícita de forma predeterminada.
Sección de lista blanca en línea con el encabezado RED
Ejemplo 3:
MANIFIESTO DE CACHE LA RED: /checking.cgiCACHE:/test.css/test.js/test.png
Este ejemplo consta de encabezados. La línea, RED: es el comienzo de la sección "lista blanca en línea". Los recursos enumerados en esta sección nunca se almacenan en caché y no están disponibles sin conexión. [6] Como resultado, se producirá un error cuando se intente cargar el recurso sin conexión.
Hay un cambio a la sección explícita por el encabezado CACHE: y los recursos (la hoja de estilo CSS, JavaScript y el archivo de imagen) se pueden descargar y usar sin conexión.
Sección de respaldo con el encabezado FALLBACK
La sección de respaldo en un archivo de manifiesto de caché se puede utilizar para sustituir recursos en línea que no se pueden almacenar en caché o que no se almacenaron en caché correctamente. [6]
Ejemplo 4:
MANIFIESTO DE CACHERETROCEDER:/ /offline.html LA RED:...
En el Ejemplo 4, la sección de respaldo consta de una sola línea. es decir, / /offline.html . El carácter único ( / ) antes de "sin conexión" coincidirá con cualquier patrón de URL en el sitio de uno. [6] Si el navegador no encuentra la página en el caché de la aplicación, la aplicación mostrará la página /offline.html.
Flujo de eventos
Los eventos están bajo el ApplicationCache
objeto JavaScript.
Si el navegador visita una página web, NO ha visto la página web antes y, como resultado, no reconoce el archivo de manifiesto, se producirán los siguientes eventos. [7]
Checking
Evento: ocurre cuando el navegador visita una página web y lee el atributo de manifiesto en el elemento .Downloading
Evento: descargará todos los recursos proporcionados en el archivo de manifiesto.Progress
Evento: contiene información sobre cuántos archivos se han descargado y cuántos archivos quedan por descargar.Cached
Evento: ocurre una vez que se han descargado todos los archivos y la aplicación web sin conexión está equipada para usarse sin conexión.
Si el navegador ha visitado la página web antes y reconoce el archivo de manifiesto, se producirán los siguientes eventos. [7]
Noupdate
Evento: esto tendrá lugar si el manifiesto de caché no ha cambiado.Downloading
Evento: si el manifiesto de la caché ha cambiado los recursos, los archivos se descargarán nuevamente.Progress
Evento: contiene información sobre cuántos archivos se han descargado y cuántos archivos quedan por descargar.Updateready
Evento: una vez que se completa la descarga, este evento se activa, lo que indica que la nueva versión sin conexión está lista para usarse.
Si ocurre un error en cualquier instancia de los eventos anteriores, el navegador activará un evento de error y detendrá el proceso. A continuación se muestran algunos errores que pueden ocurrir al volver a descargar recursos. [8]
- Página no encontrada ( error HTTP 404 ) o página desaparecida permanentemente (error HTTP 410).
- No se pudo descargar la página HTML que apuntaba al manifiesto. [6]
- El manifiesto de la caché cambió mientras se realizaba la actualización. [6]
- Se cambió el manifiesto de la caché, pero el navegador no descargó un recurso en el manifiesto. [6]
Ver también
Referencias
- ^ "Caché de aplicaciones como parte de la recomendación W3C" . 28 de octubre de 2014 . Consultado el 30 de mayo de 2016 .
- ^ "Uso de la caché de la aplicación - HTML: HyperText Markup Language | MDN" . developer.mozilla.org . Consultado el 11 de abril de 2021 .
- ^ "Preparación para la eliminación de AppCache" . web.dev . Consultado el 11 de abril de 2021 .
- ^ "Window.applicationCache" . Documentos web de MDN . Mozilla . Consultado el 29 de diciembre de 2020 .
- ^ Bidelman, Eric (29 de octubre de 2013). "Una guía para principiantes sobre el uso de la caché de la aplicación" . Consultado el 23 de abril de 2014 .
- ^ a b c d e f g h yo j Peregrino, Mark (2010). HTML5 en funcionamiento . O'Reilley. Archivado desde el original el 3 de octubre de 2011 . Consultado el 16 de noviembre de 2018 .
- ^ a b c d "Manifiestos W3 HTML5" . HTML5 . Consultado el 3 de abril de 2011 .
- ^ a b "Dev.Opera" . HTML5 . Consultado el 3 de abril de 2011 .
- ^ "WHATWG" . HTML5 . Consultado el 3 de abril de 2011 .
enlaces externos
- Uso de la caché de la aplicación - HTML | MDN
- HTML5: almacenamiento en caché de aplicaciones sin conexión
- HTML5 Rocks
- Alistapart: caché de aplicaciones