Web SDKのトラブルシューティング

概要

このガイドでは、OneSignal Web SDKセットアップのトラブルシューティング手順を説明します。続行する前に、Web SDKセットアップを確認して、すべての手順を完了していることを確認してください。 Webプッシュが動作していないように見える最も一般的な理由は、ブラウザとデバイスの通知設定に関連しています：

ブラウザの互換性

ユーザーはウェブ許可プロンプトを見ることができますが、シークレット、プライベート、またはゲストブラウザモードではプッシュ通知を購読できません。

オペレーティングシステム別のブラウザ互換性

Browser	Windows	macOS	Android	iOS
Chrome	✅	✅	✅	✅ ¹
Firefox	✅	✅	✅	✅ ¹
Safari 10+	❌	✅	❌	✅ ¹
Microsoft Edge	✅	✅	✅	✅ ¹
Opera ²	✅	✅	✅	✅ ¹
Samsung Internet ²	❌	❌	✅	✅ ¹
Yandex ²	✅	✅	✅	✅ ¹
UC Browser ²	✅	❌	✅	✅ ¹
Internet Explorer	❌	❌	❌	❌
DuckDuckGo	❌	❌	❌	❌

¹ iOS ではウェブアプリのインストールが必要です(iOS ウェブプッシュ設定を参照)² Chromium ベースのブラウザは OneSignal アナリティクスでは “Chrome” として表示されます

デバイスの通知設定

デバイスの通知設定は、Web プッシュ通知がデバイスに表示されない最も一般的な原因です。他の原因を調べる前に、集中モード（おやすみモード、低バッテリーなど）を含む以下の設定を確認してください。

以下のタブから正しいオペレーティングシステムを選択してください。Windows、macOS、Android、iOS が表示されるはずです。

Windows
macOS
Android
iOS

Windows 10 通知設定

スタート > 設定 > 通知とアクション > アプリや他の送信者からの通知を取得するを選択します
サイトとブラウザも有効になっていることを確認してください。

Windows 11 通知設定:

スタート > 設定 > システム > 通知を選択します

通知をオンにします
応答不可をオフにします（テスト中は、これを無効にするとプッシュが表示されます）
アプリや他の送信者からの通知まで下にスクロールします

Windows 11 Settings showing the Notifications from apps and other senders list — Windows 11 アプリや他の送信者からの通知

ブラウザがオンになっていることを確認してください。

プロンプトの表示に関する問題

以下は、ウェブプッシュ通知プロンプトが期待どおりに表示されない一般的な理由です。

プロンプトが設定されていることを確認する

ウェブ許可プロンプトの設定を確認して、プロンプトを設定し、ブラウザごとの動作の違いを理解していることを確認してください。たとえば、Safari などの一部のブラウザでは、ネイティブプロンプトが表示される前にユーザーのジェスチャー(ボタンのクリック)が必要です。各ブラウザの詳細については、ウェブ許可プロンプト > ネイティブ許可プロンプトセクションを参照してください。

ブラウザの互換性、シークレットモード、プライベートブラウザ、またはゲストブラウザモードを確認する。

ブラウザはこれらのモードでユーザーが通知を購読することを許可しません。そのため、スライドプロンプトは表示されても、ネイティブの許可プロンプトは表示されません。ウェブプッシュをサポートするブラウザとデバイスを使用していることを確認してください。

ブラウザの通知設定を確認する

ブラウザの設定に移動し、「通知」の許可設定を確認します。Chrome の例: chrome://settings/content/notifications

この例では:

ユーザーが「サイトによる通知の送信を許可しない」を選択しているため、ネイティブの許可プロンプトが表示されません。ネイティブの許可プロンプトを表示するには、「サイトが通知の送信を要求できる」と表示される必要があります。
ユーザーが https://yoursite.com を「通知の送信を許可しない」リストに追加しているため、ネイティブの許可プロンプトが表示されません。ネイティブの許可プロンプトを表示するには、このリストから削除する必要があります。

ブラウザ固有のドキュメント:

Chrome - このページでは、設定 > プライバシーとセキュリティ > サイトの設定 > 通知に移動して Chrome で通知を管理する方法を説明しており、デフォルトの動作を制御し、個々のウェブサイトの権限を管理できます。
Firefox - このガイドでは、Firefox のウェブプッシュ通知について説明しており、設定 > プライバシーとセキュリティ > 通知を通じて通知権限を管理する方法と、アドレスバーのサイト情報アイコンを通じて特定のサイトの権限を制御する方法を説明しています。
Safari - この Apple ガイドでは、Safari > 環境設定 > Web サイト > 通知を通じて Mac で Safari 通知をカスタマイズする方法を説明しており、どのサイトが通知を送信できるかを管理し、システム環境設定を通じて通知の動作を制御できます。
Edge - この記事では、設定 > プライバシー、検索、サービス > サイトのアクセス許可 > 通知に移動するか、アドレスバーのサイト情報アイコンをクリックして Edge 通知を管理する方法を詳しく説明しています。

iOS/iPadOS の要件が満たされていない。

iOS の場合、ユーザーに購読を促すための追加の要件がいくつかあります。詳細については、iOS/iPadOS 向けモバイルウェブプッシュガイドを参照してください。

トラブルシューティング手順

上記を確認した後、次の手順に従ってOneSignal Web SDKセットアップのトラブルシューティングを行います。

ブラウザの開発者ツールコンソールを開く

ブラウザの開発者ツールを使用すると、OneSignal Web SDKと対話し、ロギングを有効にしてエラーを確認できます。

Desktop
Android
iOS

Chrome: ページを右クリックし、検証をクリックして、開いたポップアップウィンドウのコンソールタブをクリックします。
Firefox: ページを右クリックし、要素を調査をクリックして、開いたポップアップウィンドウのコンソールタブをクリックします。
Safari: Safari → 環境設定 → 詳細に移動し、メニューバーに”開発”メニューを表示がチェックされていることを確認します。次に、Webページで右クリックし、要素の詳細を表示をクリックして、開いたポップアップウィンドウのコンソールタブをクリックします。

Browser developer tools console open on a webpage — デスクトップ開発者ツールコンソール

AndroidのChrome: USBデバッグを有効にする、デバイスをコンピュータに接続し、デスクトップChromeブラウザでchrome://inspect#devicesを使用して開発者ツールにアクセスします。
AndroidのFirefox: USBデバッグを有効にする、デバイスをコンピュータに接続し、デスクトップFirefoxブラウザでabout:debuggingを使用して開発者ツールにアクセスします。

Web SDKログを有効にする

開発者ツールのコンソールで次のコマンドを実行します：

OneSignal.Debug.setLogLevel('trace');

結果としてundefinedが表示されるはずです。
タブを閉じて、同じページに新しいタブを開きます。更新だけではすべてのSDK初期化イベントがトリガーされません。
コンソールにOneSignal SDKログが表示され始めます。

Browser console showing OneSignal SDK trace-level log output — 詳細なSDKログを含むコンソール

構成エラー

OneSignalが初期化された後、次のエラーが発生する場合があります：

エラー: SDK already initialized

Console error showing SDK already initialized message — 重複するSDK初期化エラー

これが意味すること： OneSignal Web SDKのinitコードが複数回呼び出されています。これは、WordPressプラグインまたはShopify統合のセットアップと手動コードを組み合わせたり、誤ってOneSignalのinitコードを複数回追加したりすることが原因であることが多いです。 修正方法： 重複するinit呼び出しを削除してください。WordPressプラグインまたはShopify統合を使用している場合は、ファイルから手動のOneSignalコードを削除してください。

エラー: Can only be used on: (OneSignalダッシュボードに設定されたURL)

