Managing the Cache in IONIC2

Question

Managing the Cache in IONIC2

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

angular typescript caching ionic2

Answer 1

Answer №1

I believe that Ionic's Storage is sufficient for this task, however, if you prefer to use Sqlite, you can easily adapt the following code to incorporate it.

This implementation is a simplified version that I have utilized in a recent project. If you encounter any issues with copying and pasting the code, please let me know...

// Angular
import { Injectable } from '@angular/core';

export class CacheItemModel {

    constructor(public timestamp: number, public data: any) { }

    public isValid(): boolean {
        if (!this.data) {
            return false;
        }

        let age = Date.now() - this.timestamp;
        return age <= 7200000; // Two hours in ms
    }
}

@Injectable()
export class CacheService {

    private cache: Map<string, CacheItemModel>;

    constructor() {
        this.cache = new Map<string, CacheItemModel>();
    }

    public get(url: string): any {
        let cacheItem = this.cache.get(url);
        if (cacheItem && cacheItem.isValid()) {
            console.log(`[Cache]: obtained response from ${url} from the cache`);
            return cacheItem.data;
        }

        console.log(`[Cache]: empty or expired for data from ${url}`);
        return null;
    }

    public set(url: string, data: any): void {
        let cacheItem = new CacheItemModel(Date.now(), data);
        this.cache.set(url, cacheItem);
        console.log(`[Cache]: saved data from ${url} in the cache`);
    }
}

The code provides a clear explanation... Essentially, we utilize a CacheItemModel to store the data to be cached along with a timestamp for validity checks. By using the type any for the data, we are able to store various types of data.

Our cache is represented as a

Map<string, CacheItemModel>

; where the key corresponds to the url from which we retrieve the data. For example, it could be something like .../api/products or .../api/products/5.

When utilizing it:

public getData(url: string): Observable<any> {
    let cachedData = this.cacheService.get(url);

    return cachedData
        ? Observable.of(cachedData)
        : this.http.get(url)
            .map(res => res.json())
            .map(res => {
                // Save the data in the cache for future use
                this.cacheService.set(url, res);
                return res;
            });
}

Answer 2

I believe that Ionic's Storage is sufficient for this task, however, if you prefer to use Sqlite, you can easily adapt the following code to incorporate it.

This implementation is a simplified version that I have utilized in a recent project. If you encounter any issues with copying and pasting the code, please let me know...

// Angular
import { Injectable } from '@angular/core';

export class CacheItemModel {

    constructor(public timestamp: number, public data: any) { }

    public isValid(): boolean {
        if (!this.data) {
            return false;
        }

        let age = Date.now() - this.timestamp;
        return age <= 7200000; // Two hours in ms
    }
}

@Injectable()
export class CacheService {

    private cache: Map<string, CacheItemModel>;

    constructor() {
        this.cache = new Map<string, CacheItemModel>();
    }

    public get(url: string): any {
        let cacheItem = this.cache.get(url);
        if (cacheItem && cacheItem.isValid()) {
            console.log(`[Cache]: obtained response from ${url} from the cache`);
            return cacheItem.data;
        }

        console.log(`[Cache]: empty or expired for data from ${url}`);
        return null;
    }

    public set(url: string, data: any): void {
        let cacheItem = new CacheItemModel(Date.now(), data);
        this.cache.set(url, cacheItem);
        console.log(`[Cache]: saved data from ${url} in the cache`);
    }
}

The code provides a clear explanation... Essentially, we utilize a CacheItemModel to store the data to be cached along with a timestamp for validity checks. By using the type any for the data, we are able to store various types of data.

Our cache is represented as a

Map<string, CacheItemModel>

; where the key corresponds to the url from which we retrieve the data. For example, it could be something like .../api/products or .../api/products/5.

When utilizing it:

public getData(url: string): Observable<any> {
    let cachedData = this.cacheService.get(url);

    return cachedData
        ? Observable.of(cachedData)
        : this.http.get(url)
            .map(res => res.json())
            .map(res => {
                // Save the data in the cache for future use
                this.cacheService.set(url, res);
                return res;
            });
}

Managing the Cache in IONIC2

Answer №1

Similar questions

The Google APIs sheet API is throwing an error message stating "Invalid grant: account not found"

Refresh an Angular page automatically

What is the process for setting up a node test launch configuration?

Technique in CSS/SASS to repair a div

Unable to create resource in nestjs due to typeScript compatibility issue

Strange error message regarding ES6 promises that is difficult to interpret

Tips for Observing angular forkJoin for multiple responses during unit testing with Jasmine

Checking constructor arguments and code style issues

Unexpected behavior with the ion-datetime time picker on an Android device

An issue was encountered in the node_modules folder while attempting to access the 'Exclude' name in the lodash collection file. The error message reads: (1783,24): error TS2304: Cannot

Converting a Promise to an Observable in Angular using Typescript

Angular application experiences issues with persistent login when using Cypress.io

TypeScript interface designed to capture objects containing a flexible number of values

Having trouble applying [formControl] to a set of radio buttons in Angular2

Reacting to Appwrite events in a React Native environment

Launching the API using Modal in Angular 6

What is the method for inserting two dashes within a number?

Replace i18next property type in React for language setting

Instructions for setting up qtip2 tooltip with npm in an Angular 2 project

Vue-i18n does not offer a default export option