javascript - 在 Service Worker 中缓存 webpack 散列 url

我正在和服务人员一起玩。我目前有以下服务人员:

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
    'index.html',
    'app.bundle.js',
    'images/image.jpg'
];

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

但是，我在构建时使用 webpack 向所有文件添加哈希。这意味着我不知道在 Service Worker 中缓存哪些 url。

我不知道如何解决这个问题。

最佳答案

实现此目的的一种方法是使用插件来访问编译或最终 stats 对象，然后以编程方式创建可以添加到输出中的服务 worker 脚本。

插件通常为 emit 或 done 事件注册一个处理程序来完成这个。在这些点上，您将能够枚举正在发出的 Assets 、它们的 URI 和源文件依赖项。

我可能会建议查看 Workbox ，因为它的目的是与 service worker API 集成，更具体地说是 workbox-webpack-plugin ，因为它利用 webpack 的编译器来动态创建 service worker 脚本。 html-webpack-plugin 也是一个有用的信息来源，因为它非常流行，我们大多数人都能理解它需要执行什么。

关于javascript - 在 Service Worker 中缓存 webpack 散列 url，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53883488/

Webpack

javascript - 在 Service Worker 中缓存 webpack 散列 url