メインコンテンツへスキップ

​
概要

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

​
ブラウザの互換性

ユーザーはウェブ許可プロンプトを見ることができますが、シークレット、プライベート、またはゲストブラウザモードではプッシュ通知を購読できません。
BrowserWindowsmacOSAndroidiOS
Chrome✅✅✅✅ ¹
Firefox✅✅✅✅ ¹
Safari 10+❌✅❌✅ ¹
Microsoft Edge✅✅✅✅ ¹
Opera ²✅✅✅✅ ¹
Samsung Internet ²❌❌✅✅ ¹
Yandex ²✅✅✅✅ ¹
UC Browser ²✅❌✅✅ ¹
Internet Explorer❌❌❌❌
DuckDuckGo❌❌❌❌
¹ iOS ではウェブアプリのインストールが必要です(iOS ウェブプッシュ設定を参照)² Chromium ベースのブラウザは OneSignal アナリティクスでは “Chrome” として表示されます

​
デバイスの通知設定

デバイスの通知設定と集中モード(おやすみモード、低バッテリーなど)が通知の表示をブロックしている可能性があります。また、ブラウザなどの特定のアプリの通知がオフになっている場合もあります。デバイスが通知を受信するように設定されていることを確認するには、以下を確認してください。
  • Windows
  • macOS
  • Android
  • iOS
  1. スタート > 設定 > 通知とアクション > アプリや他の送信者からの通知を取得するを選択します
  2. サイトとブラウザも有効になっていることを確認してください。

Windows 10 通知設定

Windows 11 通知設定:
  1. スタート > 設定 > システム > 通知を選択します

Windows 11 通知設定

  1. 通知をオンにします
  2. 応答不可をオフにします(テスト中は、これを無効にするとプッシュが表示されます)
  3. アプリや他の送信者からの通知まで下にスクロールします
  1. ブラウザがオンになっていることを確認してください。

Windows 11 通知設定ブラウザリスト

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

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

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

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

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

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

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

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

Chrome 通知設定

この例では:
  • ユーザーが「サイトによる通知の送信を許可しない」を選択しているため、ネイティブの許可プロンプトが表示されません。ネイティブの許可プロンプトを表示するには、「サイトが通知の送信を要求できる」と表示される必要があります。
  • ユーザーが https://yoursite.com を「通知の送信を許可しない」リストに追加しているため、ネイティブの許可プロンプトが表示されません。ネイティブの許可プロンプトを表示するには、このリストから削除する必要があります。
ブラウザ固有のドキュメント:
  • Chrome - このページでは、設定 > プライバシーとセキュリティ > サイトの設定 > 通知に移動して Chrome で通知を管理する方法を説明しており、デフォルトの動作を制御し、個々のウェブサイトの権限を管理できます。
  • Firefox - このガイドでは、Firefox のウェブプッシュ通知について説明しており、設定 > プライバシーとセキュリティ > 通知を通じて通知権限を管理する方法と、アドレスバーのサイト情報アイコンを通じて特定のサイトの権限を制御する方法を説明しています。
  • Safari - この Apple ガイドでは、Safari > 環境設定 > Web サイト > 通知を通じて Mac で Safari 通知をカスタマイズする方法を説明しており、どのサイトが通知を送信できるかを管理し、システム環境設定を通じて通知の動作を制御できます。
  • Edge - この記事では、設定 > プライバシー、検索、サービス > サイトのアクセス許可 > 通知に移動するか、アドレスバーのサイト情報アイコンをクリックして Edge 通知を管理する方法を詳しく説明しています。
4

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

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

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

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

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

ブラウザの開発者ツールを使用して、Webページ上でWeb SDKと対話し、ロギングを有効にしてエラーを確認できます。
  • Desktop
  • Android
  • iOS
  • Chrome: ページを右クリックし、検証をクリックして、開いたポップアップウィンドウのコンソールタブをクリックします。
  • Firefox: ページを右クリックし、要素を調査をクリックして、開いたポップアップウィンドウのコンソールタブをクリックします。
  • Safari: Safari → 環境設定 → 詳細に移動し、メニューバーに”開発”メニューを表示がチェックされていることを確認します。次に、Webページで右クリックし、要素の詳細を表示をクリックして、開いたポップアップウィンドウのコンソールタブをクリックします。

デスクトップ開発者ツールコンソール

2

ページでOneSignalがロードされ、初期化されていることを確認する

コンソールで次を実行します：
JavaScript
  OneSignal.initialized
