Skip to main content
OneSignal service worker（OneSignalSDKWorker.js）は、ウェブプッシュ通知に必要な、サーバーでホストされる JavaScript ファイルです。ユーザーがページを離れている場合でも、サイトが通知を受信・表示できるようにします。
Diagram showing the OneSignal service worker receiving a push event and displaying a notification

OneSignal service worker がプッシュ通知を処理する仕組み

WordPress プラグインをご使用の場合、このガイドはスキップしてください。プラグインは OneSignalSDKWorker.js を sdk_files ディレクトリでホストし、パスを自動的に設定します。ファイルをサイトルートにアップロードしたり、ダッシュボードやコードでカスタムパスを設定したりしないでください。WordPress セットアップをご参照ください。Shopify も同様にワーカーを自動的にデプロイします。Shopify セットアップをご参照ください。

​
Service worker のセットアップ

OneSignal プッシュ通知専用の OneSignalSDKWorker.js ファイルを作成します。サイトに既に service worker があり、単一ファイルを使用したい場合は、代わりに複数の service worker の結合をご参照ください。
1

OneSignalSDKWorker.js をダウンロードまたは作成する

Web SDK セットアップ中に OneSignal ダッシュボードからファイルをダウンロードするか、GitHub からダウンロードしてください。または、OneSignalSDKWorker.js という名前のファイルを作成し、以下の 1 行のコードを記述します：
必要に応じてファイル名を変更できます（例：onesignalsdkworker.js、ossw.js）。その場合、このガイド内の OneSignalSDKWorker.js をご自身のファイル名に置き換えてください。
2

Web サーバーにアップロードする

OneSignalSDKWorker.js をサーバーに配置し、HTTPS で公開アクセスできるようにします。ファイルへのアクセスに認証やログインが必要であってはなりません。推奨： ページを提供しない専用のサブディレクトリ（例：/push/onesignal/）にファイルをホストします。これにより、サイト上の他の service worker（PWA や AMP の service worker など）との競合を避け、URL パスを安定させることができます。
  • 例：https://yoursite.com/push/onesignal/OneSignalSDKWorker.js
代替方法： OneSignal Web SDK はデフォルトでサイトルート（https://yoursite.com/OneSignalSDKWorker.js）でファイルを検索します。ルートディレクトリにファイルをアップロードできますが、ルートスコープを必要とする他の service worker と競合する可能性があります。PWA を使用している場合は、代わりに OneSignalSDKWorker.js をサブディレクトリに配置してください。
永続的な URL パスを選択してください。ブラウザが特定の URL に service worker を登録した後、その URL を変更するには移行が必要です。
3

ファイルにアクセスできることを確認する

ブラウザでファイルの URL に移動します（例：https://yoursite.com/push/onesignal/OneSignalSDKWorker.js）。最初のステップの importScripts 行が表示されるはずです：
Browser displaying the single importScripts line inside OneSignalSDKWorker.js

ブラウザで表示される service worker ファイルの期待される内容

404 エラー、空白のページ、またはログインプロンプトが表示される場合、ファイルが正しくアップロードされていないか、認証の背後にあります。
4

SDK にファイルの場所を伝える

Web SDK は、別の場所を指定しない限り、サイトルート（https://yoursite.com/OneSignalSDKWorker.js）で OneSignalSDKWorker.js を検索します。指定方法は統合タイプによって異なります。ファイルをサイトルートに配置した場合、追加の設定は不要です。次のステップにスキップしてください。ファイルをサブディレクトリに配置した場合、パスを設定する必要があります。「一般的なサイト」ではダッシュボードで設定します。「カスタムコード」では OneSignal.init() で設定します。両者を混在させることはできません：ダッシュボードのパスフィールドはカスタムコードには適用されず、serviceWorkerPath は一般的なサイトには適用されません。

​
一般的なサイト

OneSignal ダッシュボードでパスを設定します。コードで serviceWorkerPath を渡さないでください。
  1. Settings > Push & In-App > Web に移動します。
  2. Advanced Push Settings で、Customize service worker paths and filenames を有効にします。
OneSignal dashboard fields for service worker path, filename, and registration scope

ダッシュボードでの service worker パス設定

一般的なサイトの手順については、Web SDK セットアップをご参照ください。

​
カスタムコード

