Caching requests and more with Ionic 2

Today I needed a client side caching plugin for Ionic 2. I'm currently developing an app for a customer, and wanted to speed things up a little and save bandwidth by the way.

Caching with RxJs

Since I'm using RxJs with Observables I searched for a solution or an operation named something like cache() but didn't find one. After a bit of googling I found this article: http://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0

The solution provided there is the following:

  getTools(): Observable<Tool[]> {

    if (!this.tools){
      const queryUrl: string = this.BASE_URL + '/tools';

      this.tools = this.http.get(queryUrl)
        .map((response: Response) => {
          return (<any>response.json()).items.map(item => {
            return new Tool(item.sys.id, item.fields.name);
          });
        })  
        .publishReplay(1)
        .refCount();
    }

    return this.tools;
  }

Although this works, I'm missing the time based cache eviction strategy. This is basically in-memory only and doesn't survive a page reload.

npm package: ionic-cache

Then I found this great project which seemed to be exactly what I'm searching for: https://github.com/Nodonisko/ionic-cache

From the commits it seems pretty active and well documented. So I gave it a try and am very happy with it. Thanks for developing this great plugin!

Patrick Meier

I am an entrepreneur and software developer, building scalable, distributed web systems with Java, NodeJs and AngularJs.

Weiden, Germany