結果の意味：
  • true ✅ - OneSignalが初期化され、準備ができています。次の手順に進みます。
  • false ⚠️ - OneSignalはロードされましたが、まだ初期化が完了していません。しばらく待ってから再試行してください。
  • Uncaught ReferenceError: OneSignal is not defined ❌ OneSignal JavaScriptスニペットがサイトの<head>セクションにあることを確認し、OneSignalメソッドを使用する前にスクリプトがロードされることを確認してください。Web SDKセットアップガイドを確認してください。
  • OneSignal is already defined SDKが同じページで複数回初期化されています。初期化メソッドの1つを削除してください。WordPressプラグインを使用している場合は、テーマファイルから手動のOneSignalコードを削除してください。
3

Web SDKログを有効にする

開発者ツールのコンソールでコマンドを実行できるようになりました。次のコードを実行します：
JavaScript
  OneSignal.Debug.setLogLevel('trace');
  • 結果としてundefinedが表示されるはずです。
  • タブを閉じて、同じページに新しいタブを開きます。更新だけではすべてのSDK初期化イベントがトリガーされません。
  • コンソールにOneSignal SDKログが表示され始めます。

詳細なSDKログを含むコンソール

​
構成エラー

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

重複するSDK初期化エラー

これが意味すること： 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つのコンポーネントすべてが一致する必要があります。

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

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

サービスワーカーのMIMEタイプエラー

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

コンソールのリダイレクトエラー

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

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

SDKは、サービスワーカーセットアップガイドで説明されているようにカスタムファイル名または場所を指定しない限り、サイトのルートディレクトリでOneSignalSDKWorker.jsサービスワーカーファイルを検索します。SDKがサービスワーカーファイルを見つけられるように、正しいファイル名、場所、スコープを構成していることを確認してください。
2

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

構成に基づいて、ブラウザでファイルを直接開きます。
  • カスタムの場所を構成していない場合は、サイトのルートにあるサービスワーカーファイルの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または構成したファイル名を使用していることを確認してください。一部のサーバーは、ファイル名を自動的に小文字に変換します。ファイルが見つからない場合は、これを考慮してください。
3

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

  • 次のJavaScriptコードが表示されるはずです：
    JavaScript
    importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
  • このファイルはcontent-typeがapplication/javascriptで提供される必要があります。
  • このファイルへのリダイレクトは許可されません。ファイルはサイトと同じドメインでホストされている必要があります（CDNやプロキシドメインは不可）
より詳細なセットアップ手順については、サービスワーカーセットアップガイドを確認してください。

​
通知が表示されない

このセクションでは次のことを前提としています：
  1. デバイスで通知が表示されない一般的な理由について、通知が表示されない：Web Pushガイドを確認しました。
  2. ネイティブ権限プロンプトが表示され、「許可」をクリックしました。ネイティブ権限プロンプトを介して登録しなかった場合は、上記のプロンプトの表示に関する問題を参照してください。
上記が当てはまる場合は、次の手順に従って購読IDを確認し、プッシュ通知を送信してください：
1

購読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です。

    ユーザー情報の例

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

通知を送信する

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

Chromeでテストする

Chromeで通知を受信できない場合は、これらのChrome固有の診断ツールを使用して問題を特定してください。
  1. 新しいタブでchrome://gcm-internalsを開きます。
  2. 左上の「Start Recording」ボタンをクリックします。「Connection State: CONNECTED」が表示されていることを確認してください。
  3. これを開いたままにして、Chrome Webプッシュ購読に別のプッシュ通知を送信してください。
  4. 受信した場合、「Receive Message Log」に何かが表示されるはずです。

GCM内部ロギング

  • 「Data msg received」が表示されない場合、Chromeブラウザが通知をまったく受信していません。サポートにこのことをお知らせください。
  • 「Data msg received」が表示されているのに通知を受信していない場合は、次の手順に進んでください。
  1. 新しいタブでchrome://serviceworker-internalsを開きます。
  2. Scope: https://your-site.comを検索します（your-site.comを実際のサイトドメインに置き換えてください）。
  3. InspectまたはStart -> Inspectをクリックします。Chrome開発者ツールのポップアップが表示されます。

サービスワーカーの検査

  1. サービスワーカーのChrome開発者ツールポップアップで、Consoleタブをクリックし、OneSignalWorker.log.trace();を実行します。undefinedが返されるはずです。サービスワーカーからのすべてのメッセージがこのポップアップに表示されるようになります。
サポートが必要ですか？サポートチームとチャットするか、[email protected]にメールしてください以下を含めてください：
  • 発生している問題の詳細と再現手順（利用可能な場合）
  • OneSignal App ID
  • 該当する場合は、External IDまたはSubscription ID
  • 該当する場合は、OneSignalダッシュボードでテストしたメッセージのURL
  • 関連するログまたはエラーメッセージ
お気軽にお問い合わせください！