En este artículo, discutiremos qué es un respaldo en el caché de la aplicación. Fallback es una sesión en el archivo Mainfest, por lo que antes de pasar directamente al respaldo, primero veamos una breve descripción del caché de la aplicación y el archivo Mainfest.
Introducción: la caché de aplicaciones permite a los desarrolladores hacer que sus navegadores web funcionen tanto en línea como fuera de línea. La página web que contiene Caché de aplicación reduce el consumo de ancho de banda y también carga la página web más rápido que una página web normal. Proporciona una facilidad para que los desarrolladores seleccionen qué datos almacenar como caché o no. Normalmente, estas páginas web se cargan desde el almacenamiento local en lugar del servidor.
Una ventaja más de la memoria caché de la aplicación es que se carga rápidamente y muestra los datos en modo sin conexión, incluso si el usuario está desconectado e intenta actualizar la página web.
Para crear una caché de aplicación, el usuario debe crear el primer archivo de manifiesto de caché. Entonces, comprendamos el concepto del archivo de manifiesto.
Archivo de manifiesto de caché: el manifiesto de caché de la aplicación es un archivo de texto que contiene una sección diferente que sugiere a los navegadores qué recursos almacenar como caché. Este archivo debe contener la extensión .appcache o .manifest . Este archivo siempre comienza con el encabezado CACHE MANIFEST.
Para permitir archivos .appcache en el servidor, el usuario debe incluir el tipo de medio correcto Tipo MIME en el archivo .htaccess
Puede declarar el tipo de medio de esta manera:
AddType text/cache-manifest appcache
Sintaxis:
<html manifest=”file_name extension_of_file”>
...
</html>
Implementación: cree un archivo HTML y agregue el atributo de manifiesto en la etiqueta del documento del archivo HTML. El archivo de manifiesto contiene la extensión como .appcache.
<html manifest="demo.appcache">
...
</html>
Hay tres secciones de este archivo:
- CACHE
- LA RED
- RETROCEDER
CACHE: El caché es la sesión predeterminada en el caché de la aplicación. Contiene una lista de recursos como páginas web, hojas de estilo, JavaScript, imágenes y gifs. Este recurso se almacenará en caché inmediatamente después de su primera descarga.
Esta sección siempre comienza con el encabezado CACHE MANIFEST junto con el archivo de recursos. Como sigue
CACHE MANIFEST images/logo.png scripts/myscripts.js gif /main.js
Cuando se carga la sección CACHE, el navegador descarga los archivos bajo el encabezado CACHE MANIFEST. Estos archivos son accesibles incluso si un usuario está desconectado.
En el ejemplo anterior, el archivo bajo el encabezado CACHE MANIFEST se almacenará en caché. Si los archivos de manifiesto o el recurso especificado en la lista anterior no pueden descargar el recurso, todo el proceso del caché fallará.
Ejemplo: Cree un archivo HTML y asígnele el nombre cache.html. Luego, agregue este archivo a la sección CACHE del archivo demo.appcache, para que pueda almacenar datos en caché en modo fuera de línea.
Este archivo cargará o mostrará datos incluso en modo fuera de línea.
HTML
<!DOCTYPE html> <html manifest="demo.appcache"> <body> <h3>GeekforGeek!</h3> <h3>Cache Session Will Display Data in Offline Mode.</h3> </body> </html>
Producción:
RED: contiene archivos que están en la lista blanca y que requieren que la red cargue o muestre sus datos. Si la red no está presente, no se mostrarán los datos. si algún archivo no se menciona en el manifiesto, no mostrará sus datos. Porque los archivos que no se mencionan tienen mayor prioridad que los archivos que no se mencionan. para este desarrollador, debe agregar * en la sección de red para indicarle al navegador web que cargue todos los demás recursos que no se mencionan explícitamente en el archivo.
Nota: Aquí * se puede usar una vez.
NETWORK: *
Ejemplo: Cree un archivo HTML y asígnele el nombre network.html. agregue este archivo en la sección RED de la demostración. appcache para almacenar en caché los datos que solo estarán disponibles en el modo en línea.
Este archivo cargará o mostrará datos en modo en línea.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <p>Network Session will not work in offline mode</p> </body> </html>
Producción:
Fallback: Especifica páginas de respaldo si un recurso es inaccesible. Contiene dos URL.
- Recurso.
- Retroceder
Estas dos URL deben ser del mismo origen y relativas.
Los desarrolladores pueden capturar URL y prefijos de URL específicos. por ejemplo:
“images/photos/” capturará los errores de las URL que sean “images/photos/kitten/img.jpg”.
CACHE MANIFEST FALLBACK: / /offline.html
Aquí, un solo carácter / antes de ‘offline.html’ coincidirá con cualquier patrón de URL en el sitio de uno.
Si los navegadores fallan en este proceso, la aplicación muestra la página /offline.html. Especifica la página de respaldo que los navegadores web deben usar si el recurso es inaccesible.
Ejemplo: Cree un archivo HTML y guárdelo como offline.html y agregue este archivo a la sección FALLBACK de la demostración. archivo appcache con fallback.html. En el modo fuera de línea, el archivo offline.html se reemplazará con el archivo fallback.html.
- sin conexión.html
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks <p>User is online mode</p> </h1> </body> </html>
Producción:
- respaldo.html
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <p>User is in Offline mode.</p> </body> </html>
Producción:
Ventaja:
- Aplicación de Android: útil en aplicaciones móviles, ya que las redes móviles proporcionan poco ancho de banda.
- 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 de la versión anterior: no es útil en el navegador de la versión anterior.
Publicación traducida automáticamente
Artículo escrito por reshmapatil1227 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA