Las aplicaciones web deben ser accesibles sin conexión a Internet. Casi todas las aplicaciones basadas en web funcionan en modo en línea. Por lo tanto, la versión actual de HTML proporciona la funcionalidad para trabajar con la aplicación basada en web en modo en línea y fuera de línea. HTML5 proporciona la funcionalidad de caché de aplicaciones que permite que una aplicación web se ejecute sin Internet.
Antes de entender Application Cache, comprendamos qué es HTML:
HTML significa lenguaje de marcado de hipertexto (HTML) para desarrollar aplicaciones y sitios web basados en la web. La nueva versión de HTML proporciona una funcionalidad diferente con las tecnologías de Internet. También admite video y audio, mientras que HTML no lo admite.
Caché de aplicaciones en HTML5: HTML5 proporciona la funcionalidad de caché de aplicaciones que permite que una aplicación web se ejecute sin Internet. Mediante el uso de la interfaz de caché de la aplicación, el navegador de Internet almacena en caché los datos y los pone a disposición del usuario en modo fuera de línea. Cree una aplicación web sin conexión, utiliza un archivo de manifiesto.
Sintaxis:
<html manifest=”file_name extension_of_file”>
Implementación: Cree un archivo HTML. Luego agregue el atributo manifiesto en la etiqueta del documento del archivo HTML. El archivo de manifiesto contiene la extensión.appcache.
<html manifest="demo.appcache">
¿Cómo usar la caché de aplicaciones?
Comprendamos cómo usar la memoria caché de la aplicación con la ayuda del enfoque.
Acercarse:
- Crear un archivo de manifiesto
- Cree un archivo HTML y agregue una etiqueta de atributo de manifiesto. ejemplo index.html
- Cree otro archivo HTML y vincúlelo con el archivo HTML principal.
Paso 1: Cree un archivo de manifiesto: un manifiesto es un archivo que sugiere a los navegadores qué datos almacenar como caché. Este archivo comienza con CACHE MANIFEST. Aquí, ‘#’ muestra un comentario.
- archivo de manifiesto
HTML
CACHE MANIFEST CACHE: # shows pages index.html # contain style and scripts css/theme.css js/jquery.min.js js/default.js # shows images /favicon.ico images/logo.png # network session NETWORK: login.php FALLBACK: //offline.html
Propiedades: el archivo de manifiesto contiene tres secciones diferentes:
- MANIFIESTO DE CACHE: Almacenó datos en caché para la descarga por primera vez.
- RED: Solo está disponible en modo online.
- FALLBACK: archivo en páginas de respaldo si una página no está disponible.
Paso 2: agregue el atributo de manifiesto en el archivo HTML: antes de agregar el archivo de manifiesto de caché en HTML, verifique lo siguiente:
- Verifique que el servidor web esté configurado para servir los archivos de manifiesto o no.
- Cargue el archivo de manifiesto de caché.
- Agregue un atributo de manifiesto al archivo HTML.
Ahora tomemos un ejemplo y entendamos con la ayuda de él.
Ejemplo: Siga los siguientes pasos:
Paso 1: cree un archivo, guárdelo como index.html y agregue un atributo de manifiesto en la etiqueta HTML.
HTML
<!DOCTYPE html> <html manifest="demo.appcache"> <body text="red"> <center> Application Cache In HTML 5. <p> <a href="page.html">Click Here</a>, This page contain data even offline mode . </p> </body> </html>
Producción:
Caché de aplicaciones en HTML5
Paso 2: Ahora, cree otro archivo HTML y guárdelo como page.html.
HTML
<!DOCTYPE html> <html manifest="demo.appcache"> <body text="green"> <h3> <center> Welcome to GeekForGeek. <p>A computer science portal for geeks. </p> <p>Go Offline and refresh page. </p> </center> </h3> </body> </html>
Caché de aplicaciones en HTML5
Explicación: El archivo HTML principal (index.html) contiene un enlace de la página siguiente. Cuando el usuario haga clic en ese enlace, se ejecutará la siguiente página. El archivo principal contiene un atributo de manifiesto, por lo que incluso si el usuario se desconecta y actualiza la página, mostrará el contenido de esa página. Todo esto funciona debido a la memoria caché de la aplicación.
Producción:
Caché de aplicaciones en HTML5
Ventaja:
- Modo sin conexión: los usuarios pueden usar aplicaciones sin Internet o sin conexión.
- Menos espacio: las páginas web ya están en caché, por lo que ocupan menos espacio.
- Aumentar la velocidad: las páginas web contienen datos en caché. los datos almacenados en caché son locales, por lo que se cargan rápido
- Carga del servidor reducida: el navegador web solo descargará datos si está actualizado en el servidor. También disminuye las requests HTTP.
- Navegador moderno: la función Caché de HTML 5 está disponible en todos los navegadores web modernos.
Desventaja:
- Navegador antiguo : no disponible en una versión anterior de HTML.
Publicación traducida automáticamente
Artículo escrito por reshmapatil1227 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA