Question

我在我的网站上集成了服务工作者。以前的一切都很完美，但是现在，当我的服务工作者尝试安装时出现错误：

未捕获（承诺）TypeError：匿名service-worker.js请求失败：1

我的服务人员处于'冗余'状态。

我不知道为什么......我没有更改我的代码，这是我的index.html：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(reg) {

  if(reg.installing) {
    console.log('Service worker installing');
  } else if(reg.waiting) {
    console.log('Service worker installed');
  } else if(reg.active) {
    console.log('Service worker active');
  }

  }).catch(function(error) {
    // registration failed
console.log('Registration failed with ' + error);
  });
}

这是我的service-worker.js：

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/theme/website_mobile/js',
        '/theme/website_mobile/css',
        '/theme/website_mobile/js.js',
        '/theme/website_mobile/css.css',
        '/js/614cd8e.js',
        '/css/f1407bb.css',
        '/js/93779bc.js',
        '/js/d228ec7.js',
        '/theme/website_mobile/img/slider-home/slider1.jpg',
        '/theme/website_mobile/img/slider-home/slider2.jpg',
        '/theme/website_mobile/img/slider-home/slider3.jpg',
        '/theme/website_mobile/img/slider-home/slider4.jpg',
        '/theme/website_mobile/img/logo-website.png',
        '/theme/website_mobile/img/picto-menu-close.png',
        '/theme/website_mobile/img/picto-close.png',
        '/var/website/storage/images/media/website-medias/website-materials/5163440-1-eng-GB/website-materials_article_list_main_website_enm.jpg',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-Light.woff2',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-Regular.woff2',
        '/theme/website_mobile/fonts/website-montserrat/Montserrat-ExtraBold.woff2',
        '/theme/website_mobile/fonts/website-avenir/Fonts/065a6b14-b2cc-446e-9428-271c570df0d9.woff2',
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // caches.match() always resolves
    // but in case of success response will have value
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // response may be used only once
        // we need to save clone to put one copy in cache
        // and serve second one
        let responseClone = response.clone();

        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function (e) {
        return caches.match('/');
      });
    }
  }));
});

更奇怪的是，当我尝试编辑我的service-worker.js时，我添加了这个：

self.addEventListener('install', function(event) {
  **reg.update();**

这是一个错误，但我发现这很好用！我在控制台中有一个未定义的注册错误，但我的服务工作者工作正常。

我尝试更改reg.update（）部分并放置一个简单的console.log但是，当我这样做时，service-worker返回冗余状态并且不安装...

我不明白为什么当我在服务工作者代码中添加一个未定义的对象时，它会抛出一个错误，但它工作得很好，当我回到我的旧代码（以前曾经工作过）时，它没有安装。

也许，我在某处做错了？？

由于

Answer 1

我把头发拉了好几天就碰到了这个。

在我的情况下，列表中的一个网址返回了404，这使得整个Cache.addAll返回承诺拒绝了非常非特定的错误TypeError: Request failed（“失败了，为什么？！” ）。

如果您的业务逻辑允许优雅的缓存，尽管任何一个网址都失败了，您可能希望将您的方法更改为列表中每个项目的Cache.add：

var urls = ['/', ...]
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      urls.forEach(function (url) {
        cache.add(url).catch(/* optional error handling/logging */);
      });
    })
  );
});

服务人员不再工作了

1 个答案: