如何告诉 Service Worker 要缓存哪些文件

Question

我在做什么

我正在构建一个 Service Worker 组件。我希望它有：

包含 Service Worker 实现的单个 worker.js 文件。
我希望能够告诉工作人员要缓存哪些文件，以及缓存的名称。
- 为什么？我想在几个项目中需要这个模块，我不希望他们中的任何一个修改工作文件。工作人员应该能够收到缓存路径列表。

我试过的

我尝试将配置对象传递给注册方法，但没有成功。工人没有收到物品。
利用 worker 上可用的 postMessage API 我这样做了：
1. 在工作人员的注册中，我向工作人员发送了一条消息，其中包含一个包含要缓存的路由的对象。
2. 在工作人员内部，我已经为工作人员订阅了这条消息，并使用路径创建了缓存。

See it for yourself

在主线程注册worker

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/worker.js').then(function(reg) {
        navigator.serviceWorker.controller.postMessage({
            'hello': 'world',
            cacheName: 'v1',
            urlsToCache: [
                "/index.html"
            ]
        });
    }, function(err) {
        console.log('ಠ_ಠ   Nope.', err);
    });
}

工人档案

'use strict';

var cacheName,
    urlsToCache;

importScripts('/node_modules/serviceworker-cache-polyfill/index.js');

self.addEventListener('message', function (evt) {
    cacheName = evt.data.cacheName;
    urlsToCache = evt.data.urlsToCache;
});

self.addEventListener('install', function(event) {
    setTimeout(function(){
        event.waitUntil(
            caches.open(cacheName)
            .then(function(cache) {
                console.log('Opened cache:', cache);
                return cache.addAll(urlsToCache);
            })
        );
    }, 2000);

});

这有什么问题吗？

我不得不使用 setTimeout 延迟打开缓存，这是错误的、丑陋的和不可靠的。

伙计，你想达到什么目的？ ಠ_ಠ

我想找到一种方法告诉工作人员等待包含缓存路径的消息到达。

Link to my repo

提前致谢。

Answer 1

我已经向您发送了一个合并请求：https://github.com/cristianelias/serviceworker_component/pull/1。基本上我所做的是使用页面本身的缓存对象，如下所示：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/worker.js').then(function(reg) {
      caches.open('pages').then(function(pages){
         return pages.add('test.html'); 
      }).then(function(){
         console.log('cached!'); 
      });
    }, function(err) {
      console.log('ಠ_ಠ   Nope.', err);
  });
}

并指示SW只执行一次缓存匹配：

'use strict';

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(match){
            return match || fetch(event.request); 
        })
    );
});

它在 Chrome 45 上按预期工作，我不知道旧版本，因为将缓存对象移动到页面是一件很新的事情。

如何告诉 Service Worker 要缓存哪些文件

How to tell Service Worker which files to cache

google-chrome

caching

browser-cache

service-worker