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.
The full quick win with snippets is only available to Ionic Academy members.
Join now for
- Unlimited access to all quick wins
- Library of 40+ step-by-step video courses
- Support for Ionic questions via Slack & private community
can i use this plugin to cache image/videos
Is there any github page for this project for further benefit? thanks for the great info though.. 🙂
Do you have any recommendations for showing a loader when the page is initially loaded as I currently see a blank page until its loaded.
I do have it “working” but its not the best way so any help will be much appreciated.
this.cache.getItem(this.catss)
.then((err) => {
let ttl = 180;
this.cats4 = this.cache.loadFromObservable(this.catss, req, this.catss, ttl);
}).catch((err) => {
let loading = this.loadingController.create({spinner: ‘dots’,cssClass: ‘loadcss’,showBackdrop: false});
loading.present().then(() => {
let delayType = ‘all’;
let ttl = 60 * 60 * 12;
this.cats4 = this.cache.loadFromDelayedObservable(this.catss, req, this.catss, ttl, delayType);
loading.dismissAll();
});
You could use the loading controller and present the loading spinner before making your request and then dismiss it after the observable completes.