javascript - 获取脚本时发生未知错误(Service Worker)

Question

离线时，我的服务人员收到以下错误:

(unknown) #3016 An unknown error occurred when fetching the script

我的服务人员看起来像这样:

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
        })
      })
    })
  )
})

它位于顶层目录，就在 index.html 中的 list 导入旁边:

<link rel="manifest" href="/manifest.json">

我在入口 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

我遇到了完全相同的问题，我花了一个小时试图解决这个问题，结果我在某处打开了相同来源的另一个标签(因此使用相同的共享 Service Worker ) 选中了“离线”复选框，并且出于某种原因阻止了其他选项卡请求 sw.js。

似乎离线状态从 Service Worker 范围内的选项卡泄漏，而没有被其他选项卡正确反射(reflect)或管理，而不是首先变为离线的选项卡。

因此请确保您没有其他客户端运行相同的 Service Worker - 您应该能够在 DevTools > Application > Service Workers 中找到它们。