OneSignal.init() 呼び出しで serviceWorkerPath と serviceWorkerParam を渡します。カスタムコードでは、ダッシュボードの Customize service worker paths and filenames フィールドは使用しません。
ファイルがサイトルートになく、これらのオプションを省略した場合、SDK は引き続き https://yoursite.com/OneSignalSDKWorker.js を取得し、登録は失敗します。これらのオプションを完全な init スニペットに追加するには、カスタムコードセットアップをご参照ください。
5

service worker の要件を確認する

プッシュ通知が機能するには、OneSignalSDKWorker.js ファイルが以下のすべての要件を満たす必要があります。
Service worker のセットアップが完了しました。

Web SDK セットアップ

次のステップについては Web SDK セットアップガイドに進んでください。

​
複数の service worker の結合

サイト上の各 service worker ファイルはスコープ（どのページを制御するかを決める URL パス）に登録されます。特定のスコープでアクティブにできる service worker は 1 つだけです。既に service worker（例：PWA やキャッシュワーカー）があり、OneSignal が同じファイルを共有するようにしたい場合は、結合できます。
service worker を別々のスコープを持つ別々のファイルに保持する方が、保守が容易で競合を回避できます。セットアップで単一の service worker ファイルが必要な場合にのみ結合してください。
結合するには、OneSignal の importScripts 行を既存の service worker ファイルに追加します：
結合後、OneSignal の設定を更新して既存の service worker ファイルを指すようにします。結合されたファイルのパスとファイル名を使用して、SDK にファイルの場所を伝えるに従ってください。

​
移行ガイド

このセクションは、service worker ファイルのパス、ファイル名、またはスコープを変更する必要がある既存の OneSignal ユーザー向けです。現在の設定を変更する特定の理由がない限り、これらの手順に従わないでください。
移行の理由：
  • ルートスコープの OneSignal service worker がプログレッシブウェブアプリ（PWA）と競合している
  • Service worker が AMP または別のキャッシュ service worker と競合している
  • セキュリティポリシーによりルートスコープでのサードパーティ service worker コードが禁止されている
オプション 1：スコープのみを変更する（推奨）スコープのみの変更は最も安全な移行方法です。ファイルは現在の URL に留まるため、既存のサブスクライバーは中断なく通知を受け続けます。ファイルに OneSignal コードのみが含まれる場合OneSignalSDKWorker.js に以下のみが含まれることを確認します：
SDK にファイルの場所を伝えるの説明に従い、ダッシュボード（一般的なサイト）または serviceWorkerParam（カスタムコード）を使用してスコープを更新します。他の変更は不要です。
OneSignalSDKWorker.js が現在ドメインルートでホストされていない場合、少なくとも 1 年間は Service-Worker-Allowed ヘッダーを付けて現在の URL でホストし続ける必要があります。バックエンドコードまたは内部ドキュメントにコメントを追加して、ファイルが誤って削除されないようにしてください。
ファイルに OneSignal + その他のコードが含まれる場合Service worker に追加の importScripts 呼び出しが含まれている可能性があります（例：複数の service worker の結合ガイドに従った場合）。現在のセットアップが正常に機能している場合は、そのままにしてください——マージされた service worker の分割には 2 段階のロールアウトが必要です。分離が必要な場合：
1

既存のファイルに保持コメントを追加する

現在の service worker 内の OneSignal importScripts 行の上に追加します：
日付は少なくとも1 年後に設定してください。
2

新しい専用 OneSignal service worker を作成する

サブディレクトリ（例：/push/onesignal/）に、以下のみを含む OneSignalSDKWorker.js を作成します：
3

OneSignal の設定を更新する

SDK にファイルの場所を伝えるの説明に従い、ダッシュボード（一般的なサイト）または OneSignal.init()（カスタムコード）を使用して新しいパスとスコープを設定します。
4

サブスクライバーの移行を待つ

新規訪問者と再訪問者は自動的に新しい service worker に登録されます。既存のサブスクライバーの大部分がサイトを再訪するまで、少なくとも 1 年待ちます。
5

クリーンアップ

選択した保持期間より古い非アクティブユーザーを削除し、元の service worker ファイルから OneSignal importScripts 行を削除します。
オプション 2：ファイル名またはファイルの場所を変更するファイル名やディレクトリの変更はより複雑です。ブラウザは元々登録された URL から service worker を取得するためです。サイトを再訪していないサブスクライバーは古い URL を参照し続けます。
元のファイルを古い URL で少なくとも 1 年間ホストし続ける必要があります。削除すると、ブラウザが service worker を更新しようとする際に 404 エラーが発生し、影響を受けたサブスクライバーは通知を受け取れなくなります。
ファイルに OneSignal コードのみが含まれる場合
1

