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

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[PWA] 15. Using The IDB Cache And Display Entries相关的知识,希望对你有一定的参考价值。

We want to use IDB to store the wittr messages. 

 

The logic is when the page start:

  1. service worker will read the skeleton from the cache and show to the interface.
  2. read the message data from the IDB first instead of going to network.
  3. Show the data from IDB then open socket to fetch updated wittr.
  4. Once data arrive, update the interface and save into IDB.

 

export default function IndexController(container) {
  this._container = container;
  this._postsView = new PostsView(this._container);
  this._toastsView = new ToastsView(this._container);
  this._lostConnectionToast = null;
  this._openSocket();
  this._dbPromise = openDatabase();
  this._registerServiceWorker();
}

 

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的主要内容,如果未能解决你的问题,请参考以下文章

[PWA] 16. Clean IDB

[PWA] 14. Loop cursor

[PWA] 12. Intro to IndexedDB

[PWA] 13. New db and object store

[PWA] Access the Camera in a PWA built with React

[PWA] 19. Cache the avatars