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的更多相关文章

  1. [PWA] 18. Clean the photo cache

    We cannot let photo always keep caching new data without clean the old data. If message is not displ ...

  2. 第 15 章 可扩展性设计之 Cache 与 Search 的利用

    前言: 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为宽广的发散开来.这一章,我们就将跳出完全依靠数据库自身来改善 ...

  3. MySQL性能调优与架构设计——第 15 章 可扩展性设计之Cache与Search的利用

    第 15 章 可扩展性设计之Cache与Search的利用 前言: 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为 ...

  4. cache—主存—辅存三级调度模拟

    近日,在体系结构的课程中,老师留了一个上机作业,为cache—主存—辅存三级调度模拟,要求如下: 实现三级存储体系的模拟调度程序 描述:CPU在cache访问数据块,若命中给出对应的cache实地址, ...

  5. [置顶] 页面缓存,cache,设置缓存过期时间,OutputCache

    页面缓存 方法一: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //缓存有数据 if (Cach ...

  6. google guava cache缓存基本使用讲解

    代码地址:https://github.com/vikde/demo-guava-cache 一.简介 guava cache是google guava中的一个内存缓存模块,用于将数据缓存到JVM内存 ...

  7. 【Guava】Guava Cache用法

    背景 缓存的主要作用是暂时在内存中保存业务系统的数据处理结果,并且等待下次访问使用.在日长开发有很多场合,有一些数据量不是很大,不会经常改动,并且访问非常频繁.但是由于受限于硬盘IO的性能或者远程网络 ...

  8. Design Of A Modern Cache

    http://highscalability.com/blog/2016/1/25/design-of-a-modern-cache.html MONDAY, JANUARY 25, 2016 AT ...

  9. Network Stack‎ : HTTP Cache

    HTTP Cache 目录 1 Operation 2 Sparse Entries 3 Truncated Entries 4 Byte-Range Requests 5 HttpCache::Tr ...

随机推荐

  1. CentOS 6.5 IP 设置

    DEVICE=eth0TYPE=EthernetUUID=7d6d54e0-054d-472b-8cc1-080f16ef36c1ONBOOT=yesNM_CONTROLLED=yesBOOTPROT ...

  2. php基础知识【oop/mvc/orm/aop】

    OOP 面向对象编程是一种计算机编程架构.OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成.OOP 达到了软件工程的三个主要目标:重用性.灵活性和扩展性.为了实现整体运 ...

  3. wndows常用命令

    1. 远程桌面 mstsc (Microsoft terminal services client)

  4. Linux系统管理技术手册——第6章 添加新用户

    6.1/etc/passwd文件 用户登录时Linux识别用户的文件/etc/passwd /etc/passwd包括7个字段: 登录名(不超过32位,使用NIS系统后不超过8位) 经过加密的口令或口 ...

  5. 兼容PHP和Java的des加密解密代码分享

    这篇文章主要介绍了兼容PHP和Java的des加密解密代码分享,适合如服务器是JAVA语言编写,客户端是PHP编写,并需要des加密解密的情况,需要的朋友可以参考下 作为一个iOS工程师来解决安卓的问 ...

  6. 用汇编语言研究C语言的全局变量、局部变量、参数、返回值放在哪里

    前提知识 c0s调用main函数的地址: 11ah main函数的连接地址: 01fah 一.全局变量与局部变量 测试程序 int a1,a2,a3; void f(void); void g(voi ...

  7. MapReduce程序开发之流量求和(八)

    1.分析记录手机流量的日志. 2.拿到日志中的一行数据,切分各个字段,抽取出我们需要的字段:手机号,上行流量,下行流量,然后封装成kv发送出去 3.使用java中的map方法: public clas ...

  8. windows server 2008 asp连接数据库sql2000失败

    由于服务器现在的服务器已不能承受了,需要替换服务器并把window2003升级为window2008,把所有数据都平移过来.平移完后遇到ASP总是不能连接上sql2000,这让我非常郁闷,处理了好几个 ...

  9. ExtJS简单的动画效果2(ext js淡入淡出特效)

    Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...

  10. 尼玛的,不学ORACLE RAC就不能叫高大上啊

    刚才趁这段时间和机会,进去好好套弄一下. 我看不得会ORACLE人的嘴脸,于是,,,,我想试试~~~