web-dev-qa-db-fra.com

Une erreur inconnue s'est produite lors de l'extraction du script (Service Worker)

Lorsque je passe en mode hors connexion, mon technicien de service me signale l'erreur suivante:

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

mon ouvrier de service ressemble à ceci:

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

Il se trouve au répertoire de niveau supérieur, juste à côté d’un manifeste s’important comme ceci dans index.html:

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

J'importe le technicien de service dans mon fichier js d'entrée. Et enregistrez-le juste après.

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

Ça s'enregistre bien. Je ne rencontre pas l'erreur tant que je ne suis pas déconnecté.

J'utilise Webpack avec React et je procède comme suit pour copier mon fichier sw.js dans le dossier 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]'
      }
]

L'erreur ne donne aucune information sur ce qui se passe.

Quelqu'un a-t-il une idée de la façon de résoudre ce problème?

javascriptmanifestservice-workeroffline-cachingprogressive-web-apps
11
MLyck

J'ai eu exactement le même problème, j'ai passé une heure à essayer de le résoudre et il s'est avéré que j'avais un autre onglet pour la même origine qui avait été laissée ouverte quelque part "case à cocher laissée cochée et qui empêchait un autre onglet de demander sw.js pour une raison quelconque.

Il semble que l'état hors connexion fuit de l'onglet dans l'étendue de Service Worker sans être correctement reflété ni géré par les autres onglets que celui qui a été désactivé en premier.

Assurez-vous donc qu'aucun autre client n'exécute le même service worker - vous devriez pouvoir le trouver dans la liste dans DevTools> Application> Service Workers. 

20
NOtherDev

Dans Chrome, j'ai vérifié l'option Bypass for network, puis j'ai pu recharger.

 Dev tools print

0
carla

J'ai eu ce problème alors que je travaillais dans un projet Angular. Mon problème était que j'utilisais la commande ng serve -prod intégrée de Angular de la CLI. 

Pour que cela fonctionne, j'ai utilisé ng build -prod et ensuite héberger le dossier dist résultant à l'aide du serveur http.

0
Benjamin Kindle

Pour moi, cette erreur a disparu lorsque j'ai ajouté sw.js à la mémoire cache lors de l'installation. J'ai simplement oublié de le faire, mais le problème a été résolu.

0
Koen Cornelis