如何强制加载当前版本的离线网络应用程序？答案

【问题标题】：How to force loading the current version of an offline-able web app?如何强制加载当前版本的离线网络应用程序？
【发布时间】：2018-11-27 20:36:48
【问题描述】：

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

该应用程序是使用 Vue 编写的，为了完成上述任务，我只使用了他们的 PWA 模板以及它生成的任何内容。据我所知，它的作用是使用GenerateSW plugin 设置workbox 以预缓存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 之类的影响。（这使得“请刷新”颇具误导性。）

由于这将模拟一个原生应用程序，并且它应该是一个简单的业务线工具，我真的不需要做任何比立即重新加载到新版本的应用程序时更复杂的事情。更新可用。我怎样才能做到这一点？

【问题讨论】：

缓存，软件复杂。在替换软件缓存之前需要关闭“应用程序”...redfin.engineering/…
@RobertRowntree - 我很欣赏它是并且有偏头痛显示它，但如果按预期使用，它实际上永远不会在设备上运行多个选项卡，所以我宁愿避免如果可能的话，必须用手写的软件替换生成的软件，因为我只需要花那么多时间来交付它。
我从链接中获得的收获......你可以使用工作箱给你的东西......规范和实现几乎迫使你通知用户“请刷新以获得新软件”如果你wanna force SW re-register, re-activate 没有规范中的 24 小时延迟 developers.google.com/web/fundamentals/primers/service-workers/…
我的意思是，即使我刷新我也没有得到新代码
我在每次构建时散列一些随机字节并将它们放入页脚中，直到我从 devtools 清除应用程序存储后它才会改变

标签： caching webpack service-worker progressive-web-apps workbox

【解决方案1】：

好的，所以我观察到的行为是更新确实自动发生，只是事件的确切顺序并不明显。我将尝试描述我对生成的 Service Worker 如何在已安装的 PWA 场景中工作的最佳理解。为简单起见，我将使用“应用程序版本”来说话，因为这背后的心智模型更接近应用程序而非网页的工作方式：

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

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

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

【讨论】：