获取脚本时发生未知错误（服务工作者）

Question

离线时，我的服务人员会出现以下错误：

（未知）3016获取脚本时发生未知错误

我的服务人员如下所示：

var version = 'v1'

this.addEventListener('install', function(event){
  event.waitUntil(
     caches.open(version).then(cache => {
       return cache.addAll([
         'https://fonts.googleapis.com/icon?family=Material+Icons',
         'https://fonts.googleapis.com/css?family=Open+Sans:400,600,300',
         './index.html'
       ])
     })
   )
})

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(resp) {
      // if it's not in the cache, server the regular network request. And save it to the cache
      return resp || fetch(event.request).then(function(response) {
        return caches.open(version).then(function(cache) {
          cache.put(event.request, response.clone())
          return response
        })
      })
    })
  )
})

它位于顶层目录，就在索引中类似这样导入的清单的旁边。html:

我在我的条目js文件中导入服务工作者。然后马上注册。

require('tether-manifest.json')
import serviceWorker from 'sw'

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register(serviceWorker)
  .then(() => {
    // registration worked
  }).catch(error => {
    throw new Error(error)
  })
}

天气很好。我在脱机之前不会遇到错误。

我正在使用Webpack与React，并在webpack中执行以下操作以将我的sw.js文件复制到dist文件夹：

loaders: [
      { // Service worker
        test: /sw\.js$/,
        include: config.src,
        loader: 'file?name=[name].[ext]'
      },
      { // Manifest
        test: /manifest\.json$/,
        include: config.src,
        loader: 'file?name=[name].[ext]'
      }
]

这个错误没有提供任何关于正在发生什么的信息。

有人知道怎么解决这个问题吗？




Answer 1

在尝试其他操作之前，请检查您的https证书是否无效或与您正在访问的url不匹配。

在我的例子中，我试图用另一个域名注册的证书访问https://localhost。

虽然点击“继续”将允许我进入该站点，但该错误将被打印到控制台：

获取脚本时发生未知错误

Answer 2

对我来说，当我在安装时将sw.js添加到缓存时，这个错误就消失了。只是忘记了这样做，但它解决了这个问题。

Answer 3

我遇到了完全相同的问题，我花了一个小时试图解决这个问题，结果发现我在某个地方打开了另一个相同来源的选项卡（因此使用了相同的共享服务工作人员），该选项卡保留了“脱机”复选框，并阻止了另一个选项卡请求sw。出于某种原因。

似乎脱机状态正在从Service Worker作用域内的选项卡泄漏，而不是由首先脱机的选项卡以外的其他选项卡正确反映或管理。

因此，请确保没有其他客户机运行相同的服务工作者-您应该能够在DevTools中找到它们