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

【问题标题】：How to simulate real "visit" with fetch request inside service worker如何使用服务工作者内部的获取请求来模拟真实的“访问”
【发布时间】：2020-02-23 10:23:56
【问题描述】：

我正在构建一个离线功能有限的 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 列表放入数组中，循环遍历它并向每个 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();

【问题讨论】：

标签： javascript request service-worker progressive-web-apps fetch-api

【解决方案1】：

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

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

如果目标资源倾向于在服务器上频繁更新/更改，那么您可以选择 stale while revalidate 策略（从缓存中提供数据后，SW 将更新其值与来自网络的较新值（如果可用）或什至 网络优先，回退到缓存，后者如果您想始终提供最新值并仅在网络连接超时时提供缓存数据或不可用。

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

【讨论】：