获取脚本时发生未知错误（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 中像这样导入的清单旁边：

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

我在入口 js 文件中导入了 Service Worker。然后马上注册。

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

我遇到了完全相同的问题，我花了一个小时试图解决这个问题，结果我在某处打开了 同源的另一个标签（所以使用"Offline" 复选框处于选中状态并且由于某种原因阻止了另一个选项卡请求 sw.js。

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

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

Answer 2

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

Answer 3

我在 Angular 项目中工作时遇到了这个问题。我的问题是我使用的是 Angular CLI 的内置 ng serve -prod 命令。

为了让它工作，我使用了 ng build -prod，然后使用 http-server

托管生成的 dist 文件夹

Answer 4

在Chrome中，我所做的是检查选项Bypass for network，然后我就可以重新加载了。

Answer 5

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

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

虽然点击 “继续”将允许我进入站点，但控制台会打印出这个确切的错误：

An unknown error occurred when fetching the script

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

An unknown error occurred when fetching the script (Service Worker)

javascript

manifest

offline-caching

service-worker

progressive-web-apps