[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:
- service worker will read the skeleton from the cache and show to the interface.
- read the message data from the IDB first instead of going to network.
- Show the data from IDB then open socket to fetch updated wittr.
- 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); };