Console error showing site origin mismatch between dashboard URL and current page — 例は、OneSignalダッシュボードに設定されたURL `http://127.0.0.1:5501`が現在アクセスしているサイトのオリジンではないことを示しています。

これが意味すること： 現在アクセスしているドメインが、OneSignalダッシュボードで構成されたサイトURLと一致していません。 修正方法： ブラウザでサイトURLをコピーし、OneSignalダッシュボードのSettings > Push & In-app > Web > Site URL構成に貼り付けます。次の形式を使用してサイトのオリジンであることを確認してください：

プロトコル： https://である必要があります（ローカルテストの場合は、Localhost構成を参照してください）
ドメイン： 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.

Console error showing HTTP site not supported in SDK v16 — HTTPサイトがサポートされていないエラーの例

これが意味すること： OneSignalダッシュボードがHTTPサイトを使用するように構成されており、HTTPSを使用するように更新した可能性があります。 HTTPを使用しているとき、または「My site is not fully HTTPS」オプションを使用しているときにサブスクライブしたユーザーは、実際には、実際のサイトのオリジンではなく、https://your-label.os.tc形式のサブドメインにサブスクライブしています。Webプッシュは、HTTPサイトまたはサービスワーカーをホストできないWebサイトではサポートされていません。 修正方法： どちらのオプションでも、ユーザーはサイトではなくos.tcサブドメインにサブスクライブしているため、再サブスクライブが必要になります。

新しいOneSignalアプリを作成し、initコードに新しいアプリIDを設定します。これにより、古いアプリからプッシュを送信し続けてユーザーに通知できます。サイトが更新されたこと、再サブスクライブする必要があることをユーザーに知らせる通知を送信してください。割引やインセンティブを提供すると効果的です。「起動URL」を、再サブスクリプションプロンプト（ベル、カスタムリンク、またはカテゴリスライド）のあるランディングページに設定します。詳細については、権限プロンプトを参照してください。
アプリを更新 APIを使用してchrome_web_originとsafari_site_originをHTTPSオリジンに更新することで、同じアプリIDを保持します。ユーザーはos.tcサブドメインにサブスクライブしているため、ブラウザには実際のドメインのプッシュ権限がありません。再度プロンプトが表示され、再サブスクライブすると、同じブラウザに2つのWebプッシュサブスクリプションが作成され、重複した通知が発生します。重複を防ぐために、更新する前に現在のすべてのWebプッシュサブスクライバーを削除してください。削除する前に、再サブスクライブする必要があることをユーザーに知らせる通知をいくつか送信してください。プロンプトのオプションについては、権限プロンプトを参照してください。

サービスワーカーのインストールエラー

ネイティブ権限プロンプトが表示されて「許可」をクリックすると、次のサービスワーカーのインストールエラーが発生する場合があります：

Y: Registration of a Service Worker failed.

[Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker for scope (‘https://your-site.com/’) with script (‘https://your-site.com/...’): A bad HTTP response code (404) was received when fetching the script.

[Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker for scope (‘https://www.yoursite.com/’) with script (‘https://www.yoursite.com/...’): A bad HTTP response code (403) was received when fetching the script.

Console error showing service worker registration failure with 404 or 403 response — サービスワーカーのインストールエラーの例

The script has an unsupported MIME type (‘current MIME type’). [Service Worker Installation] Installing service worker failed SecurityError: Failed to register a ServiceWorker for scope (‘https://your-site.com/’) with script (‘https://your-site.com/…’): The script has an unsupported MIME type (‘current MIME type’).

Console error showing unsupported MIME type for service worker script — サービスワーカーのMIMEタイプエラー

[Service Worker Installation] Installing service worker failed SecurityError: Failed to register a ServiceWorker for scope (‘https://your-site.com/’) with script (‘https://your-site.com/…’): The script resource is behind a redirect, which is disallowed.

Console error showing service worker script blocked by a redirect — コンソールのリダイレクトエラー

これが意味すること： サービスワーカーファイルが正しく構成されていません。 修正方法：

サービスワーカーのパスを見つける

通常のサイトとカスタムコード：SDKは、カスタムパスを設定しない限り、サイトのルートでOneSignalSDKWorker.jsを検索します。OneSignalサービスワーカーを参照してください。WordPress：ワーカーをサイトルートにアップロードしたり、カスタムパスを設定したりしないでください。プラグインはsdk_filesでファイルをホストします。次の手順でそのURLを開いてください。WordPressセットアップを参照してください。

ブラウザでサービスワーカーファイルに直接アクセスする

ブラウザでファイルのURLを開きます。

通常のサイトのデフォルト（ルート）：https://yoursite.com/OneSignalSDKWorker.js
WordPressプラグイン（v3）：https://yoursite.com/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js（WordPress.orgのフォルダ名。zipインストールでは異なる場合があります）
カスタムパス（通常のサイトのダッシュボードまたはカスタムコードのinitのみ）：https://yoursite.com/your-custom-location/OneSignalSDKWorker.js

ファイル名は大文字と小文字が区別されます。OneSignalSDKWorker.jsまたは構成したファイル名を使用していることを確認してください。一部のサーバーは、ファイル名を自動的に小文字に変換します。ファイルが見つからない場合は、これを考慮してください。

ファイルが読み込まれることを確認する

次のJavaScriptコードが表示されるはずです：

JavaScript

importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

このファイルはcontent-typeがapplication/javascriptで提供される必要があります。
このファイルへのリダイレクトは許可されません。ファイルはサイトと同じドメインでホストされている必要があります（CDNやプロキシドメインは不可）。

通常のサイトとカスタムコード：アップロードとパスの設定については、OneSignalサービスワーカーを参照してください。WordPressプラグインのユーザーはそのガイドに従わないでください。WordPressセットアップを参照してください。

通知が表示されない

このセクションでは次のことを前提としています：

デバイスで通知が表示されない一般的な理由について、通知が表示されない：Web Pushガイドを確認しました。
ネイティブ権限プロンプトが表示され、「許可」をクリックしました。ネイティブ権限プロンプトを介してサブスクライブしなかった場合は、上記のプロンプトの表示に関する問題を参照してください。

上記が当てはまる場合は、次の手順に従って購読IDを確認し、自分にプッシュ通知を送信してください：

購読IDを取得する

ブラウザの開発者ツールコンソールで次のコードを実行します：

JavaScript

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()メソッドが呼び出されているかどうかを確認してください。
OneSignal購読ID。
- 次の手順のためにこれを保存してください。これは、自分にプッシュ通知を送信するために使用するIDです。
コンソールでのユーザー情報出力の例

さらなる支援が必要な場合は、このコンソールデータをテキストファイルに保存して、OneSignalサポートと共有してください。

自分に通知を送信する

通知を購読し、OneSignalでオプトインし、購読IDを持っている場合は、自分に通知を送信できます。テストユーザーの手順に従って、自分自身をテスターとして設定し、自分に通知を送信してください。

Chromeでテストする

Chromeで通知を受信できない場合は、これらのChrome固有の診断ツールを使用して問題を特定してください。

新しいタブでchrome://gcm-internalsを開きます。
左上の「Start Recording」ボタンをクリックします。「Connection State: CONNECTED」が表示されていることを確認してください。
これを開いたままにして、Chrome Webプッシュ購読に別のプッシュ通知を送信してください。
受信した場合、「Receive Message Log」に何かが表示されるはずです。

Chrome GCM internals page showing Receive Message Log with a received data message — GCM内部ロギング

「Data msg received」が表示されない場合、Chromeブラウザが通知をまったく受信していません。GCM内部ログを添えてOneSignalサポートにお問い合わせください。
「Data msg received」が表示されているのに通知を受信していない場合は、次の手順に進んでください。

新しいタブでchrome://serviceworker-internalsを開きます。
Scope: https://your-site.comを検索します（your-site.comを実際のサイトドメインに置き換えてください）。
InspectまたはStart -> Inspectをクリックします。Chrome開発者ツールのポップアップが表示されます。

Chrome service worker internals page showing the Inspect button for a registered service worker — サービスワーカーの検査

サービスワーカーのChrome開発者ツールポップアップで、Consoleタブをクリックし、OneSignalWorker.log.trace();を実行します。undefinedが返されるはずです。サービスワーカーからのすべてのメッセージがこのポップアップに表示されるようになります。

サポートが必要ですか？サポートチームとチャットするか、support@onesignal.comにメールしてください以下を含めてください：

発生している問題の詳細と再現手順（利用可能な場合）
OneSignal App ID
該当する場合は、External IDまたはSubscription ID
該当する場合は、OneSignalダッシュボードでテストしたメッセージのURL
関連するログまたはエラーメッセージ

お気軽にお問い合わせください！

よくある質問

なぜ「SDK already initialized」と表示されるのですか？

OneSignal Web SDKのinitコードがページ上で複数回呼び出されています。これは、WordPressプラグインと手動コードを組み合わせた場合や、initタグが複数のページテンプレートに含まれている場合によく発生します。重複するinit呼び出しを削除して解決してください。

HTTPサイトでWebプッシュを使用できますか？

いいえ。Webプッシュは、プッシュ配信を処理するサービスワーカーがセキュアなオリジンでのみ動作するため、HTTPSが必要です。以前に「My site is not fully HTTPS」オプションを使用していた場合は、HTTPSに移行する必要があります。移行手順については、構成エラーを参照してください。

localhostでWebプッシュをテストするにはどうすればよいですか？

開発中はlocalhostでテストできます。セットアップ手順については、Localhost構成を参照してください。localhostでのテストはChromiumベースのブラウザでのみ動作することに注意してください。

Web SDKセットアップ

OneSignal Web SDKの初期インストールと構成を完了します。

サービスワーカーセットアップ

サイト用のOneSignalサービスワーカーファイルを構成します。

権限プロンプト

訪問者にWebプッシュ権限をいつどのように求めるかを構成します。

通知が表示されない

Webプッシュ通知がデバイスに表示されない一般的な理由。

開発者ドキュメント

モバイルSDK

ウェブSDK

ライブアクティビティ

デスクトップ & ウォッチセットアップ

Web SDKのトラブルシューティング

概要

ブラウザの互換性

デバイスの通知設定

プロンプトの表示に関する問題

トラブルシューティング手順

構成エラー

サービスワーカーのインストールエラー

通知が表示されない

よくある質問

なぜ「SDK already initialized」と表示されるのですか？

HTTPサイトでWebプッシュを使用できますか？

localhostでWebプッシュをテストするにはどうすればよいですか？

関連ページ

Web SDKセットアップ

サービスワーカーセットアップ

権限プロンプト

通知が表示されない

​概要

​ブラウザの互換性

​デバイスの通知設定

​プロンプトの表示に関する問題

​トラブルシューティング手順

​構成エラー

​サービスワーカーのインストールエラー

​通知が表示されない

​よくある質問

​なぜ「SDK already initialized」と表示されるのですか？

​HTTPサイトでWebプッシュを使用できますか？

​localhostでWebプッシュをテストするにはどうすればよいですか？

​関連ページ

Web SDKセットアップ

サービスワーカーセットアップ

権限プロンプト

通知が表示されない

概要

ブラウザの互換性

デバイスの通知設定

プロンプトの表示に関する問題

トラブルシューティング手順

構成エラー

サービスワーカーのインストールエラー

通知が表示されない

よくある質問

なぜ「SDK already initialized」と表示されるのですか？

HTTPサイトでWebプッシュを使用できますか？

localhostでWebプッシュをテストするにはどうすればよいですか？

関連ページ