有没有办法通过应用内切换来强制 PWA 保持离线模式？答案

【问题标题】：Is there a way to force a PWA to stay in offline mode via a toggle in-app?有没有办法通过应用内切换来强制 PWA 保持离线模式？
【发布时间】：2020-09-04 00:32:19
【问题描述】：

最近刚开始构建 PWA，我认为一个有用的隐私和控制功能可能是网站上的切换，允许用户强制网站保持离线模式，直到再次按下切换。但是，经过一些研究，我无法找到任何方法来实现这一点，有人有什么想法吗？提前致谢。

【问题讨论】：

是的，看看服务人员..developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
添加到@Keith 的评论。在 Service Worker 中，您可以拦截正在发出的每个 fetch 请求。在那里，您可以决定是实际获取新数据还是使用缓存中的数据。所以在线与离线。
@EmielZuurbier 谢谢你的回复，我已经调查过了，但我不确定如何告诉服务人员我的应用程序处于在线/离线模式，因为服务人员似乎没有访问 DOM 元素或 localStorage？
@BenCooper service worker 确实无法访问 DOM 或 localStorage。但是，它可以从主线程接收消息，通过message 事件告诉您您是处于在线模式还是离线模式。

标签： javascript node.js service-worker progressive-web-apps offline-caching

【解决方案1】：

在 HTML 中创建一个切换或复选框，您将控制状态。这个输入元素将控制离线模式是打开还是关闭。该输入的值必须发送给服务工作者，然后服务工作者可以决定在发出fetch 请求时做什么。

<input id="check-offline" type="checkbox" name="offline-mode">
<label for="check-offline">Offline mode</label>

在您的主线程中选择按钮并注册您的 Service Worker。每当工作人员成功注册时，将事件侦听器添加到您在此处创建的输入并侦听change。在事件侦听器的处理程序中，使用 worker 上的postMessage 函数将检查的值发送给 worker。

const offLineToggle = document.getElementById('check-offline');

navigator.serviceWorker.register('/path/to/service-worker.js').then(registration => {
  const serviceWorker = registration.active;
  if (serviceWorker !== null) {
    offLineToggle.addEventListener('change', event => {
      serviceWorker.postMessage({
        name: 'offlineMode',
        value: event.target.checked
      });
    });
  }
});

然后在您的 Service Worker 脚本中创建一个对象（或变量）来存储当前设置。在 ServiceWorkerGlobalScope 中监听 message 事件。这是postMessage 函数的接收端。在这里您可以处理数据并更新离线模式的设置。

然后添加另一个事件侦听器并侦听fetch 事件，只要从主线程发出fetch 请求，就会触发该事件。在事件处理程序中检查离线模式是打开还是关闭并进行相应处理。

const settings = {
  offlineMode: false
};

self.addEventListener('message', { data } => {
  const { name, value } = data;
  if (settings.hasOwnProperty(name)) {
    settings[name] = value;
  }
});

self.addEventListener('fetch', event => {
  const { offlineMode } = settings;
  if (offlineMode === true) {
    // Force return data from cache.
  } else {
    // Get fresh data from the server.
  }
});

这一切都是它如何工作的概述。阅读Using Service Workers article on MDN，了解如何访问缓存并控制发送到客户端的数据。

【讨论】：

太棒了，非常感谢你，我非常感谢：D

【解决方案2】：

Service Worker 可以访问 indexedDB。或者，DOM 可以访问缓存存储。您可以在 indexedDB 或缓存存储中“离线”缓存键，并检查 fetch 事件的值。

【讨论】：