NorfiPC
NorfiPC » Posicionamiento web » Las aplicaciones web

Como hacer las páginas web cacheables, que funcionen offline sin conexión a internet

Lograr que una página permanezca guardada con todos sus elementos en la cache del navegador, para poder cargarla y verla correctamente offline sin conexión a la red. Funcionamiento de las aplicaciones web. Como crear tus propias aplicaciones para compartirlas en internet.
Aplicaciones web que funcionan offline

En el internet de hoy en el que gran porciento de los usuarios usan dispositivos portables como teléfonos celulares y tabletas para navegar en la red, puede ser necesario para algunos conocer cómo crear páginas que el usuario pueda verlas con todos los elementos que contienen, aun estando sin conexión a internet.
Por supuesto que esta función no es factible implementarla en todas las páginas de un sitio, si fuera así el usuario solo accedería a nuestro sitio una sola vez y perderíamos visitantes.
Esta función puede resultar muy útil para páginas con contenido específico, se conocen como aplicaciones web ya que funcionan de forma similar a una aplicación, permitiendo al usuario interactuar con su contenido aun sin estar conectados a la red.
Más abajo puedes encontrar ejemplos prácticos de páginas en este sitio que utilizan esta función.

¿Qué es la cache del navegador, como hacer una página cacheable?


Todos los navegadores poseen una cache o espacio en memoria donde guardar los elementos de las páginas, con el objetivo de que al volver a cargarlas no sea necesario volver a descargarlo todo de internet.
De esa forma se acelera la navegación y se consume menos ancho de banda.
El tiempo que deben permanecer en dicha cache los elementos de una página, lo establece el servidor web donde están almacenadas. Es enviado al navegador en los encabezados, al realizar este la petición correspondiente.
En el servidor Apache (la mayoría de los servidores de internet lo utilizan) se usan los parámetros: "Expires" y "Cache-Control: max-age" para definir el tiempo que debe perdurar en la cache del navegador los elementos de una página. Este intervalo también se conoce como tiempo de frescura (freshness lifetime).
Para hacer un sitio más rápido se recomienda usar un intervalo largo cuando se trata de elementos estáticos y que consumen mucho ancho de banda como imágenes, scripts, etc. por ejemplo un mes o más aun.
En otra pagina de este sitio puedes encontrar información mas detallada necesaria para saber como configurar los encabezados: Como hacer más rápida la carga de una página web en un servidor Apache


Hacer que el navegador cargue el contenido guardado en cache offline


El objetivo de guardar en cache datos de las paginas, es solo para lograr que carguen más rápido en el navegador, cuando se hace la petición de una página ya vista anteriormente.
Para lograr que el contenido se muestre offline, sin estar conectado a la red se necesita un método diferente, debemos convertir nuestra página en una aplicación web.
Es algo sencillo, consiste en utilizar en el servidor un archivo de manifiesto que acompañe a la página, en el que se le indica al navegador los archivos que debe guardar y tenerlos a mano.

¿Qué es un archivo de manifiesto?


Un archivo de manifiesto es solo un pequeño archivo de texto plano con la extensión: .manifest
Se declara en la página su nombre y debe estar situado en su misma ubicación.
Ejemplo de un archivo de manifiesto, si lo utilizara en esta misma página (solo un ejemplo)
CACHE MANIFEST

como-hacer-paginas-web-cacheables-funcionen-offline.html
../style/styleblue.css
../img/icon/aplicaciones-web-offline.jpeg
../js/1update-cache.js
Dicho archivo debe contener ante todo una primera línea: CACHE MANIFEST
A continuación dejar un espacio e ir relacionando todos los archivos que se deben guardar, comenzar por la misma página, si tiene un archivo de estilo, scripts, imágenes, etc.
La última línea en este ejemplo, es una treta para refrescar el contenido del la página cuando sea necesario, lee mas abajo como usarlo.


Declarar el archivo de manifiesto en la página web


Para que el navegador cargue y guarde los datos necesarios, es necesario incluir la etiqueta manifest con el nombre del archivo en la declaración de HTML al comienzo del código de la página.
Hazlo de la siguiente forma:
<!DOCTYPE html>
<html lang="es" manifest="pagina.manifest">
<head>
</head>
En la siguiente imagen puede verse el archivo de la página y al lado el archivo de manifiesto, así como su estructura.
Estructura del archivo de manifiesto de una aplicacion web


Ejemplo práctico de una página web que funciona offline


La siguiente página de este sitio, ha sido creada con el objetivo que los usuarios puedan tener en el móvil una lista de los comandos usados en la consola de Windows.
La pretensión es que puedan cargarla solo una vez y después consultarla cuando sea necesario, de forma tal que se muestre correctamente.
Fue hecha pensando en los móviles, pero el sistema funciona perfectamente en navegadores de escritorios como Firefox.
En ese caso recibirás una advertencia al cargarla:
Este sitio web ofrece archivar datos en el equipo para usarlo en modo sin conexión ¿Permitir?
Pruébala en el siguiente vinculo (abre en una nueva pestaña o ventana, dependiendo del navegador usado)
Lista de los comandos de Windows para móviles y celulares
➔ Desde un móvil o una tableta puedes introducir en el navegador la dirección acortada: bit.ly/listacomandos
➔ También puede usar el siguiente código QR en caso que tengas un lector instalado en el móvil.
Codigo QR
Cuando termines de cargar este artículo, desconéctate de la red y prueba cargar dicha página usando el vínculo guardado y comprobarás que funciona correctamente, incluyendo la imagen del móvil que incluye (Un Nexus).


