Get notified when indexedDB entry gets changed in other tab

Question

If a user opens multiple instances of a web app in multiple tabs, any instance can be notified of changes to localStorage that any other instance makes by registering a storage event listener. A tab receiving such a notification might then react and e.g. update the UI according to the changes.

Indexed DB doesn't seem to offer a similarly convenient mechanism for such notifications. Would one have to use localStorage to "send" a notification to other tabs whenever making changes to Indexed DB? The only other alternative might be polling, which is clearly inferior to storage events.

Lillalillard

Answer 1

There's no current "observer" API defined for Indexed DB. However, it's on the feature request list and there are similar proposals from both Mozilla and Google.

https://github.com/w3c/IndexedDB/issues/51

Which is to say: yes, you need to come up with some custom cross-tab communication mechanism, such as polling, storage events, setting up MessageChannel links (Chrome), BroadcastChannel (Firefox), or using a Service Worker as a relay between clients.

---

NEWS FLASH!

Chrome has an experimental Indexed DB Observers API. You need to run chrome with --enable-experimental-web-platform-features to use it so it's not useful in production yet. We'd love to get feedback on it - file bugs on the github repo.

Parthena

Any news on this? Standards track, etc? What level will the observers probably be on? – Twila

No news. W3C Tag has provided some feedback on the API design which we (Chrome) need to roll in and get developer feedback on. – Parthena

Answer 2

Dexie 3.2 has observability built-in (without Dexie.Observable). It uses BroadcastChannel to communicate changes across browsing contexts. It can only observe changes that are made using Dexie>=3.2 (as there is still no stable native API to do this).

Hobbs

Answer 3

Update

1. Dexie has an add-on for Observables now, in case you start with a new project: https://dexie.org/docs/Observable/Dexie.Observable
2. Oleg did a solid hook on the Ionic storage wrapper. But that can be created for any local storage library. Solid engineering. https://medium.com/@OlegVaraksin/how-to-make-ionic-storage-reactive-acdd8996f1e6

Muscat

Any idea how does Dexie.Observable implement it? – Doorframe

@Doorframe - From skimming the implementation, it looks like Dexie.Observable uses LocalStorage (which does have built-in events to notify of changes in other tabs) to send messages about its IndexedDB changes. – Hagbut