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/

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