Question

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

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向所有文件添加了哈希。这意味着我不知道要在服务工作者中缓存哪些URL。

我不确定该如何解决。

Answer 1

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

插件通常为emit或done事件注册一个处理程序以完成此操作。至此，您将能够枚举正在发射的资产，它们的URI和源文件依赖性。

我建议您考虑一下Workbox，因为它的目的是与Service Worker API（更具体地说是workbox-webpack-plugin）集成，因为它利用Webpack的编译器动态创建Service Worker脚本。 html-webpack-plugin还是有用的信息来源，因为它非常流行，而且我们大多数人都可以理解它需要执行的操作。

在Service Worker中缓存Webpack哈希URL

1 个答案: