如何使用服务工作者内部获取请求来模拟真实的“访问”

Question

我正在构建一个离线能力有限的PWA，每次用户访问新的url时，我都会使用此代码将页面内容保存到动态缓存中：

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

event.respondWith(
  fetch(event.request)
    .then(function(res) {
      return caches.open('cache')
            .then(function(cache) {
              cache.put(event.request.url, res.clone());
              return res;
            })
    })
    .catch(function(err) {
      console.log( err );
      return caches.match(event.request);
    })
  );
});

这很有效，页面加载后，所有的资产都被缓存，并且可以在脱机模式下看到。

但是，我也想添加一个选项，当用户重新联机时，可以自动缓存一些更重要的urls。

为此，我将url列表放入数组中，循环遍历它，并向每个url发送一个fetch请求，这样就可以在用户不访问/重新访问页面的情况下缓存这些页面。

问题是，当我这样做的时候，一些页面上的一些资产没有被缓存，例如一个页面上的谷歌地图，有没有一种方法可以模拟对一个页面的实际访问，从一个带有fetch请求的url中获取所有资产？

获取代码：

 function fillDynamicCache(user_id = false) {
   let urls = [
    '/homepage',
    '/someotherpage',
    '/thirdpage',
    '/...',
   ];

   urls.map((url, id) => (
    fetch(url)
      .then(
        function(response) {
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' +
              response.status);
            return;
          }
          console.log( 'in fetch: ' + url );
        }
      )
      .catch(function(err) {
        console.log('Fetch Error :-S', err);
    })
  ));

  }


self.addEventListener('message', (event) => {
// refresh cache when user comes back online
if (event.data == 'is_online') {
    fillDynamicCache();
} else if (event.data == 'is_updated') {
    self.skipWaiting();

Answer 1

通常，如果您有重要的资产想要提供给用户，即使他们处于脱机状态，您也应该考虑offline first策略，这意味着您可以在service worker安装时预取这些资源。

这样，匹配的请求将从缓存中获得服务，从而提高了性能，因为您完全跳过了相对的网络调用。

如果目标资源倾向于在服务器上频繁更新/更改，那么您可以选择陈旧，同时重新验证策略(从缓存提供数据后，SW将使用来自网络的较新的值(如果可用)更新其值)，或者甚至选择网络优先，回退到缓存，如果您希望始终提供最新的值，并仅在网络连接超时或不可用时提供缓存数据，则可以选择后者。

I wrote an article about service worker and caching strategies，如果你想深入了解这个主题的话。