service-worker - Chrome Cache-API - 缓存匹配

Question

我已经使用 CacheAddall 方法缓存了资源，版本为“v22”，v22 版本有很多文件，例如如下：

现在我如何访问相同的内容并单独更新或删除。我可以访问v22

caches.keys().then(keys => {
        keys.map(key => {
          console.log(key)
        })
      })

但是这里console.log只返回v22，例如如何访问/pwa/js/app/js

我找不到解决方法。

Answer 1

首先，您需要根据您的版本名称安装回调（例如：v22）。所以，我们需要采取以下步骤：

1）打开缓存。2）缓存我们的文件。3）确认是否缓存了所有需要的资产。

为了更清楚，您可以访问以下网址。 https://developers.google.com/web/fundamentals/primers/service-workers

就像下面的代码。

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

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

然后为了访问，您需要使用fetch服务人员的事件。

就像下面的代码。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

对于更新和删除，您可以使用activate服务人员事件。请cacheWhitelist正确阅读。但是，如果要更新，则必须更改chachname/versionservice worker 的名称。对于删除，您可以使用直接删除map()。

就像下面的代码。

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [cacheName];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

我希望它对你有帮助..!!

Answer 2

我让它工作，但仍在寻找更好的解决方案。

self.addEventListener('push', function(event) { console.log("同步事件", event); var eventData = event.data.json(); console.log(eventData);

    if (eventData.notification.tag === 'notice') {
      var token='';

      var userId = localforage.getItem("userId");
            localforage.getItem("access-token").then(function(value){
                token += value;
               console.log(token);
               console.log(userId);

      var request = new Request("https://myurl/api/notice",{
        "headers": {
          'Authorization' : 'Bearer ' + token,
      },
      })

      fetch(request).then(function(response) {
        var rsp = response.clone();
      // cache response for the next time around
       return caches.open(cacheName).then(function (cache) {
         cache.put(request,rsp);
      });
      });
    })    

    }
});