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);
    };
  • 相关阅读:
    centos配置ADSL拨号 配置阿里云的yum源
    强烈推荐:一个网页转安卓App的工具,可以在线云打包apk
    【html5】input标签capture属性不为人知的秘密
    国庆微信头像在线生成器,头像加国旗小工具
    这是一个玩法简单又充满刺激的安卓App游戏
    微信群二维码突破100人限制和7天不过期的方法
    Xcode9学习笔记84
    Xcode9学习笔记83
    Xcode9学习笔记80
    python 压缩文件.zip
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5510731.html
Copyright © 2011-2022 走看看