メインコンテンツへスキップ

​
概要

このガイドでは、Webプッシュ通知用のOneSignal Service Workerを構成する方法について説明します。
WordPressプラグインを使用している場合、OneSignal Service Workerファイルは自動的に追加されるため、これらのファイルを手動でサイトに追加しないでください。詳細については、WordPressのセットアップに戻ってください。

​
Service Workerとは？

Service Workerは、メインページとは別のスレッドで実行されるバックグラウンドスクリプトです。プッシュ通知、オフラインキャッシング、バックグラウンド同期などの機能を有効にします。サイトが登録するとインストールされ、常に実行されているわけではありませんが、ユーザーが離れた後でも（プッシュを含む）イベントを処理するために起動できます。

Service Workerの仕組み

​
OneSignalのService Workerを統合する方法

Web SDK Setupガイドに従うと、OneSignalSDKWorker.js Service Workerファイルが提供されます。

​
.jsファイルをダウンロードする

OneSignalダッシュボードからOneSignalSDKWorker.jsファイルをダウンロードするか、こちらからOneSignal Service Workerファイルをダウンロードしてください。

​
.jsファイルをサーバーにアップロードする

SDKはデフォルトでサイトのルートでOneSignalSDKWorker.jsファイルを探します。例：https://yoursite.com/OneSignalSDKWorker.js このファイルをサイトのルートディレクトリに単純にアップロードして、次のステップのためにWebプッシュセットアップガイドに戻ることができます。ただし、このOneSignalSDKWorker.jsファイルを、ユーザーにリンクすることのないサブディレクトリパス（例：https://yoursite.com/push/onesignal/OneSignalSDKWorker.js）に配置することをお勧めします。 このファイルをルートに配置することもできますが、現在または将来追加する可能性のある他のService Workerと競合する可能性があります。また、ファイルは変更されることのない永久的な場所パスに配置する必要があります。Service Workerがブラウザに登録されると、変更するのは困難です。

​
Service Workerの構成

OneSignal Service WorkerファイルOneSignalSDKWorker.jsは次の要件を満たす必要があります：
  • ファイルは公開アクセス可能である必要があります。つまり、ブラウザでファイルに移動してコードを表示できる必要があります。
  • ファイルはapplication/javascript; charset=utf-8のcontent-typeで提供される必要があります。
  • ファイルは同じサイトオリジン（サイトドメイン）を指す必要があります。異なるオリジンのService Workerを指すことは許可されていません。CDNやサブドメインは使用できません。

​
Service Workerが正しく設定されていることを確認する

ブラウザでService Workerにアクセスしてください。Service Workerのコードが表示されるはずです： importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

Service Workerコードの例

OneSignalSDKWorker.jsファイルをサイトのルート（https://yoursite.com/OneSignalSDKWorker.jsでアクセス可能）にアップロードした場合、それ以上のアクションは必要ありません。 ただし、https://yoursite.com/push/onesignal/OneSignalSDKWorker.jsのようなサブディレクトリに配置した場合は、次のように登録スコープを設定する必要があります：
  • 典型的なサイト設定
  • カスタムコードセットアップ
OneSignalダッシュボードで、アプリのSettings > Push & In-App > Web Settingsに移動しますAdvanced Push Settingsの下で、Customize service workers paths and filenamesスイッチを切り替えてデータを入力します。

典型的なサイト設定のService Worker構成

  • Path to service worker filesは、OneSignal Service Workerファイルが利用可能になるディレクトリです。Service Workerがhttps://yoursite.com/push/onesignal/OneSignalSDKWorker.jsで利用可能な場合、パスは：/push/onesignal/です
  • Main and Updater service worker filenamesは、Service Workerファイルの名前です。OneSignalSDKWorker.jsである必要がありますが、変更した場合は、.jsファイル拡張子を使用してください。たとえば、サーバーがファイルを小文字にすることを強制する場合、ファイル名をonesignalsdkworker.jsに設定できます
  • Service worker registration scopeは、このファイルが機能できるページです。これは、ユーザーにリンクすることがなく、現在または将来ページをホストすることのないパスである必要があります。一般的なパスの例：/push/onesignal/ スコープは同じパスまたはより深いパス（例：/push/onesignal/js/）にできます
Service Workerのセットアップが完了しました！次のステップについては、Web SDK Setupガイドに戻ってください。

​
OneSignal Service Worker移行ガイド

このセクションは、すでにOneSignalを使用しており、大量のWebプッシュサブスクライバーを持ち、OneSignal Service Worker設定を変更したい顧客のみを対象としています。特定の理由がない限り、これは推奨されません。
このガイドは、現在Webサイトで既にOneSignalを使用しており、OneSignalSDKWorker.jsファイルを別のパスまたはスコープに移動したい顧客のみを対象としています。
OneSignalのService Workerはデフォルトでルートスコープに設定されており、サイトに次の問題が発生する可能性があります：
  • PWAとの競合
  • AMPセットアップとの競合
  • キャッシングService Worker、またはルートスコープを必要とする他のService Worker機能との競合
  • サイトに、ユーザーがアクセスするページを制御するスコープでサードパーティのService Workerコードを実行することを許可しないセキュリティ要件がある
