Создайте пользовательский сервисный работник в ReactJs - PullRequest
Новая
       6

Создайте пользовательский сервисный работник в ReactJs

0 голосов
/ 11 ноября 2018

Я пытаюсь добавить работника пользовательского сервиса в веб-приложение ReactJs, созданное с помощью create-react-app, но я получаю сообщение об ошибке при регистрации: The script has an unsupported MIME type ('text/html'). Если я правильно понимаю, скрипт анализируется в register() как текстовый файл, но я не знаю, почему это может быть.

На простой веб-странице HTML5 эта ошибка исчезнет после обслуживания страницы с сервера. Поэтому я попытался создать приложение реагировать и обслуживать с сервера (используя этот код: 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);
            });
        });
    }
}

сервис-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);
        })
    })

});

Что мне сделать, чтобы исправить ошибку?

Заранее спасибо за помощь!

...