javascript - 如何使用 Service Worker 内部的 fetch 请求模拟真实的 "visit"

Question

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

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);
    })
  );
});

这非常有效，加载页面后，所有资源都会被缓存，并且可以在离线模式下查看。

但是，我还想添加一个选项，以便在用户重新上线时自动缓存一些更重要的网址。

我通过将 url 列表放入数组中，循环遍历它并向每个 url 发送获取请求来做到这一点，这样就可以缓存这些页面，而无需用户访问/重新访问该页面。

问题是，当我这样做时，某些页面上的某些 Assets 不会被缓存，例如一个页面上的谷歌地图，是否有一种方法可以模拟对页面的真实访问，从一个网址获取所有 Assets 带有获取请求？

获取代码:

 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

通常，如果您有重要的 Assets 想要向用户提供，即使用户处于离线状态，您也应该考虑离线优先策略，这意味着您在安装 Service Worker 时预取这些资源。

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

如果目标资源在服务器上经常更新/更改，那么您可以选择stale while revalidate策略(从缓存提供数据后，软件将更新其使用来自网络的较新值(如果可用)，甚至网络优先，回退到缓存，如果您希望始终提供最新值并仅在网络连接超时时提供缓存数据，则选择后者或不可用。

I wrote an article about service worker and caching strategies ，如果您想深入了解该主题。