首页 > 解决方案 > 使用 Service Worker 加载外部文件时出错

问题描述

我正在使用 cdn 文件,但显然我的服务人员没有缓存它们。你会做吗?

控制台中显示的错误

服务工作者代码:

const version = "0.0.1";
const cacheName = `sfa-${version}`;
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      return cache.addAll([
          `/`,
          `/dashboard/`
      ])
          .then(() => self.skipWaiting());
    })
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(cacheName)
      .then(cache => cache.match(event.request, {ignoreSearch: true}))
      .then(response => {
      return response || fetch(event.request);
    })
  );
});

标签: javascriptservice-workerprogressive-web-apps

解决方案


也许您尝试在 navigator.serviceWorker 容器上设置 onerror 处理程序,如下所示:

// no effect outside service worker script
navigator.serviceWorker.onerror = function() {...};

错误处理程序必须在 service worker 脚本中使用 self.onerror 进行设置(self 在这里是一个特殊的变量/属性,指的是 ServiceWorkerGlobalScope)。onerror 回调仅提供错误消息。

// inside service worker script
self.onerror = function(message) {
  console.log(message);
};

或者,您可以监听服务工作者的错误事件,其中包括一个包含错误位置的 ErrorEvent:

// inside service worker script
self.addEventListener('error', function(e) {
  console.log(e.filename, e.lineno, e.colno, e.message);
});

更多详情请访问


推荐阅读