Workbox ne fonctionne pas sur Chrome, mais il fonctionne partout ailleurs, ce qui est ironique car je pense qu'il s'agit d'une bibliothèque Google, l'erreur qui s'affiche est:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/js/app/dist/service-worker.js');
});
}
Chrome:
Opera
Firefox
J'utilise le plugin workbox-webpack-plugin
webpack.config.js
const workbox = require('workbox-webpack-plugin');
module.exports = {
plugins: [
new workbox.GenerateSW({
swDest: './service-worker.js',
skipWaiting: true,
clientsClaim: true
})
]
}
3 Réponses :
Vous avez peut-être une mauvaise portée de votre fichier SW. Essayez ceci:
Server {
listen www.example.com:443 ssl;
...
location /js/app/dist/service-worker.js {
add_header 'Service-Worker-Allowed' '/';
}
}
Si vous ne pouvez pas déplacer le fichier SW, vous devez ajouter un en-tête spécial à votre backend:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/js/app/dist/service-worker.js', { scope: '/' });
});
}
(nginx configuration)
la portée / lève une exception, le même extrait de code avec la portée "js / app / dist" fonctionne, mais montre toutes les exceptions ci-dessus.
Quelle est l'erreur qui a été générée à l'aide de scope ?
Le chemin de la portée fournie ('/') n'est pas sous la portée maximale autorisée ('/ js / app / dist /'). Ajustez la portée, déplacez le script Service Worker ou utilisez l'en-tête HTTP Service-Worker-Allowed pour autoriser la portée.
De MDN: le technicien de service n'attrapera que les demandes des clients sous la portée du technicien de service. La portée maximale d'un technicien de service est l'emplacement du collaborateur. Vous pouvez également ajouter un en-tête à votre backend.Il semble donc que votre logiciel ne soit pas à la racine de votre application.
js / app / dist est la bonne portée, c'est là que webpack génère le fichier, mais j'ai juste essayé de le déplacer vers / scope, cela a fonctionné, mais n'a pas corrigé les erreurs, icognito fonctionne toujours comme je l'ai dit.
Je me demande alors s'il y a une extension dans votre chrome qui visse le SW. De toute façon, vous pouvez tester dans Browserstack ou un autre ordinateur portable? Je ne peux pas penser à autre chose. Peut-être que d'autres utilisateurs ici pourront vous aider!
Je viens de désactiver toutes les extensions, mais j'ai obtenu les mêmes résultats, j'ai également essayé sur l'ordinateur de mes collègues avec les mêmes résultats: /
la partie étrange est que cela fonctionne aussi pour lui en mode incognito
Cette erreur est généralement générée si le navigateur n'a plus le quota d'espace disque alloué. Votre navigation privée fonctionne car elle sera allouée avec un nouveau quota de disque, alors que les onglets normaux partagent le même quota de disque.
Pouvez-vous ouvrir l'onglet Application dans les outils de développement et cliquer sur Effacer le stockage> Effacer les données du site ? Cela devrait résoudre ce problème dans la plupart des cas.
+1 Il n'y a probablement pas assez d'espace libre sur le disque dur. Dans ce cas, votre navigateur peut ne pas être en mesure de réserver de l'espace pour le cache.
Ce que vous voulez dire est «Exception DOMException non interceptée (promis): Quota dépassé», ce n'est pas le cas dans ce problème. Comme indiqué dans l'édition 2: j'avais déjà essayé d'effacer les données sans succès. L'or m'aide à ce stade
Dang it je n'ai lu que la première réponse et c'était là tout le temps ... Quelle douleur dans le cul c'était je n'avais pas d'espace sur mon disque dur! Étrange cela a fonctionné dans Firefox ...
J'ai supprimé mon répertoire Service Worker dans le dossier de configuration de chrome sur mon système de fichiers et cela a résolu le problème.
Chrome a été mis à jour automatiquement à la version 72 et fonctionne désormais pour moi et mes collègues. C'est probablement un bug corrigé.
J'utilise Chrome 72 et 4.0.0-beta.1 / workbox-sw.js et toujours le même problème (en actualisant la page deux ou trois fois).
Salut, avez-vous déjà compris cela? J'obtiens exactement les mêmes erreurs, fonctionne dans d'autres navigateurs et incognito .. essayé de supprimer tout le cache / historique rien ne fonctionne ... des suggestions?
peu importe, ça marche ... Dans la fenêtre «Vider le cache» de chrome est passé à l'onglet avancé, a coché chaque case, l'a fait pour toujours, et plus d'erreur .. étrange!
Chrome s'est mis à jour, maintenant c'est corrigé pour moi et tous mes collègues, j'ai Chrome 72 maintenant