Make localForage observable

[iamolivinius]

Correct me if I'm wrong but I dont see any convenient way to register callbacks to localForage which are executed when a storage changed.

Are there any plans to provide/merge such a feature?

[tofumatt]

Would something like #104 do the trick? Or do you mean using Object.observe? I guess I can see use-cases for this, though it'd be a fair amount of work to code?

[iamolivinius]

I don't know if this would be sufficiant. There are no events for indexeddb and websql.

I'm developing a browser extension. Within the content script I record user interactions and send them to the backend script to store the data into the extensions "storage". I also do have a popup UI to modify the recorded data.

I would love to add observers from popup and content script react on changes to the storage. If a user changes something within the popup it should be possible to see the updates without a reload of the content script or a periodic query.

[mreinstein]

would this event handler work?

https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase.onversionchange

I'm not sure if this fires across tabs/windows though.

[tofumatt]

@mreinstein I think the idea would be to have it be observable for all events, so you could know when a localForage object fired any event (setItem, getItem, etc.), so it would need to exist for all drivers and all types of events.

[mreinstein]

I think the idea would be to have it be observable for all events

I think we're saying the same thing. I surfaced the onversionchange event thinking this might be sufficient to detect changes in the indexeddb driver. I know localstorage has the 'storage' event which works fine. not sure about websql though.

[michielbdejong]

I think onversionchange refers to the version of the database as a whole, and can't track versions of individual items.

As @inf3rno noted on #104, probably SharedWorker would be an option, but it's still only 50% implemented on desktop.

From the OP:

If a user changes something within the popup it should be possible to see the updates

The particular case where one window is a popup can be solved with postMessage to the parent window.

It's harder (impossible?) when the user opens two unrelated windows on the same domain. The only hack I can think of would be if each window periodically does an explicit getItem call (maybe of a special '_changes' item).

[no-more]

Hello,

Is there any solution to this currently? I would like to use this with angular2 and observable it would be great if this app could support observable.

Thanks.

[thgreasi]

Would a simple publish-subscribe implementation suffice for this? Of course
this would only work in the same window/runtime context ( not between two
different instances of the page ).
If that's the case, we could perhaps create an add-on that would
publish/trigger events for all the CRUD operations. That way we can keep
the core implementation simple and lightweight.

Any suggestions on the API? Eg:
localforage.subscribe('setItem', callback );
// OR
localforage.subscribe('myItemKey', callback );

Perhaps we could have two separate methods for localforage-method or
item-key subscriptions.
Waiting for feedback!

Thodoris Greasidis
Computer, Networking &
Communications Engineer

[nolanlawson]

This is actually something that's not technically feasible right now, at least with IndexedDB and WebSQL. It does work with LocalStorage, so as a hacky workaround you can actually just toggle a key on LocalStorage whenever something changes, and then LocalStorage emits an event, which means you can also communicate across tab boundaries this way.

OTOH you may want to wait, because they're actually in the process of adding event listeners to the IDB spec. There's a draft proposal somewhere, but I can't seem to find the link now, but @drufball would know where to find it.

[thgreasi]

How about initially making localforage instances observable, so that parts
(of the same page) can subscribe for changes on specific item keys? Would
that be useful to anyone?
At a later point of time (when the new specs and browser support align) we

could also support listening for db changes from different page instances.

Thodoris Greasidis
Computer, Networking &
Communications Engineer

[no-more]

Hi,

Thanks that would be great. I hope browser will implement this soon.

[thgreasi]

Any preference on any Observable library to use? I guess vanilla js folks
would prefer zen-observable but Angular 2 users would probably like RxJ
more.

Thodoris Greasidis
Computer, Networking &
Communications Engineer

[thgreasi]

Just pushed some commits to my localForage-observable repo. By default it
uses es-observables but can also be configured to use RxJS as well. Waiting

for your feedback.

Thodoris Greasidis
Computer, Networking &
Communications Engineer

[no-more]

Hi,
Thanks a lot, I won't be able to try before next week but it looks great
.

[gnz00]

@thgreasi Does this work for multiple tabs or windows or is this limited to a single instance?

[thgreasi]

@maysale01 no, it doesn't work across tabs, only on the same instance. Like @nolanlawson said a few comments before, it isn't technically possible atm. I may add his hacky localStorage suggestion in some later release though.

[dmurph]

Cross-tab observation might be a thing if we can implement/agree upon/release this:
https://github.com/dmurph/indexed-db-observers/blob/gh-pages/EXPLAINER.md
(examples here): https://github.com/dmurph/indexed-db-observers/issues/24

[thgreasi]

Just opened localForage/localForage-observable#5 to track the cross-tab support.

[tofumatt]

The plugin allows using observable, please follow localForage/localForage-observable#5 for cross-tab support 😄

[thgreasi]

Just opened localForage/localForage-observable#6 for this. Any feedback would be great and could help releasing it during the weekend.