编辑：

Question

我正在学习PWA，并且正在尝试将我有关缓存策略的新知识应用于React应用程序，但是尽管我已将 src / index.js 的行更改为{{1} }，这有效，无法访问最近创建的文件 public / service-worker.js 。

尝试尝试在 src / serviceWorker.js 上创建“自定义注册功能”：

serviceWorker.register()

尽管服务工作者已注册，但这是我在export function customRegister() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register(process.env.PUBLIC_URL + '/service-worker.js') .then(reg => { reg.onupdatefound = () => { const installation = reg.installing; installation.onstatechange = () => { if (installation.state === 'activated') { console.log('%cActivated SW', 'font-size: 1.2rem; color: green; font-weight: bolder'); } } } }) .catch(error => { console.log('%cError while registering SW:', 'font-size: 1.2rem; color: red; font-weight: bolder'); console.log(error); }); } }上更改为src/index.js时的结果：

SW activated

但是我只是添加了这些功能（一次只添加了一个），但是这些都不起作用：

serviceWorker.customRegister()

或

self.oninstall = () => {
    console.log('SW install');
};

我尝试了不同的代码，但是没有运气。有什么建议吗？

Answer 1

不知道为什么，但是即使我删除了service-worker.js， serviceWorker.js 也注册了软件，并且没有触发错误。

我发现正确注册软件的唯一方法是在 serviceWorker.js 上更改软件名称：

window.addEventListener('load', () => {
    const swUrl = `${process.env.PUBLIC_URL}/sw.js`;
    ...
}

编辑：

我想这是预期的结果，因为正如this Github issue上所说的那样，React服务工作者是为生产而设计的。

这是我在 src / sw-register.js 上所做的功能：

export function LocalRegister() {
    const swPath = `${process.env.PUBLIC_URL}/sw.js`;
    if ('serviceWorker' in navigator) {
        window.onload = () => {
            navigator.serviceWorker.register(swPath)
                .then(registration => {
                    registration.onupdatefound = () => {
                        const installation = registration.installing;
                        installation.onstatechange = () => {
                            if (installation.state === 'activated') {
                                console.log('%cSW Activated', 'font-size: 1.2rem; color: green; font-weight: bolder');
                            }
                        }
                    }
                })
                .catch(error => {
                    console.log('%cError while registering SW:', 'font-size: 1.2rem; color: red; font-weight: bolder');
                    console.log(error);
                });
        }
    }
}

然后我在 src / index.js 上提到了这一点：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//import * as serviceWorker from './serviceWorker';
import * as serviceWorker from './sw-register';

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

serviceWorker.LocalRegister();

无法联系React Service Worker

1 个答案:

编辑：