Caching data in your mobile and web apps is a huge boon, so making use Ionic’s storage system will save you countless server request, significantly reduce server load and noticeably speed up your app’s UI. With all of these exciting benefits to be had it can be a real ball buster when it does not work. Luckily for you I have recently recovered from a case of smushed balls due to this very thing, and I am here to provide you with the cure.
Here are a few solutions you can try to get your cache up and running for those of you using the ionic framework (2+)
Try Stating Fresh
If you are still in the "development" phase of your app, it is my experience that a large portion of the time most caching issues you encounter can be easily solved by first deleting the app from your device, and then installing a fresh version of your apk from Android Studio. This is the very first thing you should try before moving on.
What Storage Driver are you really using?
Unbeknownst to me at the time (and I am sure many of you), ionic (2+) does not actually use the browser/WebView LocalStorage be default. In fact, ionic utilizes a variety of storage drivers ("sqlite", "indexeddb", "websql" and "localstorage") that we can arrange in the order we deem most suitable for our use-case.
The beauty of the Ionic framework is that it can be used power apps on a wide variety of device type and platforms, so what you want to do is ensure that you are using the correct drivers for the job. In addition to this, you also want to verify that the order you set in your main app module is appropriate for the device(s) you are targeting. Here are some common examples below:
- Ionic Storage confirm for Android and iOS
IonicStorageModule.forRoot({
name: '_yourdb',
driverOrder: ['indexeddb', 'sqlite', 'websql'],
}),
- Ionic Storage config for browsers
IonicStorageModule.forRoot({ name: '_yourdb', driverOrder: ['localstorage','indexeddb', 'sqlite', 'websql'], }),
- Ionic LocalStorage config for old/legacy browsers
IonicStorageModule.forRoot({ name: '_yourdb', driverOrder: ['localstorage'], }),
Handle the Asynchronous nature of Javascript
It is easy to forget that in JavaScript things are not always as they seem, and this is one of the major factors that we tend to overlook when handing our app’s cache.
If you are attempting to pull data from an external source (e.g. an API), or you are doing any form of asynchronous data manipulation before saving, you need to ensure that these processes are 100% complete before attempting to update your cache.
The easiest way to ensure you are "not jumping the gun" is make use javascript Promises (or observables) and do something like this:
refreshCacheData(){
var newData = new Promise((resolve, reject) => {
this.myApiRequest().then((newData) =>{
this.myData = newData;
resolve();
})
});
// only store data after promise has resolved
newData.then((data) => {
this.storage.set('YOUR_KEY', this.myData);
});
}
Tired everything but still experienceing issues? Let me know in the comment section below.