Caché de aplicaciones HTML5 | TIEngranaje

La velocidad de carga en un sitio web es crucial para el éxito en línea de cualquier negocio. Con la llegada de HTML5, las empresas tienen a su disposición una nueva solución para mejorar la experiencia de los usuarios. El caché de aplicaciones HTML5 es una técnica que permite la optimización de la carga de páginas y la reducción del tiempo de espera para el usuario. En este artículo descubrirás todo lo que necesitas saber sobre el caché de aplicaciones HTML5 y cómo puede ayudarte a mejorar la velocidad de carga de tu sitio web. ¡No te lo pierdas!

HTML5 introduce un nuevo método para permitir que una aplicación web esté disponible sin que tus usuarios estén en línea. No tener conexión a Internet generalmente significa que no tiene acceso a su aplicación web. Sin embargo, con Caché de aplicaciones HTML5tener algún nivel de acceso es mejor que ninguno.

En este tutorial, veremos cómo la memoria caché de la aplicación puede almacenar recursos para ser utilizado por el navegador cuando hay sin conectividad a su sitio Cada vez es más importante que las aplicaciones basadas en web sean accesibles sin conexión. Los navegadores modernos tienen mecanismos de almacenamiento en caché, pero estos mecanismos son no siempre confiable como se podría esperar.

En su forma más simple, una aplicación web sin conexión es una colección de HTML, CSS, JavaScript, imágenes y otros recursos. almacenado localmente por el navegador. Las páginas de la aplicación web sin conexión se asignan a un archivo de manifiesto que contiene una lista de recursos sin conexión.

Un navegador web que apoya el caché de la aplicación leerá la lista de URL del archivo de manifiesto, descargará los recursos, los almacenará en caché localmente y automáticamente mantendrá las copias locales actualizadas. Cuando el navegador no puede acceder al contenido en línea, cambiar automáticamente a las copias locales en su lugar.

Compatibilidad con navegador

La memoria caché de la aplicación es compatible con todos los navegadores modernos excepto Internet Explorer.

El archivo de manifiesto

Una aplicación web fuera de línea depende de un archivo de manifiesto de caché. El archivo de manifiesto es una lista de todos los recursos a los que su aplicación web podría necesitar acceder mientras está desconectado de la red Para que el navegador descargue y almacene en caché los recursos, debe apuntar al archivo de manifiesto, utilizando un manifest atributo en su <html> elemento.

<!DOCTYPE HTML>
<html manifest="manifest.appcache">
<body>
    <!-- Content -->
</body>
</html>
CACHE MANIFEST
# 2012-01-01 v1.0.0
# This is a comment

CACHE:
/css/theme.css
/js/script.js
/images/logo.png

FALLBACK:
/ /offline.html

NETWORK:
*

Cada directiva se coloca en una nueva línea, con comentarios precedidos por un hash (#). la primera línea, CACHE MANIFEST, le dice al navegador que este es un archivo de manifiesto. Las líneas mayúsculas con dos puntos son Encabezados de sección. Hay tres secciones diferentes en un archivo de manifiesto:

CACHE

La lista de direcciones URL explícitas para solicitar y almacenar. Puede enumerar las URL relativas o la ruta completa si el recurso que está almacenando en caché es externo a su sitio web.

RETROCEDER

El FALLBACK sección indica lo que el navegador debe hacer cuando un usuario fuera de línea intentos de acceder un archivo no almacenado en caché. En el ejemplo anterior, el archivo, offline.html se presentará al usuario cuando se intente acceder a todos los archivos no almacenados en caché.

RED

El NETWORK sección especifica qué archivos deben nunca ser almacenado en cachéy no estará disponible sin conexión. Se puede usar un asterisco para indicar que todos los demás recursos/archivos requieren una conexión a Internet.

Una vez que una aplicación se almacena en caché, permanece en caché hasta que ocurra uno de los siguientes:

  • El usuario borra la memoria caché del navegador.
  • Se modifica el archivo de manifiesto.
  • La memoria caché de la aplicación se actualiza mediante programación

Nota: La caché de una aplicación solo se actualiza cuando su cambios en el archivo de manifiesto. Si edita un archivo HTML, una imagen o cambia una función de JavaScript, esos cambios no se volverá a almacenar en caché. Actualizar la fecha y la versión en una línea de comentarios es una forma de hacer que el navegador vuelva a almacenar en caché sus archivos.

Sirviendo el Manifiesto

Puede hacer referencia a un archivo de manifiesto en una página web agregando el manifest atribuye a tu apertura <html> etiqueta. El navegador almacenará en caché las páginas que incluir este atributo, así como las que especifiques en el propio manifiesto. Por lo tanto, no es necesario incluir todas las páginas de su sitio en el propio archivo de manifiesto.

A medida que sus usuarios naveguen por las páginas de su sitio, aquellas páginas que incluyan este atributo también se incluirán en la memoria caché. incluso si no están enumerados en el archivo de manifiesto.

El archivo de manifiesto se debe servir con un tipo MIME de text/cache-manifest. si estás usando apache como su servidor web, agregue esto a su .htaccess archivo:

AddType text/cache-manifest .appcache

Para IISpuedes agregar esto a tu web.config archivo:

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" />
    </staticContent>
</system.webServer>

Conclusión

La memoria caché de la aplicación es poderosa pero Cerciorarse usted piensa y planifica apropiadamente para su CACHE, FALLBACKy NETWORK secciones para proporcionar una experiencia fuera de línea adecuada a sus usuarios.

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Deja un comentario