Ember-offline-sync Detailed Design

ember-offline-sync.md

Detailed Design

# Add-on folder structure
- addon
  - mixins
    - offline-support-store.js
    - offline-support-adapter.js
- app
  - services
    - store.js

Add-on usage

Create a custom store

// app/services/store.js
import OfflineSupportStoreMixin from 'ember-offline-sync/mixins/offline-support-store';

export default DS.Store.extend(OfflineSupportStoreMixin, {
  offlineEnabled: true
});

An "Online Adapter" of your choice

// app/adapters/application.js
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  namespace: 'api/1'
});

Declare an "Offline Adapter"

// app/adapters/-offline.js
import LSAdapter from 'ember-localstorage-adapter/adapters/ls-adapter';
import OfflineSupportAdapterMixin from 'ember-offline-sync/mixins/offline-support-adapter';

export default LSAdapter.extend(OfflineSupportAdapterMixin, {
  namespace: 'my app'
});

How does it work?

OfflineSuportStoreMixin

This mixin will help the DS.Store to lookup the correct adapter depends on the online/offline status

// ember-offline-sync/mixins/offline-support-store.js

export default Ember.Mixin.create({
  offlineEnabled: true,
  /*
   * @override
   */
  adapterFor(modelName) {
    if (this.get('offlineEnabled')) {
      // lookup the offline adapter
    } else {
      // use the default one
      this._super(...arguments);  
    }
  }
});

OfflineSupportAdapterMixin

This mixin will extend the functionality of offline adapter LSAdapter (Local Storage Adapter) or LFAdapter (Local Forage Adapter) to add synchronization support with the remote source.

Every operation (findAll, findRecord, createRecord) ... will enqueue a job to the syncQueue - when run, will issue a coresponding request to remote endpoints using the Online Adapter (REST, JSON API). When the result come back, the job will have to put the data to 2 places:

• The store (update the UI)
• Local Storage (back up the data)

// ember-offline-sync/mixins/offline-support-adapter.js

export default Ember.Mixin.create({
  syncQueue: queue,
  findAll: function (store, type) {
    this._super(...arguments)
      .then(records => {
        // enqueue a job to fetch data from server use the "Online Adapter"
        let onlineJob = this.createOnlineJob('findAll', store, type, onlineAdapter);
        this.syncQueue.enqueue(onlineJob);
        
        // these are records from LocalStorage
        return records;
      });
  },
  findRecord: function(store, type, id, opts) {
  },
  
  findMany: function (store, type, ids, opts) {
  },
  
  query: function (store, type, query /*recordArray*/) {
  },
  
  createRecord: function (store, type, snapshot) {
  },
  
  updateRecord: function (store, type, snapshot) {
  },
  
  deleteRecord: function (store, type, snapshot) {
  }
});

Questions / Concerns