List not updating after reloading while offline

[gartorware]

First, I would like to say thank you very much, I think your work is amazing.

Cache is not working properly when you reload while offline. This can be reproduced in the official demo.

Steps to reproduce

1. While ONLINE, load the write-list demo
2. Add some items to the list -> Items are added and shown
3. Go OFFLINE
4. Add more items to the list -> Items are added and shown
5. Reload the page while OFFLINE -> Previous items are shown
6. Add more items to the list -> Items are added and shown
7. Reload again while OFFLINE -> You can see same items as in step 5, but not items added in step 6.
8. Add more items -> Items are added and shown (items from step 6 still hidden)
9. Go ONLINE -> Cache is synced. Items from step 6 are added back to the list!!!

The funny part is that write cache is working rightly almost always (updates are synced back even when not appearing in UI), but read cache don't. Maybe this is not a bug and is just how the firebase offline sync mechanism works.

If you watch the localforage db, you can see how write node is updating properly but read/object and read/list nodes don't.

Reloading twice while offline may not be very smart in a web page, but it is pretty common in a (hybrid) phone APP or PWA.

BTW, I have reproduced it in my environment as well:

Ionic: ionic-angular 3.4.2
Angular: 4.1.3
Node: v6.7.0
OS: Linux 4.4
npm: 4.6.1
angularfire2-offline: 4.1.5

Sorry for my English.

[adriancarriger]

Hi @gartorware, thanks for reporting this issue! I can confirm that this is a bug and I'll be working on fixing it.

[abbasali-io]

Is there an update on this issue? I have added an SO question for this issue before stumbling upon this page.

https://stackoverflow.com/questions/45394489/angular2offline-does-not-sync-data-if-ionic-app-is-closed-without-ever-connectin

Thank you for your help and good work

[abbasali-io]

Hi Adrian, any thoughts on the above bug?

[adriancarriger]

Hi @gartorware and @pomifm, I've done a bit of research and I'm able to reproduce the bug with fewer actions:

1. Visit: https://angularfire2-offline.firebaseapp.com/write-list
2. Go offline
3. Refresh while offline
4. Add "Apples" to list
5. Refresh (item will be missing)
6. Go online (item will reappear)

Also, I can see this data inside IndexedDB at step 5:

I'm thinking the issue may be related to the processWrites method. This issue is a bit tricky, but hopefully we're a few steps closer to solving it!

[tja4472]

database.ts

potentialListRef was being set to '//groceries' instead of '/groceries'.

  private addToEmulateQue(cacheItem: CacheItem) { // add matches to que
    // Check if root level reference
    console.log('addToEmulateQue');
    const refItems: string[] = cacheItem.ref.split('/');
    console.log('addToEmulateQue:refItems1>', refItems);
    refItems.pop();
    console.log('addToEmulateQue:refItems2>', refItems);   
//    const potentialListRef: string = '/' + refItems.join('/');
    const potentialListRef: string = refItems.join('/'); <=======
    if (potentialListRef !== '/') {
      // Add
      console.log('addToEmulateQue:Add>', potentialListRef);
      if (!(potentialListRef in this.emulateQue)) {
        this.emulateQue[potentialListRef] = [];
      }
      console.log('addToEmulateQue:emulateQue>', this.emulateQue);
      this.emulateQue[potentialListRef].push(cacheItem);
    }
  }

hth Tim

[adriancarriger]

This should be fixed in version 4.2.2! 🎉 🎉 🎉

You can test it out using the demo

@tja4472 let me know if you still see //groceries showing up with the new version.. I haven't spotted the same issue so far. Thanks! 👍