是否有一种方法可以通过应用内切换来强制PWA保持离线模式？

Question

最近才刚刚开始构建PWA，我认为隐私和控制的一个有用功能可能是网站上的切换，该切换允许用户强制网站保持脱机模式，直到再次按下切换。但是，经过一番研究，我找不到任何方法可以实现这一目标，有人有什么想法吗？预先感谢。

Answer 1

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

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

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

然后在Service 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
      });
    });
  }
});
中侦听ServiceWorkerGlobalScope事件。这是message功能的接收端。您可以在这里处理数据并更新offlineMode的设置。
然后添加另一个事件侦听器并侦听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.
  }
});
上阅读以了解如何访问缓存并控制发送到客户端的数据。

Answer 2

服务人员可以访问indexedDB。或者，DOM可以访问缓存存储。您可以将键“ offline”缓存在indexedDB或缓存存储中，并检查fetch事件上的值。