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

Question

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

Answer 1

服务工作者可以访问 indexedDB。或者，DOM 可以访问缓存存储。您可以在 indexedDB 或缓存存储中缓存一个键 "offline"，并检查获取事件中的值。

Answer 2

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

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

在您的主线程中 select 按钮并注册您的 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 了解如何访问缓存和控制发送到客户端的数据。

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

Is there a way to force a PWA to stay in offline mode via a toggle in-app?

javascript

offline-caching

node.js

service-worker

progressive-web-apps