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セットアップのトラブルシューティングを行います。

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

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

Desktop
Android
iOS

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

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

Web SDKログを有効にする

開発者ツールのコンソールでコマンドを実行できるようになりました。次のコードを実行します：

JavaScript

  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 `http://127.0.0.1:5501`が現在アクセスしているサイトのオリジンではないことを示しています。

これが意味すること： 現在アクセスしているドメインが、OneSignalダッシュボードで構成されたサイトURLと一致していません。 修正方法： ブラウザでサイトURLをコピーし、OneSignalダッシュボードの設定 > Push & In-app > Web > サイト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.

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

新しいOneSignalアプリを作成し、OneSignal initコードに新しいアプリIDを設定します。これの利点は、古い/元のOneSignalアプリからプッシュを送信し続けることができることです。サイトが更新されたこと、更新を受け取り続けるために戻ってきて再登録する必要があることをユーザーに知らせるために、できるだけ多くの通知を送信してください。再登録のための割引やインセンティブを提供することは大いに役立ちます。「起動URL」をランディングページに設定し、ベルプロンプト、カスタムリンクプロンプト、カテゴリスライドプロンプトなど、簡単に再登録できるボタンを提供します。詳細については、権限プロンプトを参照してください。
同じアプリIDを保持したい場合は、アプリを更新 APIを使用して、chrome_web_originとsafari_site_originをHTTPSサイトのオリジンに更新する必要があります。これらのユーザーはos.tcサブドメインに登録されているため、ブラウザでサイトのプッシュ権限が許可されていません。ブラウザはサイトに登録されていることを「知らない」ため、再度プロンプトが表示されます。再度登録すると、同じブラウザでサイトへの2つのWebプッシュサブスクリプションが作成され、重複した通知を受け取ることになります。このため、重複した通知を受け取らないように、現在のすべてのWebプッシュサブスクライバーを削除することをお勧めします。削除する前に、サイトが更新されたこと、更新を受け取り続けるために再登録する必要があることをユーザーに知らせるために、いくつかの通知を送信してください。再登録のための割引やインセンティブを提供することは非常に効果的です。「起動URL」をランディングページに設定し、ベルプロンプト、カスタムリンクプロンプト、カテゴリスライドプロンプトなど、簡単に再登録できるボタンを提供します。詳細については、権限プロンプトを参照してください。

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

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

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タイプ’)があります。

[サービスワーカーのインストール] サービスワーカーのインストールに失敗しました SecurityError: スコープ(‘https://your-site.com/‘)のServiceWorkerをスクリプト(‘https://your-site.com/…’)で登録できませんでした：スクリプトリソースがリダイレクトの背後にあり、これは許可されていません。

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

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

SDKは、サービスワーカーセットアップガイドで説明されているようにカスタムファイル名または場所を指定しない限り、サイトのルートディレクトリで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

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

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

より詳細なセットアップ手順については、サービスワーカーセットアップガイドを確認してください。

通知が表示されない

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

デバイスで通知が表示されない一般的な理由について、通知が表示されない：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でオプトインし、購読IDを持っている場合は、通知を送信できます。テスト購読の検索と設定の手順に従って、自分自身をテスターとして設定し、通知を送信してください。

Chromeでテストする

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

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

「Data msg received」が表示されない場合、Chromeブラウザが通知をまったく受信していません。サポートにこのことをお知らせください。
「Data msg received」が表示されているのに通知を受信していない場合は、次の手順に進んでください。

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

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

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

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

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

開発者ドキュメント

モバイルSDK

ウェブSDK

ライブアクティビティ

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

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

概要

ブラウザの互換性

デバイスの通知設定

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

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

構成エラー

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

通知が表示されない

​概要

​ブラウザの互換性

​デバイスの通知設定

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

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

​構成エラー

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

​通知が表示されない

概要

ブラウザの互換性

デバイスの通知設定

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

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

構成エラー

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

通知が表示されない