Ionic Caching Service [v3]

By default your Ionic app comes without specific HTTP caching, but sometimes it can really make sense to cache your requests for a duration to make help save the data volume of your users.

In this Quick Win we will add a super cool plugin called Ionic Cache (I think it’s no official plugin yet) to our Ionic app and perform some requests to the public Star Wars API.

Setting up the Caching App

First of all we create a blank new Ionic app, then we install the caching plugin. The plugin makes use of the Ionic Storage, so if you have perhaps still an old app you might need to install the storage as well. If you have a new app it will already be installed but running the install command won’t do any harm. Go ahead and run:

ionic start ionicCaching blank

cd ionicCaching

npm install ionic-cache @ionic/storage --save

To make use of our caching plugin we need to add it to our imports, and as we want to make HTTP requests as well we need to add the HttpModule as well. Open your src/app/app.module.ts and insert:

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { CacheModule } from 'ionic-cache';

import { HttpModule } from '@angular/http';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

HttpModule,

IonicModule.forRoot(MyApp),

CacheModule.forRoot()

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

We will keep it simple and use the Http and caching directly in our page. Normally you would of course create a provider for your logic and external calls, so keep that in mind.

Global Caching Settings

Before we dive into the details of our caching, we can make 2 changes at the top level of our app to configure some general properties of the caching service. First, we want to set a general Time to live (TTL) for our cached data. You can always override this for specific requests, but setting some general time here is a good idea.

Also you can set that your app should keep the cached data even when the device is offline. Of course this heavily depends on the use case of your app and how up to date the data needs to be, but it’s a very nice functionality so your users can still use the app even when they are online because of bad connection or something else!

You can add these 2 settings to your src/app/app.component.ts like this:

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

import { CacheService } from "ionic-cache";

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = HomePage;

constructor(platform: Platform, cache: CacheService, statusBar: StatusBar, splashScreen: SplashScreen) {

platform.ready().then(() => {

// Set TTL to 12h

cache.setDefaultTTL(60 * 60 * 12);

// Keep our cached results when device is offline!

cache.setOfflineInvalidate(false);

statusBar.styleDefault();

splashScreen.hide();

});

}

Let’s get to the actual Ionic caching now!

Caching HTTP Requests

As said before we will make a simple Http GET requests, and inside our view we need a button to make that call and another one to invalidate our cache so we can play around with the caching function a bit.

Once we got the data we display it inside a list with items, and to add a very useful addition we add the ion-refresher to allow pull to refresh. On pull to refresh, like in most apps, we definitely want to load new data so this acts like some force reload for our cached data as well! Now open your src/pages/home/home.html and change it to:

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-refresher (ionRefresh)="forceReload($event)">

<ion-refresher-content refreshingText="Reload from API...">

</ion-refresher-content>

</ion-refresher>

<button ion-button full (click)="loadFilms()">Load Films</button>

<button ion-button full color="danger" (click)="invalidateCache()">Invalidate Cache</button>

<ion-list>

<ion-item *ngFor="let film of films | async">

</ion-item>

</ion-list>

</ion-content>

Finally we get to the most interesting piece of code of this tutorial which is the controller of our page wich makes use of the Ionic cache.

There are a few interesting points here so let’s go through them one by one:

The loadFilms function is the main actor here and takes care of loading the data. Inside the .map() block we also show a little toast notification to display that we just made a real Http call and return the correct JSON field from the response.

Here we also set a custom TTL of 5 seconds, of course just for testing but also so you see how to add this parameter.

The filmsKey is a variable we use to access the position of our cached response, which helps us inside the invalidateCache() function to easily clear this entry so it will be removed from the storage!

Inside the loadFilms function we then check whether a refresher was passed, which is our sign here to make a force reload.
If none was passed we use the loadFromObservable() function of the Ionic cache which returns an Observable just like a normal requests, but it will cache the results before returning them to us!

This line is enough to get started with caching, which is why I really love this package.

Finally if we need to force reload the data, we use the loadFromDelayedObservable() where we specify a delay Type as the last parameter. In our case this will trigger a true Http call even if the result is already cached.

Now open your src/pages/home/home.ts and change it to:

import { Http } from '@angular/http';

import { CacheService } from 'ionic-cache';

import { Component } from '@angular/core';

import { NavController, ToastController } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

films: Observable<any>;

filmsKey = 'my-films-group';

constructor(public navCtrl: NavController, private http: Http, private cache: CacheService, private toastCtrl: ToastController) { }

// Load either from API or Cache

loadFilms(refresher?) {

let url = 'http://swapi.co/api/films/';

let req = this.http.get(url)

.map(res => {

let toast = this.toastCtrl.create({

message: 'New data from API loaded',

duration: 2000

});

toast.present();

return res.json().results;

});

// Specify custom TTL if you want

let ttl = 5;

if (refresher) {

// Reload data even if it is cached

let delayType = 'all';

this.films = this.cache.loadFromDelayedObservable(url, req, this.filmsKey, ttl, delayType);

// Hide the refresher once loading is done

this.films.subscribe(data => {

refresher.complete();

});

} else {

// Load with Group key and custom TTL

this.films = this.cache.loadFromObservable(url, req, this.filmsKey, ttl);

// Or just load without additional settings

// this.films = this.cache.loadFromObservable(url, req);

}

// Invalidate for a specific group key

invalidateCache() {

this.cache.clearGroup(this.filmsKey);

}

// Pull to refresh and force reload

forceReload(refresher) {

this.loadFilms(refresher);

}

That’s quite some code but the actual caching mechanism is really easy to add!

Once you run your app you can observe the storage of your application withe the debugging tools and you will see something like this:

This means the result of our Http call is stored under the key (the URL of the request) with the additional goup key, a time to live and the actual value.

If you think about it, actually caching isn’t that hard, right?

You can also find a video version of this Quick Win below!