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. linux负载均衡

    1.linux lvs nat实现负载均衡 添加两块网卡并开启路由管道 > /proc/sys/net/ipv4/ip_forward //开始路由管道 安装ipvsadm yum instal ...

  2. thinksns消息提示的实现机制(转)

    转自:http://jingyan.baidu.com/article/f25ef2541718eb482c1b8215.html thinksns的消息提示不是实时的,而是1分钟向服务器请求一次,再 ...

  3. c++ string用法

    首先,为了在我们的程序中使用string类型,我们必须包含头文件 .如下: #include  //注意这里不是string.h string.h是C字符串头文件 1.声明一个C++字符串 声明一个字 ...

  4. FC8下备份linux系统

    linux系统可以使用tar来备份.<br><br> 我在FC8上装好了totem, mplayer, audacious, 并搞定了wifi后,我觉得该备份一下FC8系统.& ...

  5. 前端,移动开发者,UI须懂: 不同设备的之间的尺寸

    在开发前端,移动APP,以及设计UI的时候,我们经常会去搜索不同设备之间的尺寸,来开始自己的工作,以保证显示效果达到更好,这里收集了现在常用的设备. 设备更新速度快,有些没罗列的,大家可以谷歌或者百度 ...

  6. JavaScript 获取Select标签选中的项

    <select name="select1" id="select1" onchange=setInput()> <option value= ...

  7. IS打包

    1. 目的 让用户可以通过运行一个安装程序,安装程序到系统中正常运行. 2. 注意 当我们用项目向导生成的新项目时,InstallShield只为我们生成两个事件,分别是OnFirstUIBefore ...

  8. jquery html 动态添加元素绑定事件

    由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...

  9. ASP.NET导出Excel(利用NPOI和EPPlus库,无需安装Office)

    网上提供了很多Asp.net中操作Excel的方法,其中大部分是调用微软的Office组件,下面提供三个无须安装Office即可从Asp.net输出Excel的方法. 1 简单方法 //下面代码输出的 ...

  10. UnixODBC

    UnixODBC下载安装地址:http://www.unixodbc.org/ DOWNLOAD Distribution Format unixODBC is currently availible ...