Multi-Tab Offline Support in Cloud Firestore!

These days, we are increasingly using mobile and web apps in situations where there’s little to no internet connectivity. We want to play videos during long road trips, navigate through areas with weak cell signals, and edit our cloud photos and documents on planes with no WiFi. That’s why it’s crucial to think about how your app will work offline as you’re building your next big idea!

Firebase has long helped developers build offline-capable apps. We introduced offline persistence for the iOS and Android Realtime Database SDKs back in 2015. We took care of the hard work behind the scenes, and you only had to write a single line of initialization code.

Taking it a step further, the Cloud Firestore SDKs support offline persistence on the Web, in addition to Android and iOS, allowing you to build rich and offline-capable apps on all your favorite platforms.

With offline persistence, the Cloud Firestore SDKs manage all your data locally, and can execute advanced queries purely against the local cache. Even when your app is restarted, all local edits to documents remain buffered until they are successfully sent to the backend.

But until now, Cloud Firestore’s offline support for Web had one big caveat: It only supported offline persistence for the first tab. If you’ve used it, you have probably come across this error:

'There is another tab open with offline persistence enabled. Only one such tab is allowed at a time. The other tab must be closed or persistence must be disabled.'

Fortunately, you never need to see that error again.

Today, we are introducing multi-tab offline persistence for the Cloud Firestore Web SDK. Your users can read and modify their local data even when they open your app in multiple tabs. All tabs access the same persisted data and synchronize local edits together, even when your network is not connected. This feature can even help reduce billing costs, because the SDK can share query results between tabs without reissuing the query to the backend!

The Firebase JS SDK 5.5.0 release includes experimental offline support for the Cloud Firestore Web SDK for Chrome, Safari and Firefox. You can turn on multi-tab synchronization as follows:

const db = firebase.firestore();
db.enablePersistence({experimentalTabSynchronization:true}).then(() => {
  console.log("Woohoo! Multi-Tab Persistence!");

Try out our new offline persistence features and let us know what you think! Share your feedback in our Google Group or on our GitHub page.