Cachear imágenes en Ionic 3, aplicaciones Offline
Cachear imágenes en Ionic 3, aplicaciones Offline
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!



En este tutorial vamos a ver cómo podemos cachear imágenes en Ionic 3, esta funcionalidad puede ser muy necesaria cuando estemos trabajando con aplicaciones offline y es compatible con Android y iOS.

Nosotros vamos a utilizar este repositorio y vamos a seguir los pasos de este tutorial que son del autor de este package.

Cachear imágenes en Ionic 3 con imgcache

Lo primero que necesitamos es tener un proyecto listo e instalar imgcache, una librería para cordova que necesitamos para conseguir la deseada funcionalidad.


Para evitar colisiones con el compilador de typescript, vamos a abrir el archivo declarations.d.ts y vamos a añadir lo siguiente.


Algunos requisitos que debemos cumplir para poder cachear imágenes en Ionic 3 es la de instalar los plugins cordova-plugin-file-transfer y cordova-plugin-file, para instalarlos simplemente ejecuta el siguiente comando.


Para poder cachear las imágenes debemos atacar el evento platform.ready de Ionic 3, así que vamos a abrir el archivo app.component.ts y vamos a modificar el código por el siguiente.


Ahora vamos a crear un provider llamado imgcache para poder interactuar con imgcache, así que primero ejecutamos el siguiente comando.


Y a continuación reemplazamos el código por el siguiente.


Para poder finalizar todo el código que contiene la funcionalidad de caché de imágenes, vamos a crear la directiva LazyLoad y modificamos el código.


Para utilizar toda la funcionalidad que hemos definido hasta ahora simplemente debemos utilizar la directiva lazy-load, asegúrate que la has cargado de forma correcta en tus módulos, una vez hecho simplemente puedes hacer lo siguiente en tus páginas y componentes.


Así de sencillo es cachear imágenes en Ionic 3 utilizando la librería imgcache, espero que te haya gustado y recuerda que tienes un curso completo de Ionic 3 para poder avanzar más rápidamente.

Curso de Ionic 3

En cursosdesarrolloweb.es tenemos cursos completos sobre desarrollo web y desarrollo móvil.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.