Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An empty database in every pocket at FullStackCon

An empty database in every pocket at FullStackCon

IndexedDB is not new. It is supported in almost every browser. Without it, the future of progressive web apps are in peril. But there is not a lot of love for it and that needs to change.

We’ll investigate why we should love IndexedDB and the kind of apps you can create when you have the power of a database in the browser. Then we’ll dive into how to use IndexedDB with a look at both the terrifying API and the friendly libraries that will help us along the way. Together we’ll discover a new love for IndexedDB.

--

Links:

idb-keyval: https://github.com/jakearchibald/idb-keyval
localForage: https://github.com/localForage/localForage
idb: https://github.com/jakearchibald/idb
Dexie: http://dexie.org/
PouchDB: https://pouchdb.com/

Twilio Programmable Chat (from the demo): https://www.twilio.com/chat

Phil Nash

July 13, 2017
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. Dem

  2. Indexe request.onupgradeneeded = (event) => { const db = event.target.result;

    const objectStore = db.createObjectStore('messages', { keyPath: 'sid' }); objectStore.createIndex('dateUpdated', 'dateUpdated'); }; 01. 02. 03. 04. 05. 06. 07.
  3. Indexe const transaction = db.transaction(['messages']); const objectStore = transaction.objectStore('messages'); const

    index = objectStore.index('dateUpdated'); index.openCursor().onsuccess = (event) => { // do stuff } 01. 02. 03. 04. 05. 06.
  4. Upgrade request.onupgradeneeded = (event) => { const db = event.target.result;

    db.createObjectStore("messages", { keyPath: "sid" }); }; 01. 02. 03. 04.
  5. Upgrade request.onupgradeneeded = (event) => { const db = event.target.result;

    if (event.oldVersion < 1) { db.createObjectStore("messages", { keyPath: "sid" }); } if (event.oldVersion < 2) { db.createObjectStore("channels", { keyPath: "sid" }); } }; 01. 02. 03. 04. 05. 06. 07. 08. 09.
  6. Bu

  7. id

  8. pouchd var db = new PouchDB('messages'); db.put({ _id: 'sid', body:

    ' ', }).then((response) => { console.log(' '); }).catch((err) => { console.error(' ', err); }); 01. 02. 03. 04. 05. 06. 07. 08. 09.