问题
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....
回答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?
来源：https://stackoverflow.com/questions/57202273/failed-to-register-a-serviceworker-the-script-has-an-unsupported-mime-type-te