Question

我正在做一个可离线使用的小型Web应用程序/ PWA。它的目的是从主屏幕图标打开，并通过离线时完全从缓存加载来模仿常规应用。

该应用程序是使用Vue编写的，要完成上述工作，我只是使用其PWA模板及其生成的任何东西。据我所知，这是通过workbox设置GenerateSW plugin来预缓存Webpack构建中的所有内容，并使用register-service-worker注册它。也就是说，我对细微的细节几乎没有控制权，这是一个交钥匙解决方案。

也就是说，我不确定在可用时如何实际加载该应用程序的新版本。上面的代码可以检测到-生成的SW注册文件以及我的更改如下：

import debug from 'debug';
import { register } from 'register-service-worker';


if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready(...args) {
      log('App is being served from cache by a service worker.\n', ...args);
    },
    cached(...args) {
      log('Content has been cached for offline use.', ...args);
    },
    updated(...args) {
      log('New content is available; please refresh.', ...args);
    },
    offline(...args) {
      log('No internet connection found. App is running in offline mode.', ...args);
    },
    error(error, ...args) {
      log('Error during service worker registration:', error, ...args);
    }
  });
}

当我重新构建应用程序并在浏览器中刷新应用程序时，将执行updated()回调，但是没有做其他事情。当我尝试添加时：

window.location.reload(true);

这应该是强制刷新，我只是得到一个刷新循环。我假设这是因为服务工作者缓存完全独立于浏览器缓存，并且不受上述或 Ctrl + F5 之类的影响。（这使“请刷新”颇具误导性。）

由于这将模仿本地应用程序，并且它应该是一种简单的业务流程工具，所以我真的不需要做任何复杂的事情，而无需在重新启动应用程序后立即重新加载到新版本的应用程序更新可用。我该如何实现？

Answer 1

好的，所以我观察到的行为是更新确实自动发生，关于事件的确切顺序是什么并不明显。我将尝试描述对生成的服务工作程序在已安装的PWA方案中如何工作的最佳理解。为了简单起见，我将使用“应用程序版本”来进行说明，因为其背后的思维模式更接近于应用程序而不是网页的工作方式：

您将应用程序的v1部署到服务器上，将其安装/预缓存在设备上，然后首次运行。
当您暂停并恢复您的应用程序时，它完全不会影响您的服务器。
该应用将在冷启动或重新加载页面（即使用Android上的下拉手势）时检查更新。
（可能还会随着缓存版本的过时而定期更新，但我没有检查过。）
假设您在此期间已部署了应用程序的v2。重新加载该应用的v1实例会发现此更新，并对其进行预缓存。
（提示用户重新加载的一个原因似乎没有道理。无论要完成的重新加载操作都已经发生。）
重新加载绝对不执行任何操作。该应用在两次重载之间仍保持运行状态，之后您将只获得v1。
（原因二，提示用户重新加载是没有意义的-这不是导致应用程序新版本加载的原因。）
但是，下次您冷启动时，例如从任务切换器中删除它并重新打开-您的应用程序的v2将被加载，我猜测v1将被清除。也就是说，您的应用必须完全关闭才能加载更新。

简而言之，要将应用程序从v1更新到v2，需要执行以下步骤：

将v2部署到服务器
刷新设备上的v1实例，或关闭并重新打开应用。
再次关闭并重新打开应用。

如何强制加载可脱机使用的Web应用程序的当前版本？

1 个答案: