编辑：

Question

React Service Worker 无法访问

2019-11-17

449

javascript reactjs ecmascript-6 service-worker progressive-web-apps

我正在学习 PWAs，并尝试将我新学到的缓存策略知识应用到 React 应用上，但尽管我已将 src/index.js 中的行更改为 serviceWorker.register() ，并且此方法有效，但无法访问最近创建的文件 public/service-worker.js 。

为了尝试，我在 src/serviceWorker.js 上创建了一个“自定义注册函数”：

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 更改为 serviceWorker.customRegister() 时得到的结果：

SW activated

但我只是添加了这些函数（一次一个），这些都没有有效：

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

或者

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

我尝试过不同的代码，但没有成功。有什么建议吗？

Answer 1

不确定为什么，但即使我删除了 service-worker.js， serviceWorker.js 也会注册 SW，并且不会触发任何错误。

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

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

编辑：

我猜这是预期的结果，因为 React Service Worker 是为生产而制作的，正如这个 Github 问题上所说。

这是我在 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();