An empty database in everybody's pocket

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
November 16, 2016

An empty database in everybody's pocket

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/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

November 16, 2016
Tweet

Transcript

  1. An empty database in everybody's pocket Phil Nash Topconf Tallinn

    2016
  2. Phil Nash @philnash http://philna.sh philnash@twilio.com

  3. An empty database in everybody's pocket

  4. IndexedDB

  5. IndexedDB has a bad reputation

  6. The options

  7. Cookies

  8. LocalStorage

  9. LocalStorage localStorage.setItem('Topconf', 'Awesome');

  10. But...

  11. WebSQL?

  12. So... IndexedDB

  13. Why?

  14. Performance

  15. Offline

  16. Offline Poor connectivity

  17. User experience

  18. What is IndexedDB?

  19. Object store

  20. Transactional

  21. Asynchronous

  22. Same origin policy

  23. Demo

  24. There's more!

  25. Indexes

  26. Indexes 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.
  27. Indexes 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.
  28. Upgrades

  29. Upgrades request.onupgradeneeded = (event) => { const db = event.target.result;

    db.createObjectStore("messages", { keyPath: "sid" }); }; 01. 02. 03. 04.
  30. Upgrades 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.
  31. Bugs

  32. Safari

  33. Libraries!

  34. idb-keyval

  35. idb-keyval idbKeyval.set('Topconf', 'Awesome') .then(() => console.log(' ')) .catch(err => console.error('

    ', err)); 01. 02. 03.
  36. localForage

  37. localForage localforage.setItem('key', 'value', function (err) { if (err) { console.error('

    ', err); } else { console.log(' '); } }); 01. 02. 03. 04.
  38. localForage localforage.setItem('key', 'value') .then(() => { console.log(' '); }) .catch((err)

    => { console.error(' ', err); }); 01. 02. 03.
  39. idb

  40. idb const dbPromise = idb.open('messages', 1, upgradeDB => { upgradeDB.createObjectStore('messages');

    }); 01. 02. 03.
  41. idb dbPromise.then(db => { return db.transaction('messages') .objectStore('messages').get(key); }); 01. 02.

    03. 04.
  42. Dexie

  43. Dexie const dexie = new Dexie("messageStore"); dexie.version(1).stores({ messages: 'sid,dateUpdated' });

    01. 02. 03. 04.
  44. Dexie dexie.open().then((db) => { db.messages.where("sid").equals(key) .then((message) => { console.log(message.body); });

    }); 01. 02. 03. 04.
  45. pouchdb

  46. pouchdb 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.
  47. IndexedDB enhances the experience

  48. Let's fill those databases!

  49. Thanks! @philnash http://philna.sh philnash@twilio.com