¿Aplicación administrable offline? Conociendo el caché de aplicaciones

Hace unos meses tuvimos un requerimiento muy peculiar, desarrollar un catálogo de productos el cual fuera administrable, con la particularidad que tenía que funcionar incluso cuando no hubiera Internet.

Los pasos que decidimos fueron los siguientes:

Manejar el Backend y Frontend por separado

Toda la comunicación se realizaría por medio de archivos json. En lugar de consumir servicios, el backend guardaría archivos "físicos" y no se crearían servicios rest.

Almacenar todo por medio del "cache de aplicaciones"

El archivo del manifiesto del caché o como le llamaremos cache manifest, debe incluir listadas las imágenes, htmls, css y js del sitio, es decir, todos los archivos estáticos, en cuanto a maqueta y funcionalidad.

En segundo lugar consideramos listar los json generados por el backend, ya que éstos serán los que consumiremos cuando no esté conectada nuestra aplicación a internet.

Viene la parte interesante, ¿Cómo hacer que la parte administrable sea almacenada?

La respuesta es muy sencilla, el cache manifest debe ser actualizado cada vez que haya un cambio en el administrador, es decir, si se agregaron imágenes en el administrador, deben ser listadas en este mismo archivo (recomiendo hacer un ciclo que pinte todas las imágenes de la carpeta de uploads del admin).

Incluso cuando exista una conexión a Internet el browser seguirá tomando la versión guardada en caché, a menos que encuentre una versión diferente declarada en el manifiesto. Por esta razón, al igual que las imágenes, la versión del cache manifest y la fecha deben de ser cambiadas cada vez que una modificación en el admin suceda. CACHE MANIFEST #2017-01-11 v1.0.0

Para lograr que todo funcione perfectamente debes considerar algunas cosas:

  • En la etiqueta html debe de estar declarado el archivo en el cual se declararan todas las cosas a guardar <html manifest="demo.appcache">
  • El archivo debe ser servido con las cabeceras correctas, en este caso es text/cache-manifest, esto se configura desde el server y es muy importante, ya que de no estar servido de esta forma, el browser no lo identificará como archivo de caché y no servirá de mucho.
  • Siempre intenten que su sitio sea ligero, ya que la mayoría de los browsers cuentan con un límite de 5MB permitidos.

Una cosa más:

El caché de aplicaciones no funciona en modos incógnitos (para que no crean que no funciona), por lo que al momento de probar, deberán estar borrándolo continuamente. En chrome pueden ingresar aquí y borrarlo fácilmente.

Dejo un ejemplo de cómo debería lucir su archivo cache manifest.

Cabe mencionar que algunos navegadores marcan como deprecated el uso de cache manifest, dado que los service workers serán la opción mas conveniente para implementar una aplicación offline. Sin embargo, actualmente aún no está estandarizado este método para todos los navegadores.

Imagen de compatibilidad Service Workers

Más adelante haremos pruebas con ellos y haremos un review de cómo nos fue implementándolos :)