javascript - React Service Worker 无法访问

Question

我正在学习 PWA，并尝试在 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);
    });
  }
}

尽管 service worker 已注册，但这是我将 src/index.js 更改为 serviceWorker.customRegister() 时的结果:

但我只是添加了这些功能(一次一个)，但这些功能都不起作用:

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

或者

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

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

Answer 1

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

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

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

编辑:

我想这是预期的结果，因为 React service worker 是为生产而设计的，正如它在 this Github issue 上所说的那样.

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