古いファイルに保持コメントを追加する

2

新しい場所に新しいファイルを作成する

新しいディレクトリに OneSignalSDKWorker.js（または選択したファイル名）を配置し、以下を記述します：
3

OneSignal の設定を更新する

SDK にファイルの場所を伝えるの説明に従い、新しいパス、ファイル名、スコープを設定します。
4

サブスクライバーの移行を待つ

新規訪問者と再訪問者は自動的に新しいファイルに登録されます。少なくとも 1 年待ちます。
5

クリーンアップ

保持期間より古い非アクティブユーザーを削除し、古いファイルを削除します。
ファイルに OneSignal + その他のコードが含まれる場合上記のオプション 1：スコープのみを変更するの手順に従ってください。プロセスは同じです。

​
よくある質問

​
このガイドは WordPress に適用されますか？

いいえ。WordPress プラグインは OneSignalSDKWorker.js を sdk_files ディレクトリでホストして登録します。ワーカーをサイトルートにアップロードしたり、コードで serviceWorkerPath を設定したりしないでください。WordPress セットアップをご参照ください。

​
一般的なサイトとカスタムコードで service worker パスをどのように設定しますか？

Web SDK は、カスタムパスを設定しない限り、サイトルートで OneSignalSDKWorker.js を検索します。一般的なサイトでは、ダッシュボードの Customize service worker paths and filenames でそのパスを設定します。カスタムコードでは、OneSignal.init() の serviceWorkerPath と serviceWorkerParam を使用してコードで設定します。ダッシュボードのパスフィールドはカスタムコードには適用されません。SDK にファイルの場所を伝えるをご参照ください。

​
service worker が 404 を返すのはなぜですか？

SDK が期待する URL にファイルがありません。ブラウザで完全なファイル URL に移動して、アクセスできることを確認してください。ファイルをサブディレクトリに配置した場合、設定されたパスが、ディレクトリとファイル名を含む実際のファイルの場所と一致している必要があります。一般的なサイト：ダッシュボードのパス設定を確認してください。カスタムコード：OneSignal.init() の serviceWorkerPath を確認してください。

​
service worker ファイルを移動した後、通知が表示されないのはなぜですか？

既存のサブスクライバーは古い service worker URL を参照し続けています。ブラウザはプッシュが到着するたびに登録済みの URL を取得します（最大 24 時間キャッシュ）。古い URL が 404 を返す場合、それらのサブスクライバーは通知を受け取れません。サブスクライバーがサイトを再訪することで自然に移行するまで、少なくとも 1 年間古いファイルのホスティングを続けてください。移行ガイドとウェブプッシュ通知が表示されないガイドをご参照ください。

​
CDN またはサブドメインで service worker をホストできますか？

いいえ。ブラウザは service worker がそれを登録するページと同じオリジンから提供されることを要求します。ファイルはプライマリドメインに存在する必要があります——CDN、サブドメイン、または別のドメインは使用できません。

​
PWA が OneSignal service worker と競合するのはなぜですか？

両方がルートスコープ（/）に登録されている可能性があり、特定のスコープでアクティブにできる service worker は 1 つだけです。OneSignal service worker をサブディレクトリスコープ（例：/push/onesignal/）に移動して PWA がルートスコープを保持できるようにするか、複数の service worker の結合の説明に従って結合してください。

​
OneSignalSDKWorker.js ファイルの名前を変更できますか？

はい。サーバーが特定の命名規則（例：すべて小文字）を要求する場合、ファイルを onesignalsdkworker.js のような名前に変更できます。一般的なサイト：ダッシュボードの Service worker filename フィールドを更新してください。カスタムコード：OneSignal.init() 呼び出しの serviceWorkerPath を更新してください。SDK にファイルの場所を伝えるをご参照ください。

​
service worker ファイルに対してサーバーが返すべきコンテンツタイプは何ですか？

サーバーは Content-Type: application/javascript; charset=utf-8 を返す必要があります。一部のサーバーまたは CDN の設定では誤った MIME タイプが返される場合があり、ブラウザが service worker の登録を拒否する原因となります。