How to persist my custom data with app-indexeddb-mirror in Polymer

Question

I'm using the app-indexeddb-mirror component for storing offline data in the indexeddb cache. I got it working with the following code.

<app-indexeddb-mirror
  key="travels"
  data="{{data}}"
  persisted-data="{{persistedData}}">
</app-indexeddb-mirror>
<firebase-query
  app-name="projectMeta"
  path="/travel"
  data="{{data}}">
</firebase-query>

This code block successfully get an array of data and then stores it under the travel key in my indexeddb.

Let's say I'm offline and I want to fill in a form which is then stored in indexeddb under the key bto. How can I get the component to persist my data?

I tried the following:

<app-indexeddb-mirror
  id="readCache"
  key="testKey"
  data="{{liveData}}"
  persisted-data="{{persistedData}}"
  log="true">
</app-indexeddb-mirror>

First attempt to write my data object:

this.$.readCache.setStoredValue(key, data).then(function(res) {
  console.log("success")
});

Second attempt to write my data object:

this.set("liveData", newval.data);

in the console i'm getting:

but when I'm looking in the console under the Application tab to view all the stored content under indexeddb, it's still empty?

Answer 1

For what I have seen, you can't really "save" offline data with this component. It will update the versions of the data each time they change, and save them, and on an offline scenario will only serve the stocked value in persisted data, but not save them.

In fact, as soon as you'll be online again, all changes will be erased by the online version of the datas retrieved by the firebase-query

If you want to save offline changes, you'll have to use the component serving the datas, fortunately firebase-document have offlines capabilities so just save your data with it, and it should work fine.

At least that what's I have done on a pet project, and it seems to work.

Cordially :)