Question

由于应用程序的性质和用户体验，我目前有一个服务工作者设置为立即声明页面。

由于此应用程序正在从为每个用户创建动态Manifest文件的AppCache进行转换，我发现最好的方法是将此Manifest文件解析为JSON数组并将其发送给Service Worker以便缓存它。问题是我需要等到服务工作者处于活动状态才能接收到这个数组。

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

spreadSheetView.addEventFilter(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                event.consume();
            }
        });
        spreadSheetView.addEventFilter(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                event.consume();
            }
        });
        spreadSheetView.addEventFilter(MouseEvent.MOUSE_RELEASED, new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                event.consume();
            }
        });

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

我附上相关的服务工作者代码，因为我设置直接索赔的方式存在问题。

//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);

Answer 1

navigator.serviceWorker.ready是客户端页面可以等待的承诺，当有一个活动服务工作者的范围包含当前页面时，它将解析。

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

但......两件事。

您可以使用context of your page中的Cache Storage API添加项目，而无需向服务工作人员发送消息。 window.caches.open('my-cache-name')将允许您访问服务工作者可以使用的相同缓存。
如果您有一组始终需要要缓存的资源，那么最好在install处理程序中缓存它们。这可确保服务工作者无法完成安装，除非缓存所需的文件。您可以在fetch()处理程序内使用install来检索需要预先缓存的资源的JSON清单，以及不向服务工作者公开的IndexedDB（而不是localStorage）存储当前用户的名称。只要确保如果你走这条路线，就可以利用event.waitUntil()延迟install处理程序的完成，直到整套操作成功为止。

Answer 2

我最终在Jeff建议的承诺中包装了我的getRequest（）函数的内容。

navigator.serviceWorker.ready

这使我的申请以最短的延迟完成！

服务工作者即时声明页面的最佳实践

2 个答案: