How To Enable Firestore Cache In Flutter Web Apps

Reduce database load and add offline capabilities to your apps. Here is how to enable Firestore cache in Flutter web apps.

Made with Bing Image Creator

In case you didn’t know yet: Firebase Firestore can be used offline by enabling an internal cache. Your read and write operations work normally in offline mode and will synced with the database once the device is online again. This feature is enabled on Android and iOS by default. But for web apps you need to enable it yourself. Here is how to enable Firestore cache in Flutter web apps.

Enable persistence

Web apps don’t have persistence enabled by default because the browser might not support it. Currently, you are fine with Chrome, Safari, Firefox, and Edge. To enable persistance, use the following code:

await FirebaseFirestore.instance
          .enablePersistence(const PersistenceSettings(synchronizeTabs: true));

This must be the first call to Firestore after your app launches. Otherwise, it will fail with the following error message:

With the synchronizeTabs parameter you can specify how your app should handle multiple tabs. If this value is false and a user opens your app in more than one tab, this call will fail…