[PWA] 15. Using The IDB Cache And Display Entries

In openDatabase(), we create Wittr db, set id as primary key and time as index called ‘by-time‘

function openDatabase() {
  // If the browser doesn‘t support service worker,
  // we don‘t care about having a database
  if (!navigator.serviceWorker) {
    return Promise.resolve();
  }

   return idb.open(‘wittr‘, 1, function(upgradeDb){
      const store = upgradeDb.createObjectStore(‘wittrs‘, {
        keyPath: ‘id‘
      });

    store.createIndex(‘by-date‘, ‘time‘);
  });
}

In _openSocket, we have a function to fetch the old data from the IDB.

// open a connection to the server for live updates
IndexController.prototype._openSocket = function() {


...

  ws.addEventListener(‘message‘, function(event) {
    requestAnimationFrame(function() {
      indexController._onSocketMessage(event.data);
    });
  });

...
};

// called when the web socket sends message data
IndexController.prototype._onSocketMessage = function(data) {
  var messages = JSON.parse(data);

  this._dbPromise.then(function(db) {
    if (!db) return;

    // TODO: put each message into the ‘wittrs‘
    // object store.
    const tx = db.transaction(‘wittrs‘, ‘readwrite‘);
    const wittrs = tx.objectStore(‘wittrs‘);
    messages.forEach( (message) => {
      wittrs.put(message);
    });

    return tx.complete;
  });

  this._postsView.addPosts(messages);
};

[PWA] 15. Using The IDB Cache And Display Entries

标签：