Dexie.Observable.js

Observe changes to database - even when they happen in another browser window.

Install

npm install dexie --save
npm install dexie-observable --save

Use

import Dexie from 'dexie';
import 'dexie-observable';

// Use Dexie as normally - but you can also subscribe to db.on('changes').

Usage with existing DB

In case you want to use Dexie.Observable with your existing database, you will have to do a schema upgrade. Without it Dexie.Observable will not be able to properly work.

import Dexie from 'dexie';
import 'dexie-observable';

var db = new Dexie('myExistingDb');
db.version(1).stores(... existing schema ...);

// Now, add another version, just to trigger an upgrade for Dexie.Observable
db.version(2).stores({}); // No need to add / remove tables. This is just to allow the addon to install its tables.

Dependency Tree

• Dexie.Syncable.js
  • Dexie.Observable.js
    • Dexie.js
      • IndexedDB

Source

Dexie.Observable.js

Description

Dexie.Observable is an add-on to Dexie.js makes it possible to listen for changes on the database even if the changes are made in a foreign window. The addon provides a "storage" event for IndexedDB, much like the storage event (onstorage) for localStorage.

In contrary to the Dexie CRUD hooks, this event reacts not only on changes made on the current db instance but also on changes occurring on db instances in other browser windows. This enables a Web Apps to react to database changes and update their views accordingly.

Dexie.Observable is also the base of Dexie.Syncable.js - an add-on that enables two-way replication with a remote server.

Extended Methods, Properties and Events

UUID key generator

When defining your stores in Version.stores() you may use the $$ (double dollar) prefix to your primary key. This will make it auto-generated to a UUID string. See sample below.

Dexie.Observable.createUUID()

A static method added to Dexie that creates a UUID. This method is used internally when using the $$ prefix to primary keys. To change the format of $$ primary keys, just override Dexie.createUUID by setting it to your desired function instead.

db.on('changes') event

Subscribe to any database changes no matter if they occur locally or in other browser window.

Parameters to your callback:

Example (here we're using plain ES6 script tags):