Trouble with multiple tabs

[cinnamon-bun]

When Foyer is open in two tabs at the same time, both are writing to LocalStorage but neither is reading from it. This causes Problems.

We only load from LocalStorage to memory at startup and from that point we only write from memory to LocalStorage. Instead we need to keep LocalStorage and memory in sync with each other bidirectionally. It's like LocalStorage is a mini pub.

Luckily Earthstar data is easy to sync like this, but we may need to store each document as a separate LocalStorage item. However we also have some metadata that will be trickier to sync (list of workspaces and pub configuration).

Notes:

• LocalStorage has an onChange event we can use.
• There's also SessionStorage which is unique to each tab
• Could use cross tab communication to elect one tab as a leader, and funnel everything through that one?
  • BroadcastChannel
    • not supported in Safari. Use polyfill 1 or polyfill 2
  • use LocalStorage to communicate
  • SharedWorker - one webworker for multiple tabs (but not on safari)
• research on this issue
  • https://gist.github.com/pesterhazy/a840a21000b67cc5b7e601fdc91b9e18
  • https://github.com/firebase/firebase-js-sdk/blob/6a0154aee104a163d6d3b1a28d80fcbb9bace908/packages/firestore/src/local/indexeddb_persistence.ts#L125
  • localForage

Temporary workarounds:

• use a regular tab and a Private Browsing tab
• use two different browsers
• detect when running in a second tab and warn that changes are not permanent? Only sync to pubs but don't save to LocalStorage?