> ## 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.
# Web SDKのトラブルシューティング
> Chrome、Firefox、Safari、AndroidでのOneSignal Web Pushの問題をトラブルシューティングします。一般的なサービスワーカー、オリジン、MIMEタイプ、モバイルプッシュエラーを段階的なデバッグガイダンスで修正します。
## 概要
このガイドでは、OneSignal Web SDKセットアップのトラブルシューティング手順を説明します。続行する前に、[Web SDKセットアップ](./web-sdk-setup)を確認して、すべての手順を完了していることを確認してください。
Webプッシュが動作していないように見える最も一般的な理由は、実際にはブラウザとデバイスの通知設定に関連しています：
### ブラウザの互換性
ユーザーは[ウェブ許可プロンプト](/docs/ja/permission-requests)を見ることができますが、シークレット、プライベート、またはゲストブラウザモードではプッシュ通知を購読できません。
| Browser | Windows | macOS | Android | iOS |
| -------------------------------------------------------------------------------- | ------- | ----- | ------- | --- |
| [Chrome](https://en.wikipedia.org/wiki/Google_Chrome) | ✅ | ✅ | ✅ | ✅ ¹ |
| [Firefox](https://en.wikipedia.org/wiki/Firefox) | ✅ | ✅ | ✅ | ✅ ¹ |
| [Safari 10+](https://en.wikipedia.org/wiki/Safari_\(web_browser\)) | ❌ | ✅ | ❌ | ✅ ¹ |
| [Microsoft Edge](https://en.wikipedia.org/wiki/Microsoft_Edge) | ✅ | ✅ | ✅ | ✅ ¹ |
| [Opera](https://en.wikipedia.org/wiki/Opera_\(web_browser\)) ² | ✅ | ✅ | ✅ | ✅ ¹ |
| [Samsung Internet](https://en.wikipedia.org/wiki/Samsung_Internet_for_Android) ² | ❌ | ❌ | ✅ | ✅ ¹ |
| [Yandex](https://en.wikipedia.org/wiki/Yandex_Browser) ² | ✅ | ✅ | ✅ | ✅ ¹ |
| [UC Browser](https://en.wikipedia.org/wiki/UC_Browser) ² | ✅ | ❌ | ✅ | ✅ ¹ |
| [Internet Explorer](https://en.wikipedia.org/wiki/Internet_Explorer) | ❌ | ❌ | ❌ | ❌ |
| [DuckDuckGo](https://en.wikipedia.org/wiki/DuckDuckGo) | ❌ | ❌ | ❌ | ❌ |
¹ iOS ではウェブアプリのインストールが必要です([iOS ウェブプッシュ設定](/docs/ja/web-push-for-ios)を参照)
² Chromium ベースのブラウザは OneSignal アナリティクスでは "Chrome" として表示されます
### デバイスの通知設定
デバイスの通知設定は、Web プッシュ通知がデバイスに表示されない**最も一般的な原因**です。他の原因を調べる前に、集中モード（おやすみモード、低バッテリーなど）を含む以下の設定を確認してください。
以下のタブから正しいオペレーティングシステムを選択してください。Windows、macOS、Android、iOS が表示されるはずです。
1. **スタート > 設定 > 通知とアクション > アプリや他の送信者からの通知を取得する**を選択します
2. **サイトとブラウザも有効になっていることを確認してください。**
**Windows 11 通知設定:**
1. **スタート > 設定 > システム > 通知**を選択します
2. **通知**をオンにします
3. **応答不可**をオフにします（テスト中は、これを無効にするとプッシュが表示されます）
4. **アプリや他の送信者からの通知**まで下にスクロールします
5. ブラウザが**オン**になっていることを確認してください。
1. **システム設定 > 通知**に移動します
2. 通知センターで**通知**が有効になっていることを確認します。
**ディスプレイのミラーリングまたは共有時に通知を許可する**を選択する必要がある場合があります。
3. アプリケーション通知リストまで下にスクロールし、ブラウザがオンになっていることを確認します。
Chrome や Edge などの一部のブラウザは、2 つの異なるアプリケーションエントリを表示します。
1. 標準的なウェブプッシュ通知
2. 内部アラート（例：Google カレンダー）
両方が有効になっていることを確認してください。
4. アプリケーションを選択し、設定をオンにします。通知の表示方法を選択します。
Safari の古いバージョンでは、ウェブサイトがアプリケーション通知リストに表示される場合があります。この場合は、ウェブサイトがオンになっていることを確認してください。
5. **システム設定 > 集中モード**に移動し、テスト中に集中モードが有効になっていないことを確認します。
1. **設定 > 通知 > お使いのブラウザ**に移動します。
2. \*\*「通知を表示」\*\*とウェブサイトにチェックが入っていることを確認します。
Android はアプリごとの通知チャンネルを使用します。ブラウザの通知チャンネルがサイレントまたはオフに設定されている場合、最上位のトグルがオンであっても、プッシュ通知は表示されません。設定でブラウザの項目をタップし、各通知チャンネルが有効になっており、表示されるアラートスタイルに設定されていることを確認してください。
iOS では、サブスクライバーが iPhone と iPad でプッシュ通知を受信する前に、サイトをホーム画面に追加する必要があります。トラブルシューティングを行う前に、[iOS Web プッシュ設定](/docs/ja/web-push-for-ios)の手順を完了してください。
1. ブラウザの**共有**ボタンをタップし、**ホーム画面に追加**を選択します。
2. ホーム画面からサイトを開き、権限プロンプトが表示されたら通知を許可します。
3. デバイスの**設定 > 通知 > お使いのサイト**に移動し、**通知を許可**がオンになっていることを確認します。
### プロンプトの表示に関する問題
以下は、ウェブプッシュ通知プロンプトが期待どおりに表示されない一般的な理由です。
[ウェブ許可プロンプト](/docs/ja/permission-requests)の設定を確認して、プロンプトを設定し、ブラウザごとの動作の違いを理解していることを確認してください。
たとえば、Safari などの一部のブラウザでは、ネイティブプロンプトが表示される前にユーザーのジェスチャー(ボタンのクリック)が必要です。各ブラウザの詳細については、[ウェブ許可プロンプト > ネイティブ許可プロンプト](/docs/ja/permission-requests#native-permission-prompt)セクションを参照してください。
ブラウザはこれらのモードでユーザーが通知を購読することを許可しません。そのため、スライドプロンプトは表示されても、ネイティブの許可プロンプトは表示されません。
[ウェブプッシュをサポートするブラウザとデバイスを使用](/docs/ja/troubleshooting-web-push#browser-compatibility)していることを確認してください。
ブラウザの設定に移動し、「通知」の許可設定を確認します。Chrome の例: `chrome://settings/content/notifications`
この例では:
* ユーザーが「サイトによる通知の送信を許可しない」を選択しているため、ネイティブの許可プロンプトが表示されません。ネイティブの許可プロンプトを表示するには、「サイトが通知の送信を要求できる」と表示される必要があります。
* ユーザーが `https://yoursite.com` を「通知の送信を許可しない」リストに追加しているため、ネイティブの許可プロンプトが表示されません。ネイティブの許可プロンプトを表示するには、このリストから削除する必要があります。
**ブラウザ固有のドキュメント:**
* [Chrome](https://support.google.com/chrome/answer/3220216) - このページでは、設定 > プライバシーとセキュリティ > サイトの設定 > 通知に移動して Chrome で通知を管理する方法を説明しており、デフォルトの動作を制御し、個々のウェブサイトの権限を管理できます。
* [Firefox](https://support.mozilla.org/en-US/kb/push-notifications-firefox) - このガイドでは、Firefox のウェブプッシュ通知について説明しており、設定 > プライバシーとセキュリティ > 通知を通じて通知権限を管理する方法と、アドレスバーのサイト情報アイコンを通じて特定のサイトの権限を制御する方法を説明しています。
* [Safari](https://support.apple.com/guide/safari/customize-website-notifications-sfri40734/mac) - この Apple ガイドでは、Safari > 環境設定 > Web サイト > 通知を通じて Mac で Safari 通知をカスタマイズする方法を説明しており、どのサイトが通知を送信できるかを管理し、システム環境設定を通じて通知の動作を制御できます。
* [Edge](https://support.microsoft.com/en-us/microsoft-edge/manage-website-notifications-in-microsoft-edge-0c555609-5bf2-479d-a59d-fb30a0b80b2b) - この記事では、設定 > プライバシー、検索、サービス > サイトのアクセス許可 > 通知に移動するか、アドレスバーのサイト情報アイコンをクリックして Edge 通知を管理する方法を詳しく説明しています。
iOS の場合、ユーザーに購読を促すための追加の要件がいくつかあります。詳細については、[iOS/iPadOS 向けモバイルウェブプッシュ](/docs/ja/web-push-for-ios)ガイドを参照してください。
***
## トラブルシューティング手順
上記を確認した後、次の手順に従ってOneSignal Web SDKセットアップのトラブルシューティングを行います。
ブラウザの開発者ツールを使用して、Webページ上でWeb SDKと対話し、ロギングを有効にしてエラーを確認できます。
* **Chrome**: ページを右クリックし、*検証*をクリックして、開いたポップアップウィンドウの*コンソール*タブをクリックします。
* **Firefox**: ページを右クリックし、*要素を調査*をクリックして、開いたポップアップウィンドウの*コンソール*タブをクリックします。
* **Safari**: **Safari → 環境設定 → 詳細**に移動し、*メニューバーに"開発"メニューを表示*がチェックされていることを確認します。次に、Webページで右クリックし、*要素の詳細を表示*をクリックして、開いたポップアップウィンドウの*コンソール*タブをクリックします。
* **AndroidのChrome**: [USBデバッグを有効にする](https://developer.chrome.com/docs/devtools/remote-debugging/)、デバイスをコンピュータに接続し、デスクトップChromeブラウザで`chrome://inspect#devices`を使用して開発者ツールにアクセスします。
* **AndroidのFirefox**: [USBデバッグを有効にする](https://developer.mozilla.org/en-US/docs/Tools/about:debugging)、デバイスをコンピュータに接続し、デスクトップFirefoxブラウザで`about:debugging`を使用して開発者ツールにアクセスします。
1. [iOSでWebインスペクタを有効にする](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html)。
2. MacでSafariブラウザを開き、**開発 > デバイス > サイト**を選択します。
開発者ツールのコンソールでコマンドを実行できるようになりました。次のコードを実行します：
```javascript JavaScript theme={null}
OneSignal.Debug.setLogLevel('trace');
```
* 結果として`undefined`が表示されるはずです。
* タブを閉じて、同じページに新しいタブを開きます。更新だけではすべてのSDK初期化イベントがトリガーされません。
* コンソールにOneSignal SDKログが表示され始めます。
### 構成エラー
OneSignalが初期化された後、次のエラーが発生する場合があります：
エラー: SDK already initialized
**これが意味すること：** OneSignal Web SDKの`init`コードが複数回呼び出されています。これは、WordPressプラグインのセットアップと手動コードを組み合わせたり、誤ってOneSignalの`init`コードを複数回追加したりすることが原因です。
**修正方法：** 重複する`init`呼び出しを削除してください。WordPressプラグインを使用している場合は、テーマファイルから手動のOneSignalコードを削除してください。
エラー: Can only be used on: (OneSignalダッシュボードに設定されたURL)
**これが意味すること：** 現在アクセスしているドメインが、OneSignalダッシュボードで構成されたサイトURLと一致していません。
**修正方法：** ブラウザでサイトURLをコピーし、OneSignalダッシュボードの**設定 > Push & In-app > Web > サイトURL**構成に貼り付けます。次の形式を使用してサイトのオリジンであることを確認してください：
* **プロトコル：** `https://`である必要があります（ローカルテストの場合は、[Localhost構成](./web-sdk-setup#local-testing)を参照してください）
* **ドメイン：** `example.com` vs `www.example.com`
* **サブドメイン：** `app.example.com` vs `example.com`
実際のサイトURLとダッシュボード構成の間で、これら3つのコンポーネントすべてが一致する必要があります。
エラー: OneSignalSDK: The "My site is not fully HTTPS" option is no longer supported starting with version 16 (User Model) of the OneSignal SDK.
**これが意味すること：** OneSignalダッシュボードがHTTPサイトを使用するように構成されており、HTTPSを使用するように更新した可能性があります。
HTTPを使用しているとき、または「私のサイトは完全にHTTPSではありません」オプションを使用しているときにサイトに登録したユーザーは、実際には、実際のサイトのオリジンではなく、`https://your-label.os.tc`形式で提供されたサブドメインに登録されています。これは、HTTPサイトまたはサービスワーカーをホストできないWebサイトではWebプッシュがサポートされていないためです。
**修正方法：** 2つのオプションがありますが、どちらもユーザーが実際に`os.tc`サブドメインに登録されているため、ユーザーが再登録する必要があります。
1. 新しいOneSignalアプリを作成し、OneSignal initコードに新しいアプリIDを設定します。これの利点は、古い/元のOneSignalアプリからプッシュを送信し続けることができることです。サイトが更新されたこと、更新を受け取り続けるために戻ってきて再登録する必要があることをユーザーに知らせるために、できるだけ多くの通知を送信してください。再登録のための割引やインセンティブを提供することは大いに役立ちます。「起動URL」をランディングページに設定し、ベルプロンプト、カスタムリンクプロンプト、カテゴリスライドプロンプトなど、簡単に再登録できるボタンを提供します。詳細については、[権限プロンプト](./permission-requests)を参照してください。
2. 同じアプリIDを保持したい場合は、[アプリを更新](/reference/update-an-app) APIを使用して、`chrome_web_origin`と`safari_site_origin`をHTTPSサイトのオリジンに更新する必要があります。これらのユーザーは`os.tc`サブドメインに登録されているため、ブラウザでサイトのプッシュ権限が許可されていません。ブラウザはサイトに登録されていることを「知らない」ため、再度プロンプトが表示されます。再度登録すると、同じブラウザでサイトへの2つのWebプッシュサブスクリプションが作成され、重複した通知を受け取ることになります。このため、重複した通知を受け取らないように、[現在のすべてのWebプッシュサブスクライバーを削除する](./delete-users)ことをお勧めします。削除する前に、サイトが更新されたこと、更新を受け取り続けるために再登録する必要があることをユーザーに知らせるために、いくつかの通知を送信してください。再登録のための割引やインセンティブを提供することは非常に効果的です。「起動URL」をランディングページに設定し、ベルプロンプト、カスタムリンクプロンプト、カテゴリスライドプロンプトなど、簡単に再登録できるボタンを提供します。詳細については、[権限プロンプト](./permission-requests)を参照してください。
### サービスワーカーのインストールエラー
[ネイティブ権限プロンプト](./permission-requests)が表示されて「許可」をクリックすると、次のサービスワーカーのインストールエラーが発生する場合があります：
Y: サービスワーカーの登録に失敗しました。
\[サービスワーカーのインストール] サービスワーカーのインストールに失敗しました TypeError: スコープ('`https://your-site.com/`')のServiceWorkerをスクリプト('`https://your-site.com/...`')で登録できませんでした：スクリプトの取得時に不正なHTTP応答コード(404)を受信しました。
\[サービスワーカーのインストール] サービスワーカーのインストールに失敗しました TypeError: スコープ('`https://www.yoursite.com/`')のServiceWorkerをスクリプト('`https://www.yoursite.com/...`')で登録できませんでした：スクリプトの取得時に不正なHTTP応答コード(403)を受信しました。
スクリプトにサポートされていないMIMEタイプ('現在のMIMEタイプ')があります。
\[サービスワーカーのインストール] サービスワーカーのインストールに失敗しました SecurityError: スコープ('[https://your-site.com/')のServiceWorkerをスクリプト('https://your-site.com/...')で登録できませんでした：スクリプトにサポートされていないMIMEタイプ('現在のMIMEタイプ')があります。](https://your-site.com/'\)のServiceWorkerをスクリプト\('https://your-site.com/...'\)で登録できませんでした：スクリプトにサポートされていないMIMEタイプ\('現在のMIMEタイプ'\)があります。)
\[サービスワーカーのインストール] サービスワーカーのインストールに失敗しました SecurityError: スコープ('[https://your-site.com/')のServiceWorkerをスクリプト('https://your-site.com/...')で登録できませんでした：スクリプトリソースがリダイレクトの背後にあり、これは許可されていません。](https://your-site.com/'\)のServiceWorkerをスクリプト\('https://your-site.com/...'\)で登録できませんでした：スクリプトリソースがリダイレクトの背後にあり、これは許可されていません。)
**これが意味すること：** サービスワーカーファイルが正しく構成されていません。
**修正方法：**
SDKは、[サービスワーカーセットアップガイド](./onesignal-service-worker)で説明されているようにカスタムファイル名または場所を指定しない限り、サイトのルートディレクトリで`OneSignalSDKWorker.js`サービスワーカーファイルを検索します。
SDKがサービスワーカーファイルを見つけられるように、正しいファイル名、場所、スコープを構成していることを確認してください。
構成に基づいて、ブラウザでファイルを直接開きます。
* カスタムの場所を構成していない場合は、サイトのルートにあるサービスワーカーファイルのJavaScriptコードが表示されるはずです：`https://yoursite.com/OneSignalSDKWorker.js`
* WordPressを使用している場合は、ここに表示されるはずです：`https://yoursite.com/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js`
* カスタムの場所を使用している場合は、ここに表示されるはずです：`https://yoursite.com/your-custom-location/OneSignalSDKWorker.js`
ファイル名は大文字と小文字が区別されます。`OneSignalSDKWorker.js`または構成したファイル名を使用していることを確認してください。
一部のサーバーは、ファイル名を自動的に小文字に変換します。ファイルが見つからない場合は、これを考慮してください。
* 次のJavaScriptコードが表示されるはずです：
```javascript JavaScript theme={null}
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
```
* このファイルは`content-type`が`application/javascript`で提供される必要があります。
* このファイルへのリダイレクトは許可されません。ファイルはサイトと同じドメインでホストされている必要があります（CDNやプロキシドメインは不可）
より詳細なセットアップ手順については、[サービスワーカーセットアップガイド](./onesignal-service-worker)を確認してください。
### 通知が表示されない
このセクションでは次のことを前提としています：
1. デバイスで通知が表示されない一般的な理由について、[通知が表示されない：Web Push](./notifications-not-shown-web-push)ガイドを確認しました。
2. [ネイティブ権限プロンプト](./permission-requests)が表示され、「許可」をクリックしました。ネイティブ権限プロンプトを介して登録しなかった場合は、上記の[プロンプトの表示に関する問題](#プロンプトの表示に関する問題)を参照してください。
上記が当てはまる場合は、次の手順に従って購読IDを確認し、プッシュ通知を送信してください：
ブラウザの開発者ツールコンソールで次のコードを実行します：
```javascript JavaScript theme={null}
function getUserInfo() {
console.log('getUserInfo()');
Promise.all([
OneSignal.Notifications.isPushSupported(),
OneSignal.Notifications.permission,
OneSignal.User.PushSubscription.optedIn,
OneSignal.User.PushSubscription.id
]).then(([
isPushSupported,
isSubscribed,
isOptedIn,
subscriptionId
]) => {
console.log('The current URL of this page: ', location.href);
console.log('Push is supported on this browser: ', isPushSupported);
console.log('You are subscribed to notifications in the browser: ', isSubscribed);
console.log('You are opted-in with OneSignal: ' , isOptedIn);
console.log('Your OneSignal Subscription ID: ', subscriptionId);
}).catch(e => {
console.error('Error getting user info:', e);
});
}
getUserInfo();
```
これにより次の情報がわかります：
* 混乱がある場合、現在のページのURL。
* 現在使用しているブラウザがプッシュ通知をサポートしているかどうか。
* `true`は、ブラウザがプッシュ通知をサポートしていることを意味します。
* `false`は、ブラウザがプッシュ通知をサポートしていないことを意味します。
* ブラウザで通知を購読しているかどうか。
* `true`は、このURLのプッシュ権限を許可したことを意味します。
* `false`は、このURLのプッシュ権限を許可しなかったか、拒否したことを意味します。
* OneSignalでオプトインしているかどうか。
* `true`は、購読がOneSignalのプッシュ通知に登録されていることを意味します。
* `false`は、購読がOneSignalのプッシュ通知に登録されていないことを意味します。サイトで[`optOut()`メソッド](./web-sdk-reference)が呼び出されているかどうかを確認してください。
* OneSignal購読ID。
* 次の手順のためにこれを保存してください。これは、プッシュ通知を送信するために使用するIDです。
さらなる支援が必要な場合は、このコンソールデータをテキストファイルに保存して、サポートチームと共有してください。
通知を購読し、OneSignalでオプトインし、購読IDを持っている場合は、通知を送信できます。
[テスト購読の検索と設定](./test-users)の手順に従って、自分自身をテスターとして設定し、通知を送信してください。
Chromeで通知を受信できない場合は、これらのChrome固有の診断ツールを使用して問題を特定してください。
1. 新しいタブで`chrome://gcm-internals`を開きます。
2. 左上の「Start Recording」ボタンをクリックします。「Connection State: CONNECTED」が表示されていることを確認してください。
3. これを開いたままにして、Chrome Webプッシュ購読に別のプッシュ通知を送信してください。
4. 受信した場合、「Receive Message Log」に何かが表示されるはずです。
* 「Data msg received」が表示されない場合、Chromeブラウザが通知をまったく受信していません。サポートにこのことをお知らせください。
* 「Data msg received」が表示されているのに通知を受信していない場合は、次の手順に進んでください。
5. 新しいタブで`chrome://serviceworker-internals`を開きます。
6. `Scope: https://your-site.com`を検索します（`your-site.com`を実際のサイトドメインに置き換えてください）。
7. **Inspect**または**Start -> Inspect**をクリックします。Chrome開発者ツールのポップアップが表示されます。
8. サービスワーカーのChrome開発者ツールポップアップで、**Console**タブをクリックし、`OneSignalWorker.log.trace();`を実行します。`undefined`が返されるはずです。サービスワーカーからのすべてのメッセージがこのポップアップに表示されるようになります。
サポートが必要ですか？
サポートチームとチャットするか、`support@onesignal.com`にメールしてください
以下を含めてください：
* 発生している問題の詳細と再現手順（利用可能な場合）
* OneSignal App ID
* 該当する場合は、External IDまたはSubscription ID
* 該当する場合は、OneSignalダッシュボードでテストしたメッセージのURL
* 関連する[ログまたはエラーメッセージ](/docs/ja/capturing-a-debug-log)
お気軽にお問い合わせください！
***