防止工作人员每次创建时访问服务器

Question

我必须让我的页面照常工作，但即使没有网络连接。唯一的问题是每次创建 worker 时，它都会重新加载它的 js 文件，因此在连接丢失后，它会抛出错误并且什么也不做。我有代码：

let my_worker = null

function start(from_v, to_v){
    my_worker = new Worker('wwa_worker.js');
    my_worker.postMessage({ from_val: from_v, to_val: to_v});
    my_worker.onmessage = function (e) {
        result_field.value = e.data;
    }
}

function stop(){
    my_worker.terminate();
    my_worker = null
}

主要思想是我必须缓存 worker 的 js 文件，这样它就不会在本次会话中再次加载。

Answer 1

如评论中，我用的是service worker

在主 js 文件中注册工人：

// main.js

navigator.serviceWorker.register('/service-worker.js');

然后每次调用 fetch 时，尝试在缓存中查找资源，如果不存在则从服务器加载它（code from MDN，带回退的版本也在这里）：

// service-worker.js

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request).then((resp) => {
            return resp || fetch(event.request).then((response) => {
                return caches.open('v1').then((cache) => {
                    cache.put(event.request, response.clone());
                    return response;
                });
            });
        })
    );
});

防止工作人员每次创建时访问服务器

Prevent worker from accessing server every time it is created

javascript

web-worker