狩猎幽灵 offline.html

Question

我曾经写过一个快速的'offline.html'。请确保我了解离线 PWA 的工作原理：

This is offline.html (My App Name)

我认为它按预期工作。所以我删除了它并写了一个更好的，带有后退按钮，一些信息等。

现在，当此应用处于离线状态时，它会按预期在 manifest.json 天后在页面上启动。

但是，如果我尝试刷新页面，就会出现 "offline.html"。不知从何而来。

我试图了解它的隐藏位置，但找不到。（当我在网络浏览器中访问时，新的 "offline.htmi" 就在那里。）

我已经在我的手机上离线尝试过 Firefox，看看是否会跳到那里。确实如此。

我已经清除了 Chrome 中的缓存。阴森森的 "offline.html" 仍然存在。

有什么想法吗？

（这是在 Android 9 上）

Answer 1

离线页面并不完全像常规缓存项一样存储在缓存中，相对于当前安装的 Service Worker，其存储方式有很大不同。我试图寻找一篇文章来对此进行更多解释，但目前无法四处走动。

但是您必须 unregister your service worker or learn how Updating service worker works,

目的是移除潜伏的 offline.html 服务于新存在的 offline.html。

Answer 2

这就是我最终得到的结果。它似乎工作。 404 的测试当然不是最优的，但我暂时保留它，希望新兴标准能够尽快解决这个问题。

async function setupServiceWorker() {
  let reg;
  if (navigator.serviceWorker.controller) {
    console.log("Active service worker found, no need to register");
    // new Popup("registered service worker, .active.scriptURL", reg.active.scriptURL, null, true).show();
    reg = await navigator.serviceWorker.getRegistration();
  } else {
    reg = await navigator.serviceWorker.register("service-worker.js", { scope: "./" });
    console.log("Service-worker.js registered, scope: " + reg.scope);
  }
  try {
    if (navigator.onLine) {
      const newReg = await reg.update();
    }
  } catch (err) {
    const is404 = err.message.match("404");
    new Popup("err", is404 + " " + err.message).show();
    if (is404) {
      let wasUnregistered;
      try {
        wasUnregistered = await reg.unregister();
      } catch (errUnreg) {
        new Popup("unregister() service worker failed", errUnreg.message).show();
      }
      if (wasUnregistered) {
        setTimeout(setupServiceWorker, 1000);
      }
    }
  }
}
setTimeout(setupServiceWorker, 5000);

狩猎幽灵 offline.html

Hunting a spooky offline.html

android

offlineapps

progressive-web-apps