> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# OneSignal service worker

> OneSignalSDKWorker.js ファイルをセットアップおよび設定して、ウェブサイトが OneSignal 経由でウェブプッシュ通知を受信・表示できるようにします。

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

<Frame caption="OneSignal service worker がプッシュ通知を処理する仕組み">
  <img src="https://mintcdn.com/onesignal/MUgio66t0sYhGEvj/images/docs/67882a5-onesignsal-service-worker.jpg?fit=max&auto=format&n=MUgio66t0sYhGEvj&q=85&s=e0b50cfe6ccc36c1b2b6d36219b6e3ad" alt="Diagram showing the OneSignal service worker receiving a push event and displaying a notification" width="2016" height="949" data-path="images/docs/67882a5-onesignsal-service-worker.jpg" />
</Frame>

<Note>
  WordPress プラグインをご使用の場合、service worker は自動的に追加されます。このガイドをスキップして [WordPress セットアップ](./wordpress)に戻ってください。
</Note>

## Service worker のセットアップ

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

<Steps>
  <Step title="OneSignalSDKWorker.js をダウンロードまたは作成する">
    [Web SDK セットアップ](./web-sdk-setup)中に OneSignal ダッシュボードからファイルをダウンロードするか、[GitHub からダウンロード](https://github.com/OneSignal/OneSignal-Website-SDK/files/11480764/OneSignalSDK-v16-ServiceWorker.zip)してください。

    または、`OneSignalSDKWorker.js` という名前のファイルを作成し、以下の 1 行のコードを記述します：

    ```javascript theme={null}
    importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
    ```

    <Note>
      必要に応じてファイルを名前変更できます（例：`onesignalsdkworker.js`）。その場合、このガイド内の `OneSignalSDKWorker.js` をご自身のファイル名に置き換えてください。
    </Note>
  </Step>

  <Step title="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` をサブディレクトリに配置してください。

    <Warning>
      **永続的な** URL パスを選択してください。ブラウザが特定の URL に service worker を登録した後、その URL を変更するには[移行](#migration-guide)が必要です。
    </Warning>
  </Step>

  <Step title="ファイルにアクセスできることを確認する">
    ブラウザでファイルの URL に移動します（例：`https://yoursite.com/push/onesignal/OneSignalSDKWorker.js`）。

    ステップ 1 の `importScripts` 行が表示されるはずです：

    <Frame caption="ブラウザで表示される service worker ファイルの期待される内容">
      <img src="https://mintcdn.com/onesignal/eSOC1PsvyAo3Gten/images/push/service-worker-code-example.png?fit=max&auto=format&n=eSOC1PsvyAo3Gten&q=85&s=3add122d37c9f12a39f1d7e3d40eeaba" alt="Browser displaying the single importScripts line inside OneSignalSDKWorker.js" width="1678" height="322" data-path="images/push/service-worker-code-example.png" />
    </Frame>

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

  <Step title="SDK パスを設定する（サブディレクトリのみ）">
    ファイルをサイトルートに配置した場合、追加の設定は不要です——次のステップにスキップしてください。

    ファイルをサブディレクトリに配置した場合、SDK にその場所を伝えます：

    #### 一般的なサイト設定

    1. OneSignal ダッシュボードで、**設定 > Push & In-App > Web 設定**に移動します。
    2. **高度なプッシュ設定**で、**service worker のパスとファイル名をカスタマイズ**を有効にします。

    <Frame caption="ダッシュボードでの service worker パス設定">
      <img src="https://mintcdn.com/onesignal/npQH4TNAoIbyiAie/images/dashboard/service-worker-configuration-typical-site-setup.png?fit=max&auto=format&n=npQH4TNAoIbyiAie&q=85&s=0bc69998eea5273d287af408c6e925b3" alt="OneSignal dashboard fields for service worker path, filename, and registration scope" width="1840" height="794" data-path="images/dashboard/service-worker-configuration-typical-site-setup.png" />
    </Frame>

    | フィールド                                 | 説明                                                                                      | 例                       |
    | ------------------------------------- | --------------------------------------------------------------------------------------- | ----------------------- |
    | **Path to service worker files**      | `OneSignalSDKWorker.js` がホストされているディレクトリ。                                                | `/push/onesignal/`      |
    | **Service worker filename**           | `.js` ファイルの名前。                                                                          | `OneSignalSDKWorker.js` |
    | **Service worker registration scope** | service worker が制御する URL パス。ファイルがホストされているディレクトリ以下でなければなりません。ユーザー向けページを提供しないパスを使用してください。 | `/push/onesignal/`      |

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

    [`OneSignal.init()`](./web-push-custom-code-setup) 呼び出しで `serviceWorkerPath` と `serviceWorkerParam` を渡します：

    ```html theme={null}
    <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.scope` | service worker が制御する URL パス。ファイルがホストされているディレクトリ以下でなければなりません。ユーザー向けページを提供しないパスを使用してください。 | `"/push/onesignal/"`                     |
  </Step>

  <Step title="service worker の要件を確認する">
    `OneSignalSDKWorker.js` ファイルは以下のすべての要件を満たす必要があります。いずれかが満たされない場合、プッシュ通知は機能しません。

    | 要件              | 詳細                                                                                                                                                                                          |
    | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | **公開アクセス可能**    | ブラウザでファイルの URL に移動し、JavaScript コードが表示されることを確認してください。                                                                                                                                        |
    | **正しいコンテンツタイプ** | サーバーは `Content-Type: application/javascript; charset=utf-8` を返す必要があります。                                                                                                                     |
    | **同一オリジン**      | ファイルはサイトと同じドメインでホストされる必要があります。CDN とサブドメインは使用できません。[MDN：ワーカーの登録](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Registering_your_worker)をご参照ください。 |
    | **HTTPS**       | Service worker はセキュアなコンテキストを必要とします。開発中は `localhost` のみが例外です。                                                                                                                                |

    <Check>
      Service worker のセットアップが完了しました。
    </Check>

    <Card title="Web SDK セットアップ" icon="browsers" href="./web-sdk-setup">
      次のステップについては Web SDK セットアップガイドに進んでください。
    </Card>
  </Step>
</Steps>

***

## 複数の service worker の結合

サイト上の各 service worker ファイルは**スコープ**（どのページを制御するかを決める URL パス）に登録されます。特定のスコープでアクティブにできる service worker は 1 つだけです。既に service worker（例：PWA やキャッシュワーカー）があり、OneSignal が同じファイルを共有するようにしたい場合は、結合できます。

<Warning>
  service worker を別々のスコープを持つ別々のファイルに保持する方が、保守が容易で競合を回避できます。セットアップで単一の service worker ファイルが必要な場合にのみ結合してください。
</Warning>

結合するには、OneSignal の `importScripts` 行を**既存の** service worker ファイルに追加します：

```javascript theme={null}
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 パスの設定](#step-4-configure-the-sdk-path-subdirectory-only)に従ってください。

***

## 移行ガイド

このセクションは、service worker ファイルのパス、ファイル名、またはスコープを変更する必要がある既存の OneSignal ユーザー向けです。現在の設定を変更する特定の理由がない限り、これらの手順に従わないでください。

<Accordion title="service worker を移行する時期と方法">
  **移行の理由：**

  * ルートスコープの OneSignal service worker がプログレッシブウェブアプリ（PWA）と競合している
  * Service worker が AMP または別のキャッシュ service worker と競合している
  * セキュリティポリシーによりルートスコープでのサードパーティ service worker コードが禁止されている

  **オプション 1：スコープのみを変更する（推奨）**

  スコープのみの変更は最も安全な移行方法です。ファイルは現在の URL に留まるため、既存のサブスクライバーは中断なく通知を受け続けます。

  **ファイルに OneSignal コードのみが含まれる場合**

  `OneSignalSDKWorker.js` に以下のみが含まれることを確認します：

  ```javascript theme={null}
  importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
  ```

  [ステップ 4：SDK パスの設定](#step-4-configure-the-sdk-path-subdirectory-only)の説明に従い、ダッシュボードまたは `serviceWorkerParam` を使用してスコープを更新します。他の変更は不要です。

  <Warning>
    `OneSignalSDKWorker.js` が現在ドメインルートでホストされて**いない**場合、少なくとも 1 年間は `Service-Worker-Allowed` ヘッダーを付けて現在の URL でホストし続ける必要があります。バックエンドコードまたは内部ドキュメントにコメントを追加して、ファイルが誤って削除されないようにしてください。
  </Warning>

  **ファイルに OneSignal + その他のコードが含まれる場合**

  Service worker に追加の `importScripts` 呼び出しが含まれている可能性があります（例：[複数の service worker の結合](#combining-multiple-service-workers)ガイドに従った場合）。現在のセットアップが正常に機能している場合は、**そのままにしてください**——マージされた service worker の分割には 2 段階のロールアウトが必要です。

  分離が必要な場合：

  <Steps>
    <Step title="既存のファイルに保持コメントを追加する">
      現在の service worker 内の OneSignal `importScripts` 行の上に追加します：

      ```javascript theme={null}
      // 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 年**後に設定してください。
    </Step>

    <Step title="新しい専用 OneSignal service worker を作成する">
      サブディレクトリ（例：`/push/onesignal/`）に、以下のみを含む `OneSignalSDKWorker.js` を作成します：

      ```javascript theme={null}
      importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
      ```
    </Step>

    <Step title="OneSignal の設定を更新する">
      [ステップ 4：SDK パスの設定](#step-4-configure-the-sdk-path-subdirectory-only)の説明に従い、ダッシュボードまたは `OneSignal.init()` を使用して新しいパスとスコープを設定します。
    </Step>

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

    <Step title="クリーンアップ">
      選択した保持期間より古い[非アクティブユーザーを削除](./delete-users)し、元の service worker ファイルから OneSignal `importScripts` 行を削除します。
    </Step>
  </Steps>

  **オプション 2：ファイル名またはファイルの場所を変更する**

  ファイル名やディレクトリの変更はより複雑です。ブラウザは元々登録された URL から service worker を取得するためです。サイトを再訪していないサブスクライバーは古い URL を参照し続けます。

  <Warning>
    元のファイルを古い URL で少なくとも 1 年間ホストし続ける必要があります。削除すると、ブラウザが service worker を更新しようとする際に 404 エラーが発生し、影響を受けたサブスクライバーは通知を受け取れなくなります。
  </Warning>

  **ファイルに OneSignal コードのみが含まれる場合**

  <Steps>
    <Step title="古いファイルに保持コメントを追加する">
      ```javascript theme={null}
      // 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");
      ```
    </Step>

    <Step title="新しい場所に新しいファイルを作成する">
      新しいディレクトリに `OneSignalSDKWorker.js`（または選択したファイル名）を配置し、以下を記述します：

      ```javascript theme={null}
      importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
      ```
    </Step>

    <Step title="OneSignal の設定を更新する">
      [ステップ 4：SDK パスの設定](#step-4-configure-the-sdk-path-subdirectory-only)の説明に従い、新しいパス、ファイル名、スコープを設定します。
    </Step>

    <Step title="サブスクライバーの移行を待つ">
      新規訪問者と再訪問者は自動的に新しいファイルに登録されます。少なくとも 1 年待ちます。
    </Step>

    <Step title="クリーンアップ">
      保持期間より古い[非アクティブユーザーを削除](./delete-users)し、古いファイルを削除します。
    </Step>
  </Steps>

  **ファイルに OneSignal + その他のコードが含まれる場合**

  上記の**オプション 1：スコープのみを変更する**の手順に従ってください。プロセスは同じです。
</Accordion>

***

## よくある問題

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

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

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

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

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

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

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

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

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

はい。サーバーが特定の命名規則（例：すべて小文字）を要求する場合、ファイルを `onesignalsdkworker.js` のような名前に変更できます。その場合、OneSignal の設定でファイル名を更新してください——ダッシュボードの **Service worker filename** フィールド、または `OneSignal.init()` 呼び出しの `serviceWorkerPath` パラメータのいずれかで。詳細は[ステップ 4](#step-4-configure-the-sdk-path-subdirectory-only)をご参照ください。

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

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