将现有的 react 应用程序转换为使用 onesignal 和 react-app-rewired 的 PWA答案

【问题标题】：Converting existing react app to PWA that is using onesignal and react-app-rewired将现有的 react 应用程序转换为使用 onesignal 和 react-app-rewired 的 PWA
【发布时间】：2021-10-08 13:50:00
【问题描述】：

我正在使用 react-app-rewired 构建并尝试将应用程序转换为 PWA。我遇到的问题是它没有在构建文件夹中包含 service-worker。

config-override.js

module.exports = (config) => {
  config.module.rules[1].oneOf.unshift({
    test: /\.wasm$/,
    type: 'javascript/auto',
    loader: 'file-loader',
  });
  return config;
};

public/OneSignalSDKWorker.js

/* eslint-disable */
importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');
// importScripts('./service-worker.js');

public/OneSignalSDKWorker.js


    /* eslint-disable */
    importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');
    // importScripts('./service-worker.js');

package.json

"build": "react-app-rewired build",

src/index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import store, { history } from './store';
import App from './components/app';
import * as ServiceWorker from './serviceWorker';



const target = document.querySelector('#root');

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  target
);

 ServiceWorker.register();

【问题讨论】：

嗨！几个问题。未包含的服务工作是来自 OneSignal 还是您用来为 PWA 供电的普通服务人员？此外，您的问题 public/OneSignalSDKWorker.js 中提供的代码看起来像是发布了两次。你是说 OneSignalUpdaterServiceWorker.js 吗？
嗨！感谢您的回复。我想让我的应用程序进步，它使用 onesignal 及其服务工作者。我没有使用默认的服务人员。现在我想集成默认的服务工作者，这样我的 PWA 就可以安装了。为此，我在如何同时使用服务工作者和使用 react-app-rewired 方面遇到了挑战。

标签： reactjs service-worker onesignal

【解决方案1】：

问题在于 PWA 默认需要一个服务工作者，该服务工作者将为你的 PWA 供电，OneSignal 服务工作者将仅用于触发你的推送通知。

如果您要将 OneSignal 集成到具有现有 Service Worker（如 PWA）的站点中，您可能需要合并 Service Worker 才能使 OneSignal 正常工作。详情请见OneSignal Service Worker FAQ。

如果您正在查看 OneSignal 仪表板，您可以选择从 OneSignal 以不同的路径安装 Service Worker。

资源：

https://documentation.onesignal.com/docs/troubleshooting-web-push#pwa-or-multiple-service-workers

https://documentation.onesignal.com/docs/onesignal-service-worker-faq

https://documentation.onesignal.com/docs/onesignal-service-worker-faq#service-worker-migration-guide

欢迎加入我们的 OneSignal 开发者社区和我们的 Discord 频道。

https://onesignal.com/onesignal-developers

【讨论】：