zoukankan      html  css  js  c++  java
  • [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);
    };
  • 相关阅读:
    JAVA中的super和this关键字的使用
    JAVA中类以及成员变量和成员方法的修饰符的总结
    JAVA中的抽象类和接口
    JAVA对数据库进行操作,实现数据库中数据的插入,查询,更改,删除操作
    完整日期正则表达式
    2017实习【Java研发】面经
    MySQL事务及隔离级别(读书小结)
    Java类编译、加载、和执行机制
    JVM内存回收机制
    Centos6.5的MySQL5.7.15二进制源码单机版安装
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5510731.html
Copyright © 2011-2022 走看看