Question

我正在开发一个使用Firebase Firestore作为后端，NoSQL数据库和angular作为前端的Web应用程序，我在网站上进行了大量更新和更改，每次更改时我都需要向所有客户端提出要求刷新页面，这样做很丑陋，所以我尝试从dist文件夹中获取main。[hash] .js文件，并将其与每个新版本进行比较，但没有成功，我也尝试使用serviceWorker，也一无所获，我搜索了它在stackoverflow中，当我将新版本以7号角部署到我的Firebase托管中时，如何自动刷新页面找不到我满意的答案。

这是我最后一次与服务人员合作：

log-update.service.ts

isUpdateAvailable = new Promise((resolve, reject) => {
    console.log('calling isUpdateAvailable');
    if ('serviceWorker' in navigator && ['localhost', '127'].indexOf(location.hostname) === -1) {
      // register service worker file
      navigator.serviceWorker.register('service-worker.js')
        .then(reg => {
          reg.onupdatefound = () => {
            const installingWorker = reg.installing;
            installingWorker.onstatechange = () => {
              switch (installingWorker.state) {
                case 'installed':
                  if (navigator.serviceWorker.controller) {
                    // new update available
                    console.log('New update available...');
                    resolve(true);
                  } else {
                    // no update available
                    resolve(false);
                  }
                  break;
              }
            };
          };
        })
        .catch(err => console.error('[ERROR]', err));
    }
    console.log('Dev mode...');
  });

app.component.ts

ngOnInit() {
    this.logUpdateService.isUpdateAvailable.then(isAvailable => {
      if (isAvailable) {
        alert('New update found !');
      } else {
        console.log('No new update found.');
      }
    });
}

Answer 1

我在我的PWA中使用了Workbox，因此效果很好。用 workbox-window您可以简单地检测到新的Service Worker安装，并提示用户重新启动应用程序或在没有用户授权的情况下重新启动它。有关更多详细信息，建议您阅读this link。

Answer 2

我发现了问题，根据@Mises和@ Vash72的答案，我创建了一个名为 log-update.service.ts 我在这项服务中添加了三个乐趣：

isAvailable（）

newVersion（）

sameVersion（）

然后，我在仪表板中添加一个按钮，用于将Firestore数据库中的字段 isAvailable 的状态更改为TRUE，然后在 main.ts 中的isAvailable函数中 ngOnInit（）很有趣，每当Firestore中的 isAvailable 字段更改为 TRUE 时，我都会刷新客户端页面，并将该字段重新设置为< strong> FALSE

log-update.service.ts ：

export class LogUpdateService {
  updateCollection: AngularFirestoreCollection<Update>;

  constructor(private afs: AngularFirestore) {

  }

  isAvailable() {
    return this.afs.collection('update').doc('available');
  }

  newVersion() {
    const newversion: AngularFirestoreDocument<any> = this.afs.doc(`update/available`);
    newversion.update({isAvailable: true}).then(res => {
      console.log('Set new version to true');
    }).catch(err => {
      console.log(err);
    });
  }

  sameVersion() {
    const newversion: AngularFirestoreDocument<any> = this.afs.doc(`update/available`);
    newversion.update({isAvailable: false}).then(res => {
      location.reload();
    });
  }

}

update.ts ：

export interface Update {
  isAvailable: boolean;
}

main.ts ：

this.logUpdateService.isAvailable().valueChanges().forEach(res => {
      // @ts-ignore
      if (res.isAvailable) {
        console.log('refresh');
        this.logUpdateService.sameVersion();
      } else {
        console.log('No update.');
      }
    });

编辑： 但是有一个问题，如果有人关闭网站并再次输入，由于缓存的原因，他会发现相同的内容，而且如果有人打开了网站但网站选项卡未激活，也不会发生任何事情。

每次我部署新更改时都需要刷新页面

2 个答案: