メインコンテンツへスキップ
OneSignal service worker（OneSignalSDKWorker.js）は、ウェブプッシュ通知に必要な、サーバーでホストされる JavaScript ファイルです。ユーザーがページを離れている場合でも、サイトが通知を受信・表示できるようにします。
Diagram showing the OneSignal service worker receiving a push event and displaying a notification
WordPress プラグインをご使用の場合、service worker は自動的に追加されます。このガイドをスキップして WordPress セットアップに戻ってください。

​
Service worker のセットアップ

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

​
ステップ 1：OneSignalSDKWorker.js をダウンロードまたは作成する

Web SDK セットアップ中に OneSignal ダッシュボードからファイルをダウンロードするか、GitHub からダウンロードしてください。 または、OneSignalSDKWorker.js という名前のファイルを作成し、以下の 1 行のコードを記述します： 
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
必要に応じてファイルを名前変更できます（例：onesignalsdkworker.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）。 ステップ 1 の importScripts 行が表示されるはずです：
Browser displaying the single importScripts line inside OneSignalSDKWorker.js
404 エラー、空白のページ、またはログインプロンプトが表示される場合、ファイルが正しくアップロードされていないか、認証の背後にあります。

​
ステップ 4：SDK パスを設定する（サブディレクトリのみ）

ファイルをサイトルートに配置した場合、追加の設定は不要です——ステップ 5 にスキップしてください。 ファイルをサブディレクトリに配置した場合、SDK にその場所を伝えます：

​
一般的なサイト設定

  1. OneSignal ダッシュボードで、設定 > Push & In-App > Web 設定に移動します。
  2. 高度なプッシュ設定で、service worker のパスとファイル名をカスタマイズを有効にします。
OneSignal dashboard fields for service worker path, filename, and registration scope
フィールド説明例
Path to service worker filesOneSignalSDKWorker.js がホストされているディレクトリ。/push/onesignal/
Service worker filename.js ファイルの名前。OneSignalSDKWorker.js
Service worker registration scopeservice worker が制御する URL パス。ファイルがホストされているディレクトリ以下でなければなりません。ユーザー向けページを提供しないパスを使用してください。/push/onesignal/

​
カスタムコードセットアップ

OneSignal.init() 呼び出しで serviceWorkerPath と serviceWorkerParam を渡します：
HTML
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  window.OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "YOUR_APP_ID",
      serviceWorkerPath: "push/onesignal/OneSignalSDKWorker.js",
      serviceWorkerParam: { scope: "/push/onesignal/" },
    });
  });
</script>
パラメータ説明例
serviceWorkerPathサイトルートから .js ファイルへの相対パス（先頭のスラッシュなし）。"push/onesignal/OneSignalSDKWorker.js"
serviceWorkerParam.scopeservice worker が制御する URL パス。ファイルがホストされているディレクトリ以下でなければなりません。ユーザー向けページを提供しないパスを使用してください。"/push/onesignal/"

​
ステップ 5：service worker の要件を確認する

OneSignalSDKWorker.js ファイルは以下のすべての要件を満たす必要があります。いずれかが満たされない場合、プッシュ通知は機能しません。
要件詳細
公開アクセス可能ブラウザでファイルの URL に移動し、JavaScript コードが表示されることを確認してください。
正しいコンテンツタイプサーバーは Content-Type: application/javascript; charset=utf-8 を返す必要があります。
同一オリジンファイルはサイトと同じドメインでホストされる必要があります。CDN とサブドメインは使用できません。MDN：ワーカーの登録をご参照ください。
HTTPSService worker はセキュアなコンテキストを必要とします。開発中は localhost のみが例外です。
Service worker のセットアップが完了しました。次のステップについては Web SDK セットアップガイドに戻ってください。

​
複数の service worker の結合

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

​
移行ガイド

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

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

現在の service worker 内の OneSignal importScripts 行の上に追加します：
// KEEP until YYYY-MM-DD: Required for push delivery to subscribers who have not revisited.
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
日付は少なくとも1 年後に設定してください。
2

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

サブディレクトリ（例：/push/onesignal/）に、以下のみを含む OneSignalSDKWorker.js を作成します：
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
3

OneSignal の設定を更新する

ステップ 4：SDK パスの設定の説明に従い、ダッシュボードまたは OneSignal.init() を使用して新しいパスとスコープを設定します。
4

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

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

クリーンアップ

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

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

// KEEP until YYYY-MM-DD: Required for push delivery to subscribers still on the old service worker URL.
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
2

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

新しいディレクトリに OneSignalSDKWorker.js（または選択したファイル名）を配置し、以下を記述します：
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
3

OneSignal の設定を更新する

ステップ 4：SDK パスの設定の説明に従い、新しいパス、ファイル名、スコープを設定します。
4

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

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

クリーンアップ

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

​
よくある問題

service worker が 404 を返すのはなぜですか？ SDK が期待する URL にファイルがありません。ブラウザで完全なファイル URL に移動して、アクセスできることを確認してください。ファイルをサブディレクトリに配置した場合は、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 の結合の説明に従って service worker を結合してください。 OneSignalSDKWorker.js ファイルの名前を変更できますか？ はい。サーバーが特定の命名規則（例：すべて小文字）を要求する場合、ファイルを onesignalsdkworker.js のような名前に変更できます。その場合、OneSignal の設定でファイル名を更新してください——ダッシュボードの Service worker filename フィールド、または OneSignal.init() 呼び出しの serviceWorkerPath パラメータのいずれかで。詳細はステップ 4をご参照ください。 service worker ファイルに対してサーバーが返すべきコンテンツタイプは何ですか？ サーバーは Content-Type: application/javascript; charset=utf-8 を返す必要があります。一部のサーバーまたは CDN の設定では誤った MIME タイプが返される場合があり、ブラウザが service worker の登録を拒否する原因となります。