After developing an App using IONIC 2, I realized that all my pages require loading through REST API. This can be frustrating as they get reloaded in every tab even when there are no updates.
To improve this issue, I am planning to implement a caching system in my App. The idea is to save every http request after the first time along with the current timestamp, and then load the content through the REST API only if it has been more than 2 hours since the last request.
I tried using a plugin called https://github.com/Nodonisko/ionic-cache, but unfortunately, I encountered some errors after installation.
While researching, I found that using Sqlite for caching might be a better option, but I am not entirely sure about it. Any suggestions from experts would be greatly appreciated.
Below is the code for my home page:
import { WebService } from '../shared/services/web.service';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [ WebService ]
})
constructor(
public navController: NavController,
private webService: WebService ) {}
loadPosts() {
this.webService.getPosts(query)
.subscribe(data => {
key.posts = data;
loader.dismiss();
}, (err) => {
//Fail and log the err in console
loader.dismiss();
console.log("Some Issue");
let toast = this.toastController.create({
message: 'There is some issue with network',
duration: 10000
});
toast.present();
});
}
And here is the code for my service provider page:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Config } from '../../../../app/app.config';
import 'rxjs/add/operator/map';
@Injectable()
export class WordpressService {
constructor(private storage: Storage, private http: Http, private config: Config ) {}
public getPosts(query) {
query = this.transformRequest(query);
let url = this.config.webApiUrl + `/allposts?${query}&_embed`;
return this.http.get(url)
.map(result => {
return result.json();
});
}
}
Looking forward to expert advice. Thanks, Sanny