Неизвестная ошибка произошла при извлечении script (Service Worker)

При переходе в автономный режим мой служебный работник получает следующую ошибку:

(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 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 ввода. И зарегистрируйте его сразу после.

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]'
      }
]

Ошибка не дает никакой информации о том, что происходит.

Кто-нибудь знает, как это исправить?

Ответы

Ответ 1

У меня была точно такая же проблема, я потратил час, пытаясь понять это, и оказалось, что у меня была другая вкладка для того же источника, что и открытая где-то (так что с помощью того же общего рабочего службы), в котором установлен флажок "Офлайн", и по какой-то причине не удалось запросить другие вкладки sw.js.

Похоже, что автономное состояние протекает со вкладки в области Service Worker, не будучи должным образом отраженным или управляемым другими вкладками, чем тот, который был сначала отключен.

Поэтому убедитесь, что у вас нет других клиентов, работающих с одним и тем же Работодателем - вы должны найти их в DevTools > Application > Service Workers.

Ответ 2

Для меня эта ошибка исчезла, когда я добавил sw.js в кеш при установке. Просто забыли сделать это, но он решил проблему.

Ответ 3

У меня была эта проблема во время работы в проекте Angular. Моя проблема заключалась в том, что я использовал Angular встроенную команду CLI ng serve -prod.

Чтобы он работал, я использовал ng build -prod, а затем размещал результирующую папку dist с помощью http-server

Ответ 4

В Chrome я проверил опцию Bypass for network и затем смог перезагрузить.

Dev tools print

Ответ 5

В нашем случае это началось с июня 2019 года только в том случае, если Chrome 75 + webview + сервисный работник на Android. Это было точно такое же явление: https://bugs.chromium.org/p/chromium/issues/detail?id=977784