Javascript 在ReactJs中创建自定义服务工作程序

我正在尝试向使用

create react app

创建的ReactJs web应用程序添加自定义服务工作程序，但注册时出错：

脚本具有不受支持的MIME类型（“text/html”）

。如果我理解正确，脚本将作为文本文件解析为

register（）

，但我不知道为什么会这样

在一个简单的HTML5网页上，从服务器提供页面服务后，这个错误就会消失。因此，我尝试构建react应用程序并从服务器提供服务（使用此cli:），但没有成功

这是我的react index.js和服务人员：

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import {registerMyServiceWorker} from './registerServiceWorker'
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, document.getElementById('root'));

registerMyServiceWorker();

service-worker.js

window.self.addEventListener('fetch', event => {
    console.log('fetching');
    // Prevent the default, and handle the request ourselves.
    event.respondWith(async function () {
        // Try to get the response from a cache.
        const cachedResponse = await caches.match(event.request);
        // Return it if we found one.
        if (cachedResponse) return cachedResponse;
        // If we didn't find a match in the cache, use the network.
        return fetch(event.request).then(async function (response) {
            return caches.open('my-cache').then(async function (cache) {
                return response;
            })
        })
    }());

    fetch(event.request).then(async function (response) {
        caches.open('my-cache').then(async function (cache) {
            cache.put(event.request, response);
        })
    })

});

我应该做什么来修复错误

提前感谢您的帮助

window.self.addEventListener('fetch', event => {
    console.log('fetching');
    // Prevent the default, and handle the request ourselves.
    event.respondWith(async function () {
        // Try to get the response from a cache.
        const cachedResponse = await caches.match(event.request);
        // Return it if we found one.
        if (cachedResponse) return cachedResponse;
        // If we didn't find a match in the cache, use the network.
        return fetch(event.request).then(async function (response) {
            return caches.open('my-cache').then(async function (cache) {
                return response;
            })
        })
    }());

    fetch(event.request).then(async function (response) {
        caches.open('my-cache').then(async function (cache) {
            cache.put(event.request, response);
        })
    })

});