Как включить офлайн-данные в firestore для Интернета
Я хочу включить офлайн-данные в свой проект. Я нашел для этого правильный код, но не знаю, где его реализовать.
Реализую код внутри файла firebaseConfig.js:
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.info(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')
}
})
У меня такая ошибка:
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Просто удалите второй firebase.firestore() и вызовите enablePersistence следующим образом:
import firebase from 'firebase'
import 'firebase/firestore'
// firebase init
// init code goes here
var config = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: ''
}
firebase.initializeApp(config)
const db = firebase.firestore();
const auth = firebase.auth();
const currentUser = auth.currentUser;
// date issue fix according to firebase
const settings = {
timestampsInSnapshots: true
};
db.settings(settings);
db.enablePersistence();
// firebase utils
//const db = firebase.firestore() // <---- Remove this line
const oldRealTimeDb = firebase.database()
const auth = firebase.auth()
const currentUser = auth.currentUser
Да, это то, что я делал раньше, но та же ошибка
Я думаю, вам стоит продвинуться вверх по db.settings(settings)
Я внес несколько дополнительных изменений. Можете ли вы подтвердить, что все в порядке (пока я не могу проверить)
он будет работать, но не для db.collection () ... -> 'collection' неопределенных
Вы имеете в виду, что вы больше не получаете ошибку, но в компоненте, когда вы пытаетесь запросить коллекцию, вы получаете ошибку. верно?
если я изменю const usersRef = db.collection ('users') на => const usersCollection = firebase.firestore (). collection ('users'), тогда он будет работать
Позвольте нам продолжить обсуждение в чате.
Как этот код может работать надежно? Обещание, возвращенное из enablePersistence, игнорируется. Сохранение фактически не включается, пока обещание не будет успешно разрешено. firebase.google.com/docs/reference/js/…
Пример кода, представленный в документация, предполагает, что вы должны вызвать enablePersistence () и, возможно, отметить, если он не работает по какой-либо определенной причине:
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
// ...
}
});
Последующие запросы после вызова enablePersistence() будут помещаться во внутреннюю очередь до полного завершения, что означает, что запрос может использовать или не использовать локально кэшированные данные, в зависимости от результата enablePersistence(). Если для вашего приложения важно иметь возможность использовать локальное постоянство, вы можете дождаться его результата (запуск по возвращенному обещанию) перед выполнением запроса.
Первый ответ технически неверен, потому что он игнорирует обещание, возвращаемое из enablePersistence. Это не гарантирует, что следующий запрос будет использовать постоянство. Используйте пример кода, приведенный в документации, чтобы добиться наилучшего поведения.
и как мне узнать, что первые примеры не сработают?
Может ли ваш запрос, который происходит сразу после вызова enablePersistence (), получить кэшированные данные при отсутствии подключения к Интернету? В противном случае настойчивость не работает.
Я только что обсудил это с командой клиентов Firestore. Похоже, что исходный образец кода вводил в заблуждение. На самом деле нет необходимости ждать результатов обещания, возвращаемого enablePersistence (), чтобы сделать первый запрос. Запросы будут помещаться во внутреннюю очередь до полного завершения enablePersistence (). Пример кода в документации скоро будет обновлен. Я тоже обновлю свой ответ.
Можете ли вы взглянуть на это с обработкой статуса онлайн / офлайн, пожалуйста: stackoverflow.com/questions/51768240/…
этот совет также помог мне с другой проблемой, связанной с несколькими вкладками AngularFirestoreModule.enablePersistence({experimentalTabSynchronization: true})
Если я не ошибаюсь, Лукас, вы используете Vue.js. Можете ли вы поделиться своим файлом main.js (и, возможно, всеми файлами, которые требуются в main.js)