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!
