caching - 有没有办法缓存服务 worker 中定义的文件夹/路径的所有文件？

Question

在服务工作线程中，我可以定义在服务工作线程启动期间缓存的资源数组，如下所述:

self.addEventListener('install', event => {
    event.waitUntil(caches.open('static-${version}')
        .then(cache => cache.addAll([
            '/styles.css',
            '/script.js'
        ]))
    );
});

如何在服务工作线程中定义路径/目录，以便服务工作线程从给定路径/目录中选取所有文件并将所有文件添加到缓存中，而不是编写所有文件名？

Answer 1

是的，你可以。我也有此类问题，我使用 performance 找到了很酷的解决方案。这是我的sw.js :

const KEY = 'key';

self.addEventListener('install', (event) => {
    event.waitUntil(self.skipWaiting());
});

self.addEventListener('message', (event) => {
    if (event.data.type === 'CACHE_URLS') {
        event.waitUntil(
            caches.open(KEY)
                .then( (cache) => {
                    return cache.addAll(event.data.payload);
                })
        );
    }
});

这是我的main.js :

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js', { scope: '/' })
        .then((registration) => {
            const data = {
                type: 'CACHE_URLS',
                payload: [
                    location.href,
                    ...performance.getEntriesByType('resource').map((r) => r.name)
                ]
            };
            registration.installing.postMessage(data);
        })
        .catch((err) => console.log('SW registration FAIL:', err));
}

通过这个，您还可以添加一些过滤器来缓存特定路径。