1つ以上が当てはまる場合は、このガイドに従ってください。

​
OneSignal Service Workerスコープの選択

ユーザーにリンクすることのないService Workerスコープパスを選択することをお勧めしますが、それが何をするかは明確である必要があります。例：/push/onesignal/。このようにして、PWA、AMP、またはその他のキャッシングServiceWorkerは、ユーザーが表示するページを制御して正しく機能できます。複数のService Workerを同じ場所パスに配置することは問題ありませんが、一意のスコープパスを持つ必要があります。
  • オプション1：スコープを変更する
  • オプション2：ファイル名または場所を変更する

​
OneSignal Service Workerスコープを安全に変更する

可能であればスコープのみを変更することをお勧めします。Service Worker自体のファイル名または場所パスを変更すると、追加の考慮事項があります。サブスクライバーを失ったり、通知表示の問題が発生しないように、どのシナリオが適用されるかの詳細と各ステップの両方に細心の注意を払ってください

​
セットアップタイプ1. デフォルトのOneSignalセットアップ - スコープルート「/」およびデフォルトのOneSignalSDKWorker.jsコンテンツ

OneSignalSDKWorker.jsファイルの内容がこちらからOneSignal Service Workerファイルをダウンロードで見つかったものと同じであることを確認してください。（必要な他のOneSignal以外のコードがない場合）この場合、OneSignalスコープを任意のものに変更して、別のService Workerをルートスコープに配置するためのスペースを作ることができます。上記のService Worker統合のカスタマイズを参照してください。
OneSignalSDKWorker.jsが現在ドメインのルートでホストされていない場合、例えば次のようにホストされていない場合：https://mysite.com/OneSignalSDKWorker.js 長期間（1年以上を推奨）Service-Worker-Allowedヘッダーでホストし続ける必要があります。可能であれば、バックエンドコードまたは内部ドキュメントにコメントを追加して、誤って削除されないようにすることをお勧めします。

​
セットアップタイプ2. 一般的ではない - スコープルート「/」およびOneSignalSDKWorker.js（または構成したファイル名）にOneSignal + 他のコードまたはimportScriptsが含まれている

これはあまり一般的ではありませんが、OneSignalガイド「複数のService Workerを統合する」に従ってすでにこれを行っている可能性があります。このセットアップがまだすべての要件を満たしている場合、プッシュイベントを処理するマージされたServiceWorkerファイルを分割するために必要な複雑で2段階のロールアウトのため、現在のセットアップをそのまま維持することを強くお勧めします。
このセクションは、現在のService Workerに次のようなOneSignalおよび他のカスタムコードまたはimportScriptがある場合に適用されます。
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
//同じファイル内の他のサイト固有のコードの例。
importScripts("https://site.com/my-other-service-worker.js");
1

既存のService Workerコードを保持する。

既存のServiceWorkerファイルのこの行の上にコードコメントを追加します importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js"); 長期間（1年以上を推奨、サイトに再訪問しないユーザーにプッシュを送信し続けたい期間によって異なります）保持します。例：// YYYY-MM-DDまで保持：新しいOneSignal固有のServiceWorkerに移行するために再訪問していないユーザーにプッシュが正しく機能するために必要。
2

新しいService Workerファイルを作成する

/push/onesignal/などの別のディレクトリの下に、次の1行のコードで新しいOneSignalSDKWorker.jsを作成します importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
3

「Service Worker統合のカスタマイズ」に関するガイドに従って、スコープ、ファイル名、パスを変更します。

4

この時点で、新規ユーザーと再訪問ユーザーは自動的に新しいOneSignal ServiceWorkerにサブスクライブされます。

5

ステップ1に記載された期間（1年程度）待ちます。

6

OneSignalの「ユーザーを削除する」ガイドに従って、選択したタイムラインより古いユーザーを削除します。

7

元のService Workerからコメントを削除する

最後に、元のルートServiceWorkerからコメント付きのimportScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");行を削除します。

​
OneSignal ServiceWorkerスコープの移行 - FAQ

名前または場所パスを変更した場合、元のServiceWorkerファイルURLをホストし続ける必要があるのはなぜですか？
これは、新しいファイル名が取得されるためにサイトに再訪問していないユーザーに必要です。プッシュを送信するたびに、元のServiceWorkerファイルがブラウザによってフェッチされます（キャッシュ有効期限を過ぎた場合、最大キャッシュは24時間）。元のServiceWorkerファイルが利用できない場合、プッシュを送信する際にホスティングプロバイダーから返される404エラーが急増します。これにより、サーバーへのリクエストが増える可能性があります。また、これらのユーザーは新しいOneSignal機能と修正を取得できないことを意味します。