Offline Support

Adding offline support with y-indexeddb.

We covered that network providers sync document updates over a network protocol to other peers. Database providers sync document updates to a database. The y-indexeddb provider syncs document updates to an IndexedDB database - a low-level NoSQL store that is supported by all modern browsers.

Adding offline support in Yjs is as easy as including the y-indexeddb provider:

Use

import { IndexeddbPersistence } from 'y-indexeddb'

const ydoc = new Y.Doc()
const roomName = 'my-room-name'
const persistence = new IndexeddbPersistence(roomName, ydoc)

// The persistence provider works similarly to the network providers:
// const network = new WebrtcProvider(roomName)

Install

npm i y-indexeddb --save

Now every change is persisted to a local database. The next time you visit your site, your document will be loaded from the IndexedDB database. Only the latest changes are synced over the network provider.

You can listen to synced events that fire when your client loaded content from the IndexedDB database:

persistence.once('synced', () => { console.log('initial content loaded') })

Another advantage of using y-indexeddb is that it replicates state to every peer that ever visited the document. In case any peer (e.g. the server) loses some data, the other peers will eventually sync the latest document state back to the server.

y-indexeddb works with any other provider. Again, Yjs providers are meshable. You can use several providers at the same time to achieve maximum reliability.

Database providers also allow native applications to sync document state to a local database. There is a growing collection of providers that work in different environments available in the ecosystem section.

Loading HTML content without network access

In case you manage all application state with Yjs, you'll have an easy time adding offline support to your app. Simply add y-indexeddb and include a service worker to make the website accessible even without network access.

A service worker acts like a proxy that persists your HTML/JS/CSS in the web browser. When all data is persisted using service workers, you can even load your website without internet access.

This resource is a great starting point to build your own service worker:

30 Days of PWA - Learning Series about Progressive Web Apps