如何检测代码是否在Service Worker脱机模式下运行

Question

通过Service Worker，您可以缓存将在用户进入脱机模式时运行的文件。 这是示例代码：

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main1.js',
  '/script/main2.js'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

因此，您定义了要缓存的文件列表[main.css，main1.js和main2.js]，这些列表将在用户脱机时加载。

在main1.js文件中，我想定义一些代码，使其仅在服务工作者以离线模式加载文件时才运行。 有什么方法可以检测到这一点吗？

if(script_is_loaded_by_sw_in_offline_mode_not_online)
{
    //do some stuff here
}

Answer 1

您可以使用navigator.onLine来检测浏览器是处于联机还是脱机模式，因为无论联机模式还是脱机模式，服务工作者都将被注册，并且main1.js文件将始终被缓存，因为您已将其添加到urlsToCache ，你可以使用navigator.onLine在main1.js文件，检查你想要的条件。

Answer 2

事实证明， navigator.serviceWorker.controller是我所需要的：

if(navigator.serviceWorker.controller)
{
    //do some stuff here
}