CODEWITHSUNDEEP
firebasegoogle-cloud-firestorenuxt.js
SRR
SRR

Reputation: 1748

Firebase gives error when trying to enable offline persistence

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

Upvotes: 2

Views: 4755

Answers (1)

SRR
SRR

Reputation: 1748

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

Upvotes: 3

Related Questions