注册 ServiceWorker 失败:脚本具有不受支持的 MIME 类型 ('text/html') Vue js? [英] Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html') Vue js?

问题描述

我想在我的 vue js 项目中包含 service worker，我之前在我的简单 HTML 项目中这样做过，它工作得非常好，但是当我将相同的文件包含到我的 vue js 代码中时，它不断抛出错误

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

脚本具有不受支持的 MIME 类型 ('text/html').index.js?3609:11 Service wroker: error: SecurityError: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

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').

这是我用于 ragister 我的 service worker 的代码

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");
}

我的 Service Worker 文件

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))
        )
    })

我成功地在我的浏览器上找到了 Service Worker，但是当我尝试注册我的 Service Worker 文件时，它抛出错误，我搜索了很多，仍在寻找解决方案.所以请帮我解决这个问题.

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.

提前致谢....

推荐答案

我不确定，但是您可以尝试像这样注册 worker，以便我们可以获得有关进度的更多信息并正确设置路径:

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({…})

你也可以展示一下

service-worker.js

service-worker.js

文件?

这篇关于注册 ServiceWorker 失败:脚本具有不受支持的 MIME 类型 ('text/html') Vue js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！