Caching Images with Ionic 3

Mariano Alvarez
Apr 25, 2017 · 3 min read

Ionic is one of the most famous framework around the world to develop hybrid apps using HTML, CSS, Angular. Guess what? We’ll use it to build our app!

One of the challenges that the hybrid apps have nowadays is deal with the offline mode. Yeah this can be translated to more work but at end this will give better experience to the user and improve the app performance. And come on, call an API is kind of boring and too easy :D

Let’s build our app

Start by installing and setting up our environment running these commands:

Install ionic-cli and create a new project:

npm install ionic -g --saveionic start OfflineApp

We are going to use ImgCache.js to cache the images. This beauty will do all the hard work. ImgCache.js is a library made for Cordova taking advantages of the HTML5 file API.

Before jumping into the code, we need to install a few things:

lets configure the plugins in config.xml:

In case you need more information why this is new checkout imgCache.js github.

In order to start working with imgCache.js, We’re going to create a service which be in charge to convert all the library functions into observables.

Most of the code is easy to understand, basically core function were converted into observables by using `bindCallback` function. We declare initNotifier$ variable which will help to notify the observables when the library has been initialized.

But wait, what does normalizeURlWKWview function do? WKWebview does not support file:// neither cdvfile:// protocols, so we need to change the path a little bit in order to point to the right place.

Now We’re ready to use ImgCache.js We are going to create a directive that will cache the images.

Here is a little explanation:

@Input source — image url.
@Output() loaded — will trigger an event when the image has loaded.
ngOnInit() — get image element, bind load and error events and set the src when it’s retrieved
ngOnDestroy() — remove listeners when the directive is destroyed

Run ionic serve to see it working on browser (use Chrome).


Images are downloaded and saved in the filesystem

Find the complete example here.

BTW — One thing you have to consider is that CORS must be enabled in your server otherwise the imgCache.js can’t download the images. I uploaded the images to imgur for this example. For testing purpose I’m using

Wow Wow, That’s it? Yes!! 🎉 🎉


A group of talented developers friends located in Costa…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store