服务人员未捕获(承诺中)DOMException

时间:2019-04-28 作者:Aditya Agarwal

我的服务人员对错误、意外(承诺)或异常感到困扰。我的软件运行得很好,并在移动设备上提示安装PWA,但它会出现此错误。我的url是Milyin. 此错误需要2-3次访问才能开始出现在控制台日志中。

仅3次访问就导致它产生了260多个错误。我无法调试它。我假设这是因为软件已经消耗了我设备中的所有存储空间。因为如果使用F5重新加载页面,它会显示错误,但使用CTRL+SHIFT+R刷新不会出错。

//This is the service worker with the Advanced caching

const CACHE = "Milyin";
const precacheFiles = [
  \'/\',
  \'/wp-content/themes/hestia/assets/js/parallax.min.js?ver=1.0.2\',
  \'https://fonts.googleapis.com/css?family=Poppins%3A300%2C400%2C500%2C700\'
  ];

// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "/";
const offlineFallbackPage = \'/\';

const networkFirstPaths = [
  /* Add an array of regex of paths that should go network first */
  // Example: /\\/api\\/.*/
];

const avoidCachingPaths = [
  \'/wp-content/plugins/ultimate-member/\',
  \'/wp-admin/\',
  \'/chat/\'  
];

function pathComparer(requestUrl, pathRegEx) {
  return requestUrl.match(new RegExp(pathRegEx));
}

function comparePaths(requestUrl, pathsArray) {
  if (requestUrl) {
    for (let index = 0; index < pathsArray.length; index++) {
      const pathRegEx = pathsArray[index];
      if (pathComparer(requestUrl, pathRegEx)) {
        return true;
      }
    }
  }

  return false;
}

self.addEventListener("install", function (event) {
  console.log("[PWA Builder] Install Event processing");

  console.log("[PWA Builder] Skip waiting on install");
  self.skipWaiting();

  event.waitUntil(
    caches.open(CACHE).then(function (cache) {
      console.log("[PWA Builder] Caching pages during install");

      return cache.addAll(precacheFiles).then(function () {
        if (offlineFallbackPage === "offline.html") {
          return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
        }

        return cache.add(offlineFallbackPage);
      });
    })
  );
});

// Allow sw to control of current page
self.addEventListener("activate", function (event) {
  console.log("[PWA Builder] Claiming clients for current page");
  event.waitUntil(self.clients.claim());
});

// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
  if (event.request.method !== "GET") return;

  if (comparePaths(event.request.url, networkFirstPaths)) {
    networkFirstFetch(event);
  } else {
    cacheFirstFetch(event);
  }
});

function cacheFirstFetch(event) {
  event.respondWith(
    fromCache(event.request).then(
      function (response) {
        // The response was found in the cache so we responde with it and update the entry

        // This is where we call the server to get the newest version of the
        // file to use the next time we show view
        event.waitUntil(
          fetch(event.request).then(function (response) {
            return updateCache(event.request, response);
          })
        );

        return response;
      },
      function () {
        // The response was not found in the cache so we look for it on the server
        return fetch(event.request)
          .then(function (response) {
            // If request was success, add or update it in the cache
            event.waitUntil(updateCache(event.request, response.clone()));

            return response;
          })
          .catch(function (error) {
            // The following validates that the request was for a navigation to a new document
            if (event.request.destination !== "document" || event.request.mode !== "navigate") {
              return;
            }

            console.log("[PWA Builder] Network request failed and no cache." + error);
            // Use the precached offline page as fallback
            return caches.open(CACHE).then(function (cache) {
              cache.match(offlineFallbackPage);
            });
          });
      }
    )
  );
}

function networkFirstFetch(event) {
  event.respondWith(
    fetch(event.request)
      .then(function (response) {
        // If request was success, add or update it in the cache
        event.waitUntil(updateCache(event.request, response.clone()));
        return response;
      })
      .catch(function (error) {
        console.log("[PWA Builder] Network request Failed. Serving content from cache: " + error);
        return fromCache(event.request);
      })
  );
}

function fromCache(request) {
  // Check to see if you have it in the cache
  // Return response
  // If not in the cache, then return error page
  return caches.open(CACHE).then(function (cache) {
    return cache.match(request).then(function (matching) {
      if (!matching || matching.status === 404) {
        return Promise.reject("no-match");
      }

      return matching;
    });
  });
}

function updateCache(request, response) {
  if (!comparePaths(request.url, avoidCachingPaths)) {
    return caches.open(CACHE).then(function (cache) {
      return cache.put(request, response);
    });
  }

  return Promise.resolve();
}
addEventListener(\'fetch\', event => {
  event.respondWith(async function() {
    // Respond from the cache if we can
    const cachedResponse = await caches.match(event.request);
    if (cachedResponse) return cachedResponse;

    // Else, use the preloaded response, if it\'s there
    const response = await event.preloadResponse;
    if (response) return response;

    // Else try the network.
    return fetch(event.request);
  }());
});
通过内联JS注册服务工作者

<script type="text/javascript">
if (\'serviceWorker\' in navigator) {
  navigator.serviceWorker.register(\'/SW.js\')
  .then(function(registration) {
    registration.addEventListener(\'updatefound\', function() {
      // If updatefound is fired, it means that there\'s
      // a new service worker being installed.
      var installingWorker = registration.installing;
      console.log(\'A new service worker is being installed:\',
        installingWorker);

      // You can listen for changes to the installing service worker\'s
      // state via installingWorker.onstatechange
    });
  })
  .catch(function(error) {
    console.log(\'Service worker registration failed:\', error);
  });
} else {
  console.log(\'Service workers are not supported.\');
}

</script>
你肯定会在我的网站页面上看到重复访问的错误。虽然您的里程数取决于浏览器允许的存储空间。

1 个回复
SO网友:Hans Ganteng

Service worker只缓存源文件,因此不需要预先缓存跨源文件,例如https://fonts.googleapis.com

或者你可以在这里试试https://developers.google.com/web/updates/2016/09/foreign-fetch

相关推荐

使用JavaScript的WP REST API发布状态

我在WP REST API中弄脏了我的手。我已经阅读了一些教程,并对使用JavaScript创建新帖子提出了一个问题。在里面this 教程,帖子var status = \'draft\'; (请参见代码)。So I am just worried that won\'t anyone able to hack that status?jQuery( document ).ready( function ( $ ) { $( \'#post-submission-form\' ).on(