Save 37% off PRO during our Black Friday Sale! »

An empty database in every pocket at Devoxx Poland

An empty database in every pocket at Devoxx Poland

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

June 23, 2017
Tweet

Transcript

  1. None
  2. Phi Nas @philnash http://philna.sh philnash@twilio.com

  3. A empt databas i ever pocke

  4. Problem

  5. Performanc

  6. O lin

  7. O lin Poo connectivit

  8. O lin Poo connectivit Resilienc

  9. Use experienc

  10. Progressiv We Ap

  11. A empt databas i ever pocke

  12. Th option

  13. Cookie

  14. LocalStorag

  15. LocalStorag localStorage.setItem('DevoxxPL', 'Awesome');

  16. Bu ...

  17. WebSQL?

  18. S ...

  19. IndexedDB

  20. IndexedDB ha ba reputatio

  21. Wha i IndexedDB?

  22. Objec stor

  23. Transactiona

  24. Asynchronou

  25. Sam origi polic

  26. Suppo ?

  27. None
  28. Dem

  29. Ther ' mor !

  30. Indexe

  31. 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.
  32. 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.
  33. Upgrade

  34. Upgrade request.onupgradeneeded = (event) => { const db = event.target.result;

    db.createObjectStore("messages", { keyPath: "sid" }); }; 01. 02. 03. 04.
  35. 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.
  36. Bu

  37. Safar

  38. Librarie !

  39. id -keyva localForag id Dexi PouchDB

  40. id -keyva

  41. id -keyva idbKeyval.set('DevoxxPL', 'Awesome') .then(() => console.log(' ')) .catch(err =>

    console.error(' ', err)); 01. 02. 03.
  42. localForag

  43. localForag localforage.setItem('DevoxxPL', 'Awesome', function (err) { if (err) { console.error('

    ', err); } else { console.log(' '); } }); 01. 02. 03. 04.
  44. localForag localforage.setItem('DevoxxPL', 'Awesome') .then(() => { console.log(' '); }) .catch((err)

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

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

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

    03. 04.
  48. Dexi

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

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

    }); 01. 02. 03. 04.
  51. pouchd

  52. 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.
  53. A empt databas i ever pocke

  54. IndexedDB hel t enhanc th experienc

  55. Performanc

  56. Resilienc

  57. Le ' l th s database !

  58. Thank !

  59. Write for the Twilio blog! twiliovoice .co

  60. Thank ! @philnash http://philna.sh philnash@twilio.com