如何使 Firestore Persistence 与使用 vuejs 制作的 Progressive Web App 一起工作

Question

我用 vuejs 制作了一个应用程序，顺便说一下，它很棒。 它使用具有本地持久性的 firebase 身份验证， 以及一个启用了持久性的 firestore 数据库。 一切似乎都很好。 我决定用它做一个 PWA，这样人们就可以离线使用它， 资产是从缓存中加载的，我有安装横幅。 我的问题是 firestore 持久性无法正常工作。

• 问题 1：离线时，当我将成员插入到 firestore "members" 集合时，ui 没有刷新（一旦我恢复在线，用户就在列表，所以持久性部分起作用）

• 问题2：成员列表。离线时，应用程序无法访问持久性 "members" 合集的版本。

这个列表是在应用加载时加载的，但是刷新后，它就消失了。 解决这个问题的最佳方法是什么？ 感谢您的帮助。

Answer 1

我终于找到了解决办法： 我创建了一个方法：

realtimeListenerMembres() {
      // real-time listener
      let self = this;
      this.$firebase
        .firestore()
        .collection("membres")
        .onSnapshot((snapshot) => {
          //console.log(snapshot.docChanges());

          snapshot.docChanges().forEach((change) => {
            if (change.type === "added") {
              self.membres.push({
                ...change.doc.data(),
                id: change.doc.id,
              });
            }
            if (change.type === "removed") {
              // remove the document data from the web page
            }
            self.sendToGroupe();
          });
        });

我把校准器放在 "created" 循环中。

created() {
    this.realitimeListenerGroupe();
    this.realtimeListenerMembres();
    this.realtimeListenerReunions();
  },

现在 assets 和 firestore 都可以持久化。 pwa 可以完全离线工作，然后与 firestore 同步 互联网连接恢复。