Firebase gives error when trying to enable offline persistence

Question

I'm trying to enable offline persistence on a web app with Nuxt.js. However, I get an error:

Error enabling offline persistence. Falling back to persistence disabled: FirebaseError: [code=unimplemented]: 
This platform is either missing IndexedDB or is known to have an incomplete implementation. 
Offline persistence has been disabled.

My code in the firebase.js in the plugins directory is:

import firebase from 'firebase/app'
import 'firebase/firestore'

const config = {
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        projectId: '',
        storageBucket: '',
        messagingSenderId: '',
        appId: '',
        measurementId: ''
}
firebase.initializeApp(config)

const fireDb = firebase.firestore();
fireDb.enablePersistence()
  .catch(function(err) {
      if (err.code == 'failed-precondition') {
          // Multiple tabs open, persistence can only be enabled
          // in one tab at a a time.
          // ...
          console.log(err.code);
      } else if (err.code == 'unimplemented') {
          // The current browser does not support all of the
          // features required to enable persistence
          // ...
          console.log(err.code);
      }
  });



export{fireDb}

How can I fix this error? It should be noted that reading from or writing to firestore works fine

Is this code meant to be running server-side? If so, this is expected as there is no persistence implementation in the Firebase SDK for server-side platforms. — Frank van Puffelen, Mar 26 '20 at 20:29
@FrankvanPuffelen didn't get a notification for your comment. But no this is intended to be executed on the client. I've figured it out however, I'll write an answer soon — SRR, Apr 04 '20 at 20:37
@FrankvanPuffelen I could use your expertise on another issue if you'll oblige me. https://stackoverflow.com/questions/60926389/firebase-cloud-messaging-not-working-with-samsung-internet — SRR, Apr 04 '20 at 20:41

SRR · Accepted Answer · 2020-08-29T01:38:36.420

So Nuxt has both server and client side execution. If you want something to be executed on the client side alone (in javascript) you have to wrap it in process.browser.

if(process.browser){
fireDb.enablePersistence()
  .catch(function(err) {
      if (err.code == 'failed-precondition') {
          // Multiple tabs open, persistence can only be enabled
          // in one tab at a a time.
          // ...
          console.log(err.code);
      } else if (err.code == 'unimplemented') {
          // The current browser does not support all of the
          // features required to enable persistence
          // ...
          console.log(err.code);
      }
  });
}

Note that if you're initializing firebase cloud messaging you'd have to take the same approach.

If you had some html or a component you'd have to wrap it in <client-only></client-only> since no-ssr has been deprecated

Firebase gives error when trying to enable offline persistence

1 Answers1