OneSignal の ServiceWorker と 既存の ServiceWorker を 共存させる

OneSignal の WebPush を使用する場合、OneSignal で用意してくれている manifest.json と OneSignalSDKWorker.js を使用する必要があります。
これらと、既存の ServiceWorker を共存させる方法を試してみました。
結果を以下に記載します。

前提

以下ライブラリを使用しています。
共存させる前提になりますが、他のライブラリを使用している場合でも、要領は同様かと思います。

• webpack

• workbox-webpack-plugin

• webpack-pwa-manifest

手順

以下実施したことを記載します。

0. OneSignal のアカウントを取得する

私は、Gmail アカウントで OneSignal にサインアップしました。

1. SDK をダウンロードする

以下から、SDKをダウンロードして、SDKに含まれる manifest.json、OneSignalSDKWorker.js、OneSignalSDKUpdaterWorker.js を取得し、ドメイン直下からアクセスできるようにHTTPサーバーなり、アプリケーション側でマッピングします。
Custom Code Setup

2. OneSignalSDKWorker.js 、OneSignalSDKUpdaterWorker.js に既存の ServiceWorker を追記する。

既存の ServiceWorker は CacheWorker.js です。それぞれのファイルに以下のように追記します。
CacheWorker.js は、workbox-webpack-plugin で生成しています。

• OneSignalSDKWorker.js
  

  importScripts("CacheWorker.js")
  importScripts('https://cdn.onesignal.com/sdks/OneSignalSDK.js');
  

• OneSignalSDKUpdaterWorker.js
  

  importScripts("CacheWorker.js")
  importScripts('https://cdn.onesignal.com/sdks/OneSignalSDK.js');
  

3. webpack-pwa-manifest の設定に、OneSignal の manifest.json の内容を追記する

webpack.config.js に以下のように記載しました。

        // WebpackPwaManifest manifest.json を出力する
        new WebpackPwaManifest({
            filename: "manifest.json",
            name: 'react-pwa-example',
            short_name: 'rpe',
            description: 'React PWA application example with WebPush',
            background_color: '#ffffff',
            start_url: "http://127.0.0.1:8000/?utm_source=pwa_home_screen&utm_campaign=pwa&utm_medium=home_screen",
            display: "standalone",
            theme_color: "#808080",
            icons: [
                   {
                      src: path.resolve('src/icon/icon.png'),
                      sizes: [96, 128, 144, 192, 256, 384, 512] // multiple sizes
                    },
            ],
            gcm_sender_id: "482941778795", // OneSignal の gcm_sender_id
            gcm_sender_id_comment: "Do not change the GCM Sender ID"
        }),

以上の設定で、OneSignal の通知の設定も、既存の ServiceWorker も上手く動作しました。

参考

以下の、FAQ が参考になりました。
* Web Push Setup FAQ

以上です。