Laravel集成Firestore实现离线/在线数据同步的问题咨询

核心逻辑说明 #

Firestore 离线持久化是纯前端特性，和 Laravel 后端对接 Firestore 的服务端逻辑互不冲突，所有离线缓存、网络恢复后自动同步的能力都由前端 Firestore SDK 实现，不需要额外开发同步逻辑。

第一步：修正代码执行顺序 #

你现有代码的核心问题是enablePersistence必须在所有 Firestore 读写操作之前执行，且同一个页面仅需执行一次，同时原代码存在模板字符串缺少反引号、属性名拼写错误的问题。

第二步：替换为修正后的代码 #

你可以选择存放在resources/js/offline-persistence.js或者直接写在 blade 文件的 script 标签中，代码如下：

// 注意：必须在 firebase 全局初始化完成后再执行以下代码
firebase.firestore().enablePersistence()
  .then(() => {
    // 持久化开启成功后再初始化数据监听，确保离线场景下监听器也能读取本地缓存
    firebase.firestore().collection('test')
      .onSnapshot(snaps => {
        if (snaps.empty) return;
        const preDataElm = document.getElementById("preData");
        while (preDataElm.firstChild) {
          preDataElm.removeChild(preDataElm.firstChild);
        }
        const list = snaps.docs.map(snap => ({
          id: snap.id,
          ...snap.data()
        }));
        const newElm = document.createElement("PRE");
        newElm.innerText = JSON.stringify(list, null, 2);
        preDataElm.appendChild(newElm);
      });
  })
  .catch((err) => alert(`启用离线持久化失败，错误码：${err.code}`));

function tryMe() {
  document.getElementById("result").innerHTML = "";
  firebase.firestore()
    .collection('test')
    .add({test: new Date().toString()})
    .then((docRef) => alert(`数据插入成功，ID：${docRef.id}`));
}

第三步：Laravel 项目引入配置 #

• 如果代码存放在resources/js/offline-persistence.js中，需要在构建配置中注册该文件：
  • 用 Vite 构建的项目，在对应 blade 模板中通过@vite('resources/js/offline-persistence.js')引入，确保引入顺序在 firebase 初始化代码之后
  • 用 Mix 构建的项目，在webpack.mix.js中添加mix.js('resources/js/offline-persistence.js', 'public/js')，编译后在 blade 中引入生成的 js 文件
• 如果直接写在 blade 中，将 script 标签放在 firebase 初始化 script 标签的下方即可

适配 Vue 组件的写法 #

如果需要在 Vue 组件中使用，将初始化逻辑放到onMounted生命周期中即可：

import { onMounted } from 'vue'
// 确保已经在项目中正确初始化 firebase 实例
import { getFirestore, enablePersistence, collection, onSnapshot, addDoc } from 'firebase/firestore'

onMounted(() => {
  const db = getFirestore()
  enablePersistence(db)
    .then(() => {
      const testCol = collection(db, 'test')
      onSnapshot(testCol, (snaps) => {
        // 这里把数据赋值给 vue 响应式变量即可
      })
    })
    .catch(err => console.log('离线持久化开启失败', err.code))
})

常见注意事项 #

• 不要重复调用enablePersistence方法，单页面仅需执行一次，多次调用会抛出异常
• 浏览器隐身模式下部分浏览器不支持持久化存储，此时会触发 catch 逻辑，不影响正常在线功能使用
• 本地离线缓存最大容量由浏览器限制，一般在 10MB 到 100MB 区间，超出容量后浏览器会自动清理最早的缓存数据

内容的提问来源于stack exchange，提问作者ashar muhammad