Service Worker 即时声明页面的最佳实践

由于应用程序和用户体验的性质，我目前设置了一名服务工作人员来立即认领该页面。

由于此应用程序是从 AppCache 转换过来的，AppCache 为每个用户创建了一个动态清单文件，因此我发现最好的方法是将此清单文件解析为 JSON 数组并将其发送到 Service Worker 以便缓存它。问题是我需要等到 Service Worker 处于活动状态才能接收该数组。

我目前已将该函数的超时设置为 10000（见下文），但成功率不是 100%。Edit:我经常发现 Service Worker 在 10000 超时结束之前没有激活，导致错误：“TypeError: navigator.serviceWorker.controller is null”。

//Get Request - Service Worker Preperation 
setTimeout(function getRequest() {
  console.log("APP: Enetered getRequest() Method");
  $.ajax({
    type : "GET",
    url : "https://ExampleURL/App/" + 
    localStorage.getItem("user") + ".manifest",
    contentType: "text/plain",
    async : false,
    success : function(response) {
        var myArray = listToArray(response, '\n'); 
        send_message_to_sw(myArray);
    },
    error : function(msg) {
        console.log("ERROR: " + msg);
     }
    });
}, 10000);

我的问题是检查服务工作人员是否处于活动状态的最佳实践是什么，或者我应该增加超时时间吗？

我在下面附上了相关的 Service Worker 代码，以防我设置立即索赔的方式出现问题。

// INSTALL
self.addEventListener('install', function(event) {
  console.log('[ServiceWorker] Installed version', version);
  event.waitUntil(
    caches.open(version).then(function(cache) {
        console.log('[ServiceWorker] Cached cachedFiles for', version);

        return cache.addAll(cacheFiles);

    }).then(function() {

      console.log('[ServiceWorker] Skip waiting on install');
      return self.skipWaiting();
    })
  );
});


 //ACTIVATE
 self.addEventListener('activate', function(event) {

  self.clients.matchAll({
    includeUncontrolled: true
  }).then(function(clientList) {
    var urls = clientList.map(function(client) {
      return client.url;
    });
    console.log('[ServiceWorker] Matching clients:', urls.join(', '));
  });

  event.waitUntil(

    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheName !== version) {
            console.log('[ServiceWorker] Deleting old cache:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    }).then(function() {


      console.log('[ServiceWorker] Claiming clients for version', version);
      return self.clients.claim();
    })
  );
});


//RECIEVE DATA FROM JAVASCRIPT FILE
self.addEventListener('message', function(event){
  console.log("SW Received Message: " + event.data);
  var fullArray = [];

  var che = event.data;
  fullArray = che.splice(',');
  console.log("SWChe2: " + fullArray);
  var result = fullArray.slice(1,-1);


  caches.open(version + 'Manifest')
  .then(function(cache) {
    return cache.addAll(result);
 });
});

navigator.serviceWorker.ready https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/ready是一个客户端页面可以等待的承诺，并且当存在范围包含当前页面的活动服务工作者时将解决。

navigator.serviceWorker.ready.then(registration => {
  // Do something, confident that registration corresponds to
  // an active SW's registration.
});

但是……有两件事。

• 您可以使用 Cache Storage API 添加项目您页面的上下文 https://googlechrome.github.io/samples/service-worker/window-caches/，无需向服务人员发送消息。window.caches.open('my-cache-name')将使您能够访问服务工作人员可以使用的相同缓存。

• 如果您拥有一组始终可以使用的资源need要缓存，您最好将它们缓存在您的install处理程序。这可确保服务工作线程无法完成安装，除非缓存了所需的文件。您可以使用fetch()在你的里面install处理程序来检索需要预缓存的资源的 JSON 清单，以及 IndexedDB（而不是localStorage，不向服务工作人员公开）来存储当前用户的名称。只要确保如果您走这条路，您就会利用event.waitUntil()来延迟install处理程序完成，直到全套操作成功。