PWA：如何在每次打开应用时刷新内容

Question

我创建了一个 PWA 应用程序，它将 API 调用发送到我的家庭自动化服务器并在主页上打印响应（例如室外温度和真空机器人状态）。

虽然所有数据都会在第一次打开应用程序时刷新，但如果我最小化应用程序而不完全关闭它，则根本没有数据刷新。

我想知道如何在每次重新打开应用程序时强制刷新，而无需手动执行（没有下拉刷新，没有刷新按钮）。

Answer 1

我自己找到了在服务工作者中添加以下代码的解决方案：

self.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        console.log('APP resumed');
        window.location.reload();
    }
});

Answer 2

这是有效的解决方案。

您可以将此代码放置在您有权访问窗口对象的任何位置：

    window.addEventListener("visibilitychange", function () {
      console.log("Visibility changed");
      if (document.visibilityState === "visible") {
        console.log("APP resumed");
        window.location.reload();
      }
    });

考虑到每次用户在应用程序之间滑动时，这可能会影响用户体验或强制重新加载数据丢失。

Answer 3

如果您需要重新加载，以便用户获得您网站的最新版本（在 PWA 中），那么推送通知以及每当他们收到通知时，boom、window.reload() 或者另一种更简单的方法可能会添加每周超时window.reload()?