Service Worker 不能接受双重作用域

Question

我的 webapp (vuejs, laravel) 中有一个 service worker 是这样初始化的 (welcome.blade.php):

if('serviceWorker' in navigator){
                window.addEventListener('load', function(){
                    navigator.serviceWorker.register('./service-worker.js').then(function(){
                        console.log('Service worker load');
                    })
                })
            }

工作正常但现在我想在我的 vue-router 示例中传递一个参数 http://localhost:8000/panier/250.

对于 panier(http://localhost:8000/panier) 工作正常但是如果我通过第二个范围 (250) 会崩溃并出现两个错误:

The script has an unsupported MIME type ('text/html').
Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('http://localhost:8000/panier/') with script ('http://localhost:8000/panier/service-worker.js'): The script has an unsupported MIME type ('text/html').

所以我尝试不传递参数，我只是这样做了 http://localhost:8000/panier/test 但是崩溃了两次。

我认为是真的不想要这两个范围，但我想要它 =/。我没有发现两个范围崩溃的真正相似的问题。

非常感谢大家帮助我！

Answer 1

我认为问题出在 navigator.serviceWorker.register('./service-worker.js')。
实际发生的是，对于你去的每条路线，浏览器都试图从那里获取 service-worker.js 文件。因此，如果您转到 http://localhost:8000/panier，浏览器会从与根目录 panier 相同的目录中获取服务工作者文件，并且可以完美地获取它，但是当您更深入一层时，它找不到该文件。你应该做的是改变
navigator.serviceWorker.register('./service-worker.js') 至

navigator.serviceWorker.register('/service-worker.js') 或 navigator.serviceWorker.register('service-worker.js').

Service Worker 不能接受双重作用域

Service worker cannot accept double scope

parameters

vue.js

service-worker