如何在Webpack中从内存缓存中加载Web Worker

Question

编辑：不幸的是，我现在无法再复现这个问题了。我猜可能只是我的浏览器出现了一些奇怪的故障，导致了这种行为。

如果我浪费了任何人的时间，我深感抱歉。

以下为原始问题。

---

我使用 create-react-app 创建了我的应用程序，它使用的是 webpack@5.64.4。

我有一个 Web Worker，按照 https://webpack.js.org/guides/web-workers/ 上的指导进行加载。

export function createWorker() {
  return new Worker(new URL('../worker/my-worker.ts', import.meta.url));
}

这个程序完美地运行，除了一个问题：即使工作线程已经在缓存中，当没有网络连接时它总是失败。这破坏了我的应用的离线体验。

在网络日志中，我可以看到我们总是发送一个网络请求来检查更新的工作线程块。服务器会回复304 NOT MODIFIED，之后它就能正常工作。然而，如果无法访问服务器，脚本就无法加载，我们就会失败。其他块从内存缓存中正确地提供，而不需要调用服务器。

- wvdz

---

首先，您是否正确设置了“Cache-control”标头？您是否检查过Webpack（或其他工具）是否添加了任何缓存破坏的查询字符串或标头？ - user3840170

你的应用程序中是否在使用Service Workers？如果是，它们可以为您缓存此资产。Service Workers允许更好地控制缓存项目。有时，对于某些缓存策略，不依赖浏览器可能会更好。 - Eduardo Poço

事实上，我再也无法重现这个行为了。我在问题的顶部添加了一次编辑，以便清楚地表达这一点。 - wvdz

Answer 1

这是 sw.js 的 JavaScript 代码，它是一个服务工作器文件，它将拦截网络请求并从缓存中提供它们：

const CACHE_NAME = "my-app-cache-v1";

self.addEventListener("fetch", event => {
    event.respondWith(
        fetch(event.request).then(response => { //if the response was successful, clone it and store it in the cache
            if (response.status === 200) {
                caches.open(CACHE_NAME).then(cache => {
                    cache.put(event.request.url, response.clone());
                });
            }
            return response;
        }).catch(() => { //if the request fails, try to serve it from the cache
            return caches.match(event.request).then(response => {
                return response || fetch(event.request);
            });
        })
    );
});

要注册它，请在您的页面上调用此函数：

if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
        navigator.serviceWorker.register("/sw.js");
    });
}

请注意，serviceworker 将在您域名根目录下的任何页面中处于活动状态，而不仅仅是调用此注册的页面。

您可以在开发工具中查看网络请求是否来自网络、浏览器缓存或 serviceworker，以确认其是否正常工作。

- Eduardo Poço