web-dev-qa-db-ja.com

スクリプトの取得中に不明なエラーが発生しました(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'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)
  })
}

正常に登録されます。オフラインになるまでエラーは発生しません。

Reactでwebpackを使用し、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]'
      }
]

エラーは、何が起こっているかについての情報を提供しません。

誰もこれを修正する方法を知っていますか?

14
MLyck

私はまったく同じ問題を抱えていて、それを理解しようとして1時間を費やしましたが、同じOriginがどこかに(同じ共有Service Workerを使用して)開かれたままになっている別のタブ [オフライン]チェックボックスをオンのままにしておくと、別のタブがsw.js 何らかの理由で。

オフライン状態は、Service Workerスコープ内のタブから漏れていますが、最初にオフラインになったタブ以外のタブによって適切に反映または管理されていないようです。

したがって、同じService Workerを実行している他のクライアントがないことを確認してください-DevTools> Application> Service Workersにリストされているクライアントを見つけることができるはずです。

23
NOtherDev

私にとって、インストール時にsw.jsをキャッシュに追加すると、このエラーはなくなりました。単純にそれを忘れていましたが、問題は解決しました。

2
Koen Cornelis

私たちの場合、Chrome 75 + webview + Androidのサービスワーカー。これはまったく同じ現象でした。 https://bugs.chromium.org/ p/chromium/issues/detail?id = 977784

0
banyan

Chromeでは、オプションを確認することでしたBypass for networkそして、私はリロードすることができました。

Dev tools print

0
carla

Angularプロジェクトで作業中にこの問題が発生しました。私の問題は、Angular CLIの組み込みng serve -prodコマンド。

動作させるために、ng build -prodそして、http-serverを使用して結果のdistフォルダーをホストします

0
Benjamin Kindle