Ionic - Firebase - How do you use Ionic Storage with Firebase? #askfirebase

Question

I watched this Askfirebase video and they would not recommend managing cache but a simple test showed that using Ionic Storage can help display the data on first load. How can I display the data from cache and replace it it the data from Firebase?

My code is to implement a simple chat messenger

<button *ngFor="let event of events | async" ion-item (click)="launchChat(event.$key)">
    <ion-icon name="cafe" item-left></ion-icon>
    {{event.title}}
</button>

---

this.events = this.db.list("/events/", {
    query: {
        orderByChild: "people/" + queryEmail,
        equalTo: "true"
    }
});

this.events.subscribe((chats) => {
    if (chats) {
        this.storage.set("chats", chats);
    }

    if (chats.length === 0) {
        return this.showError = true;
    }
});

I cannot load the data from cache using the '| async' but I need that for the ngFor.

Note that Firebase still does not support permanent persistence for web application.