CODEWITHSUNDEEP
javascriptfirebasegoogle-cloud-firestore
Lukas
Lukas

Reputation: 603

How to enable offline data in firestore for web

I want to enable offline data in my project. I found the right code for this but I don't know where to implement the code

I implement the code inside the firebaseConfig.js file:

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

// firebase init
// init code goes here
var config = {
 apiKey: '',
 authDomain: '',
 databaseURL: '',
 projectId: '',
 storageBucket: '',
 messagingSenderId: ''
} 
firebase.initializeApp(config)

firebase.firestore().enablePersistence()
 .then(function () {
   // Initialize Cloud Firestore through firebase
   var db = firebase.firestore();
 })
 .catch(function (err) {
   console.log(err)
 })

 // firebase utils
 const db = firebase.firestore()
 const oldRealTimeDb = firebase.database()
 const auth = firebase.auth()
 const currentUser = auth.currentUser

 // date issue fix according to firebase
 const settings = {
   timestampsInSnapshots: true
 }
 db.settings(settings)

 // firebase collections
 const usersCollection = db.collection('users')
 const postsCollection = db.collection('posts')

export {
 db,
 auth,
 currentUser,
 postsCollection,
 usersCollection

}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import {store} from './store'
import './registerServiceWorker'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader 
const fb = require('./firebaseConfig.js')

Vue.config.productionTip = false

export const bus = new Vue()

Vue.use(Vuetify)

let app
fb.auth.onAuthStateChanged(user => {
 if (!app) {
  app = new Vue({
   el: '#app',
   store,
   router,
   template: '<App/>',
   components: {
     App
   },
   render: h => h(App)
 }).$mount('#app')
}
})

I got this error:

Upvotes: 1

Views: 2165

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317467

The sample code provided in the documentation suggests that you should call enablePersistence() and possibly make note if it fails for some given reason:

firebase.initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###',
});

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

Subsequent queries after calling enablePersistence() will be internally queued until it fully completes, which means that the query may or may not be using locally cached data, depending on the result of enablePersistence(). If it's important to your app to be able to use local persistence, you may wish to wait on its result (triggering on the returned promise) before performing the query.

Upvotes: 6

Related Questions