Question

我的Web应用程序中有一个服务人员（vuejs，laravel）是这样初始化的（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')。

服务人员不能接受双重范围

1 个答案: