неизвестной ошибки при извлечении сценария (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. И зарегистрируйте его сразу же.

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

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

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

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

Answer 2

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

Answer 3

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

Чтобы заставить его работать, я использовал ng build -prod, а затем провести полученную DIST папку с помощью HTTP-сервер