IONIC2 Cache Management

Question

Ich habe eine App mit IONIC 2 erstellt. Meine alle Seiten müssen durch REST API geladen werden und manchmal ist es lästig, dass das Laden in jedem Tab ohne Updates neu geladen wird.

Jetzt möchte ich dies durch die Implementierung Cache auf meine App verbessern. Ich möchte es wie jede HTTP-Anfrage wird nach dem ersten Mal mit dem aktuellen Zeitstempel gespeichert und nach 2 Stunden wird es den Inhalt über REST API laden.

Jedes Beispiel wäre großartig. Ich habe versucht, mit diesem Plugin https://github.com/Nodonisko/ionic-cache, aber es gibt ein Problem nach der Installation zeigte Fehler.

Mit Sqlite wäre besser ich kam zu wissen, aber ich bin nicht sehr sicher und auf der Suche nach einem Vorschlag von den Experten.

Hier meine Homepage-Code ist: -

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(); 
        }); 
} 

Dies ist mein Service-Provider-Seite: -

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(); 
      });  
     } 
} 

Dank Sanny

Answer 1

Meiner Meinung nach sollte Ionic Storage mehr als genug Wenn Sie jedoch weiterhin Sqlite verwenden möchten, können Sie den folgenden Code einfach ändern, um ihn zu verwenden.

Dies ist nur eine einfache Implementierung, die ich in einem Projekt verwendet habe, an dem ich gearbeitet habe. Ich habe den Code vereinfacht, so lassen Sie es mich wissen, ob es eine Copy/Paste-Ausgabe ist ...

// 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`); 
    } 
} 

Der Code ist ziemlich selbsterklärend ... Im Grunde wir ein CacheItemModel verwenden, die die data enthalten werden wir möchte im Cache speichern, und die timestamp überprüfen, ob diese Daten noch gültig sind. Wir verwenden den Typ any für die Daten, damit wir jede Art von Daten darin speichern können.

Unser Cache ist nur ein Map<string, CacheItemModel>;, wo der Schlüssel die URL ist, wo wir die Daten abrufen möchten. Also wäre es so etwas wie .../api/products oder .../api/products/5 oder so ähnlich.

Und dann, wenn Sie es benutzen wollen:

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 the next time 
       this.cacheService.set(url, res); 
       return res; 
      }); 
}