无法注册ServiceWorker：脚本具有不受支持的MIME类型（'text / html'）Vue js？

Question

I want to include service worker in my vue js project and i did this before with my simple HTML projects in which it works really great but when i include the same file to my vue js code it keeps throwing the error

The script has an unsupported MIME type ('text/html'). index.js?3609:11 Service wroker: error: SecurityError: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

here is the code which i used for ragister my service worker

if (navigator.serviceWorker) {
    console.log("Service wroker: available");
    window.addEventListener("load", () => {
        navigator.serviceWorker
            .register("/service-worker.js")
            .then(res => console.log("Service worker: ragister succefully"))
            .catch(err => console.log("Service wroker: error: " + err))
    })
} else {
    console.log("Servicde wroker: not found");
}

my service worker file

        // this service worker cache all the response of the sites beside caching files and assets individually

    const cacheName = "v1";

    // install service worker

    self.addEventListener("install", (e) => {
        console.log("Service wroker: installed")
    })


    // Call activate event

    self.addEventListener("activate", (e) => {
        console.log("Service wroker: Activated")

        // Deleting old and unwanted cache
        e.waitUntil(
            caches.keys().then(cacheNames => {
                return Promise.all(
                    cacheNames.map(cache => {
                        if (cache !== cacheName) {
                            console.log('Service worker: Clearing Old cache');
                            return caches.delete(cache);
                        }
                    })
                )
            })
        )
    })

    // Call fetch event

    self.addEventListener('fetch', (e) => {
        console.log('Service worker: Fetching Data');
        e.respondWith(
            fetch(e.request)
                .then(res => {
                    // Make copy/clone of response
                    const resClone = res.clone();
                    caches
                        .open(cacheName)
                        .then(cache => {
                            console.log("Service worker: Caching files")
                            cache.put(e.request, resClone)
                        })
                    return res
                })
                .catch(err => caches.match(e.request).then(res => res))
        )
    })

i succefully found service worker on my browser but when i try to register my service worker file it throw the error i search alot and still searching for solution. so please help me out with this.

thanks in advance....

Answer 1

I am not sure, but can you try to register the worker like this, so we can have additional information about the progress and set the path correctly:

...

navigator.serviceWorker
            .register("service-worker.js", {
    scope: './' }).then(function (registration) {
    var serviceWorker;
    if (registration.installing) {
        serviceWorker = registration.installing;
        console.log('installing');
    } else if (registration.waiting) {
        serviceWorker = registration.waiting;
        console.log('waiting');
    } else if (registration.active) {
        serviceWorker = registration.active;
        console.log('active');
    }
    if (serviceWorker) {
        // logState(serviceWorker.state);
        serviceWorker.addEventListener('statechange', function (e) {
            // logState(e.target.state);
        });
    }
}).catch({…})

Can you as well show the

service-worker.js

file?