Question

我正在尝试向使用create-react-app创建的ReactJs Web应用程序中添加自定义服务工作者，但是在注册The script has an unsupported MIME type ('text/html')时出现错误。如果我正确理解脚本，则会将脚本作为文本文件解析为register()，但我不知道为什么会这样。

在简单的HTML5网页上，从服务器提供该页面后，该错误就会消失。因此，我尝试构建react应用并从服务器（使用此cli：https://www.npmjs.com/package/serve）进行服务，但是没有运气。

这是我的反应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();

registerServiceWorker.js

import * as serviceWorker from './service-worker'

export function registerMyServiceWorker() {
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
            navigator.serviceWorker.register(serviceWorker).then(function (registration) {
                // Registration was successful
                console.log('ServiceWorker registration successful without scope: ', registration.scope);
            }, function (err) {
                // registration failed :(
                console.log('ServiceWorker registration failed: ', err);
            });
        });
    }
}

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

});

我该如何解决该错误？

提前感谢您的帮助！

在ReactJs中创建自定义服务工作者

0 个答案: