app-storage icon indicating copy to clipboard operation
app-storage copied to clipboard

Quick-load option for app-indexeddb-mirror?

Open skeemer opened this issue 9 years ago • 6 comments

Would there be any interest in a "quick-load" option in app-indexeddb-mirror? Right now I'm having to deal with getting data from a flaky server, so loading from cache at the beginning makes for a better user experience. I would imagine this would be true on iffy/slow mobile connections as well.

Who will use the feature? Those with slow/flaky connections. When will they use the feature? When loading pages with cached data. What is the user’s goal? Use the app without waiting for data.

For myself I've implemented it the following way, but would be willing to build out with it as an option with a pull request if there is interest.

     __updatePersistedData: function() {
      this._log('Updating persisted data..');
      this._enqueueTransaction(function() {
        return this.client.validateSession(this.session);
      });

      if (this.online) {
        this.persistedData = this.data;
        this.linkPaths('data', 'persistedData');
      } else {
        this.__retrievePersistedData();
      }
    },

    __retrievePersistedData: function () {
      this.unlinkPaths('data', 'persistedData');
      this._enqueueTransaction(function() {
        return this.getStoredValue().then(function(value) {
          // We may have gone online since retrieving the persisted value..
          if ((this.online && this.data !== undefined) || !this.client.supportsMirroring) {
            return;
          }
          this.persistedData = value;
        }.bind(this));
      });
    },

    ready: function () {
      this.__retrievePersistedData();
    }

skeemer avatar May 30 '16 20:05 skeemer

👾 Thanks for the feature request! This sounds like an interesting feature.

In the current design, we rely on a simple arrangement: if you are online, you get data from the data property, and if you are offline, you get data from the mirror (via this.getStoredValue). Your design as described introduces a new, interstitial state where the user is online but doesn't have a value for data yet. Can you provide a succinct and technical description of how the current arrangement would change to enable your design?

cdata avatar May 31 '16 22:05 cdata

This would be a welcome addition. More like how iron-localstorage does when there's no initial data

platinumindustries avatar Aug 18 '16 09:08 platinumindustries

I'm not the one that opened the issue but I'd like to see this functionality implemented. For a technical description compared to how it normally works you have two options.

First option, you'd set data with the stored value when you first connect, if and only if 'data' is undefined.

Alternately, it'd be designed to return data if online AND isNew. The isNew property is currently, statically false but could be altered so it is true after data has been been defined.

cgriffin4 avatar Aug 31 '16 17:08 cgriffin4

It's a super usefull feature for me and for prpl pattern as well

simonealessandrelli avatar Sep 08 '16 17:09 simonealessandrelli

ping.. would like to see this feature, since now my offline experience is better than the online one :D

chwzr avatar Sep 28 '17 11:09 chwzr

I've modified the code from skeemer, I think its not neccessary to check if online or not, I always want to ship the cache version first, and then if available the online data.. Its basicly the same, but i dont check if online or not, just if browser supports indexeddb.

__updatePersistedData: function() {
      this._log('Updating persisted data..');
      this._enqueueTransaction(function() {
        return this.client.validateSession(this.session);
      });

      if (this.online) {
        this.persistedData = this.data;
        this.linkPaths('data', 'persistedData');
      } else {
        this.__retrievePersistedData();
      }
    },

    __retrievePersistedData: function () {
      this.unlinkPaths('data', 'persistedData');
      this._enqueueTransaction(function() {
        return this.getStoredValue().then(function(value) {
          // ship the persistedData first, to enable best loading times with firebase.
          if ((!this.client.supportsMirroring) {
            return;
          }
          this.persistedData = value;
        }.bind(this));
      });
    },

    ready: function () {
      this.__retrievePersistedData();
    }

for those who are interested in best loading time. When you use firebase as data source, the data gets updated when available.

chwzr avatar Sep 28 '17 17:09 chwzr