Javascript “如何模拟真实环境”；参观；在服务工作者内部使用获取请求

我正在构建一个离线能力有限的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);
    })
  );
});

这非常有效，加载页面后，所有it资产都被缓存，并且可以在脱机模式下查看

但是，我还想添加一个选项，当用户重新联机时，自动缓存一些更重要的URL

我将url列表放在数组中，循环并向每个url发送获取请求，这样就可以缓存这些页面，而无需用户访问/重新访问页面

问题是，当我这样做时，一些页面上的一些资产并没有被缓存，例如一个页面上的谷歌地图，有没有一种方法可以模拟对一个页面的真实访问，即通过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();

---

典型地，如果您有重要的资产要提供给用户，即使在离线时，也应该考虑一个“强”>“离线的第一个/强”策略，这意味着当服务工作人员正在安装时，预取这些资源。p> 通过这种方式，匹配的请求将从缓存中提供，从而提高了性能，因为您完全跳过了相关的网络调用

如果目标资源倾向于在服务器上频繁更新/更改，则您可以选择过时而重新验证策略（从缓存提供数据后，软件将使用网络中的更新值更新其值，如果可用），甚至可以选择网络先回退到缓存，如果希望始终提供最新的值，并且仅在网络连接超时或不可用时提供缓存数据，则使用后者

，以防您想更深入地了解该主题