Las aplicaciones web de internet


La página anterior es una aplicación web (offline web aplication), usa las ventajas y beneficios que ofrece el uso de HTML5 en las páginas web, la última especificación de HTML que incluye nuevas funciones muy útiles.
Estas aplicaciones permiten al usuario seguir interactuando con el contenido de las páginas y documentos aun sin conexión.
De esta forma el usuario puede acceder al correo electrónico y otras funcionalidades, el mismo sistema es usado por Google en GMail y en otros servicios como Google Reader.
Si sientes curiosidad los datos son guardados por el navegador en la siguiente ubicación del equipo:
✓ En Google Chrome en la carpeta: Application Cache, situada en el directorio: User Data
✓ En Firefox en la carpeta OfflineCache, situada en: AppData\Local\Mozilla\Firefox\Profiles
En la siguiente página puedes leer sobre muchos de estos beneficios: Cómo y por qué usar HTML5 en las páginas web


¿Cómo actualizar el contenido de la página guardada en cache?


La página funciona offline, al estar conectado al red si se refresca el navegador, comprobará si existe alguna referencia nueva en el archivo manifest en mi sitio, si no es así, el navegador no cargará absolutamente nada y seguirá mostrando solo el contenido almacenado.
¿Cómo lograr si hacemos cambios en el contenido de nuestra página, que el navegador lo muestre?
Para eso es imprescindible modificar el contenido del archivo manifest.
Bastará cambiar una mínima referencia, si es así el navegador del usuario reemplazará completamente todo el contenido guardado en la cache.
Yo personalmente uso en el archivo manifest, referencia a un archivo js vacío, cuando incluyo contenido nuevo en la página solo necesito cambiar su ruta (basta un carácter), para que el navegador cargue una nueva cache.
Pueden utilizarse otros métodos.

Configurar el servidor para que funcionen las aplicaciones web


En Apache
Si usas el servidor Apache es necesario un pequeño ajuste en la configuración del servidor.
Puede hacerse agregando la siguiente línea en el contenido del archivo .htaccess:
AddType text/cache-manifest .manifest
Si no sabes que este archivo, lee la siguiente pagina: ¿Qué es el archivo .htaccess en Apache, como configurarlo?

En Internet Information Services
Si usas el servidor IIS (Internet Information Services) puedes hacerlo en la herramienta: Tipos MIME en su Panel de control.
Para eso haz lo siguiente:
• En el Panel de administración abre la herramienta Tipos MIME
• Clic derecho y escoge "Agregar"
• En extensión de nombre de archivo escribe: .manifest
• En Tipo MIME escribe: text/html
• Aceptar
Lee más información en la siguiente página: Como instalar, configurar y usar el servidor IIS en Windows


Otras opciones


Pueden utilizarse diferentes opciones en el código de la página para mostrarle al usuario un mensaje o para ejecutar diferentes acciones cuando la cache guardada sea refrescada.
Sobre el uso de las aplicaciones web puedes encontrar información adicional en Whatwg.org: Offline Web applications — HTML Standard

Otras páginas en este sitio que funcionan sin conexión a internet


Algunas de nuestras páginas son sencillas herramientas, creadas con el objetivo de ofrecerles a nuestros usuarios funcionalidades extras, sin que sea necesario descargar aplicaciones al equipo ni instalar programas adicionales de forma innecesaria.
Un ejemplo es la siguiente página que usa HTML5 para poder detectar los datos que ofrece el GPS, en los dispositivos que lo incluyan.
Ver la ubicación y la localización que muestra el GPS en el iPhone u otro teléfono celular
La siguiente página es una sencilla guía de direcciones de sitios web para usarla en el celular, la que debemos ir incrementando los links que ya incluye:
Guía de direcciones de páginas y sitios de internet para el celular

Crear tus propias aplicaciones web para internet


Todo el que sea aficionado al diseño web puede crear todo tipo de aplicaciones usando esta técnica, pueden ser sencillos juegos o diversas utilidades.
Mediante CSS se puede experimentar con diferentes estilos, de forma tal que no difiera en nada de las Apps para el iPhone o para Android.
La parte que por lo general se hace más difícil para algunos, es configurar el tipo MIME en el servidor, en Apache es sencillo, siempre que se tenga acceso al archivo. htaccess.
Mediante HTML5 crear aplicaciones web está al alcance de cualquier entusiasta, únete y participa.

Actualización
El método usado actualmente para lograr que las páginas funcionen offline, sin conexión a internet, es usar la funcionalidad de Service Workers.
Lee más información actualizada en el siguiente artículo: Como usar Service Workers en páginas que funcionen offline

Páginas relacionadas