> ## 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セットアップ
> JavaScript SDK、サービスワーカーのセットアップ、ダッシュボード設定を使用して、WebサイトにOneSignal Webプッシュ通知を追加します。
export const SdkReleasesIframe = ({sdkFilter = undefined, viewMode = undefined, height, ...frameProps}) => {
const baseUrl = 'https://onesignal.github.io/sdk-releases';
const buildUrl = (theme, sdkFilter, viewMode) => {
const url = new URL(baseUrl);
const params = new URLSearchParams();
if (theme) {
params.set('theme', theme);
}
if (sdkFilter) {
params.set('sdk', sdkFilter);
}
if (viewMode) {
params.set('viewMode', viewMode);
}
if (params.toString()) {
url.search = params.toString();
}
return url.toString();
};
const detectTheme = () => {
if (document.documentElement.classList.contains('dark')) {
return 'dark';
}
return 'light';
};
const [theme, setTheme] = useState('light');
const [iframeSrc, setIframeSrc] = useState(() => {
const initialTheme = detectTheme();
return buildUrl(initialTheme, sdkFilter, viewMode);
});
useEffect(() => {
const currentTheme = detectTheme();
setTheme(currentTheme);
setIframeSrc(buildUrl(currentTheme, sdkFilter, viewMode));
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleThemeChange = () => {
const newTheme = detectTheme();
setTheme(newTheme);
setIframeSrc(buildUrl(newTheme, sdkFilter, viewMode));
};
if (mediaQuery.addEventListener) {
mediaQuery.addEventListener('change', handleThemeChange);
} else {
mediaQuery.addListener(handleThemeChange);
}
window.addEventListener('storage', handleThemeChange);
const observer = new MutationObserver(handleThemeChange);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class', 'data-theme']
});
return () => {
if (mediaQuery.removeEventListener) {
mediaQuery.removeEventListener('change', handleThemeChange);
} else {
mediaQuery.removeListener(handleThemeChange);
}
window.removeEventListener('storage', handleThemeChange);
observer.disconnect();
};
}, [sdkFilter, viewMode]);
const getIframeHeight = () => {
if (viewMode === 'table') {
return '450';
}
if (viewMode === 'mini') {
return '170';
}
return '800';
};
const iframeHeight = height || getIframeHeight();
return
;
};
## 概要
このガイドでは、ダッシュボードの設定からSDKのインストールまで、サイトにOneSignal Webプッシュ通知を追加する手順を説明します。OneSignalはChrome、Firefox、Edge、Safari、および[その他の主要なブラウザー](./web-push-setup-faq)をサポートしています。
***
## 要件
* HTTPSウェブサイト：WebプッシュはHTTPまたはシークレット/プライベートモードでは機能しません。
* サーバーアクセス：サービスワーカーファイルをサイトにアップロードする必要があります。
* 単一オリジン：Webプッシュは[同一オリジンポリシー](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)に従います。複数のオリジン（ドメイン/サブドメイン）がある場合は、複数のOneSignalアプリ（オリジンごとに1つ）が必要になります。このブラウザーの制限に準拠するには、次のいずれかを実行できます：
* サブスクリプションのために単一のオリジンにトラフィックをリダイレクトする。
* オリジンごとに複数のOneSignalアプリを作成する。
チームがすでにOneSignalでアカウントを作成している場合は、[管理者ロールとして招待してもらう](./manage-team-members)ことで、アプリをセットアップできます。それ以外の場合は、[onesignal.com](https://onesignal.com)で無料アカウントにサインアップして開始してください！
***
## OneSignalアプリとプラットフォームの構成
OneSignalダッシュボードで：
* **Settings > Push & In-App > Web**に移動します。
統合タイプを選択します：
追加のコーディングなしで、OneSignalダッシュボードから直接プロンプトと設定を管理します。
公式プラグインを使用したWordPressを使用している場合に必要です。
プロンプトとSDK構成を完全に制御する必要がある開発者向け。
### サイトのセットアップ
サイトの詳細を追加します：
* **サイト名**：サイトの名前とデフォルトの通知タイトル。
* **サイトURL**：サイトのURL。詳細については、[サイトURL](#site-url)を参照してください。
* **自動再サブスクライブ**：これを有効にすると、ブラウザーデータをクリアしたユーザーがサイトに戻ったときに自動的に再サブスクライブされます（新しい権限プロンプトは不要）
* **デフォルトアイコンURL**：通知とプロンプトに表示される正方形の256x256pxのPNGまたはJPG画像をアップロードします。設定されていない場合は、デフォルトのアイコンとしてベルを使用します。
#### サイトURL
サイトの正確な[オリジン](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)を入力します。例：`https://yourdomain.com`。サイトがそのように構成されていない場合は、`www.`の使用を避けてください。
複数のオリジンがある場合：
* 単一のオリジンにリダイレクトします。
* または、オリジンごとに1つのOneSignalアプリをセットアップします。
#### ローカルテスト
Web SDKはlocalhost環境でテストできます。localhostでテストする場合は、本番アプリとは別のOneSignalアプリをセットアップすることをお勧めします。
**SITE URL**をlocalhost環境のURLと正確に一致するように設定します。一般的なlocalhost URLである必要があります。例：
* `http://localhost`
* `https://localhost:3000`
* `http://127.0.0.1`
* `https://127.0.0.1:5000`
localhostがHTTPを使用している場合は、**Treat HTTP localhost as HTTPS for testing**を選択します。
Google Chromeは`http://localhost`と`http://127.0.0.1`をセキュアオリジンとして扱い、HTTPでもHTTPS統合を許可します。これが、HTTPS localhostで他の非標準オリジンをテストできない理由です。
#### OneSignal `init`オプションに`allowLocalhostAsSecureOrigin`を追加
localhostサイトでOneSignalを初期化する際、OneSignal `init`オプションに`allowLocalhostAsSecureOrigin: true,`を追加します。
さらに、自己署名証明書を使用したHTTPS上のlocalhostをテストしている場合、テスト用に無効な証明書を無視するようChromeに要求する必要がある場合があります：` --allow-insecure-localhost`。FirefoxとSafariは、セキュリティ証明書の例外を追加するための組み込みメカニズムを提供します。
```html theme={null}
```
### 権限プロンプト
通常のサイトセットアップでは、あなたまたはチームメンバーがOneSignalダッシュボードを介して、いつでも権限プロンプトを追加、削除、更新できます。
ブラウザーの権限ダイアログがユーザーに表示されるタイミングと方法を設定します。
### ウェルカム通知（オプション）
ユーザーがプッシュ通知にサブスクライブしたときに送信されるウェルカム通知を設定することもできます。
### 詳細設定
OneSignalダッシュボードで構成可能な追加機能。
#### Webhook
Web SDKは、特定のWebプッシュイベントを選択したURLに`POST`する機能を提供します。
WebプッシュWebhookは[イベントWebhook](./event-streams)とは別の実装であり、互換性がありません。
WebプッシュイベントをPOSTリクエスト経由でサーバーに送信します。
#### サービスワーカー
Webプッシュ構成の次のページで、`OneSignalSDKWorker.js`サービスワーカーファイルが提供されます。
Web SDKは、デフォルトでサイトのルートでこのファイルを探します。サービスワーカーファイルの場所、名前、スコープを変更したい場合は、ここでこれらの設定を更新できます。
* **Path to service worker files**は、これらのファイルを配置するディレクトリへのパスです。
* **Main and Updater service worker filenames**は、`OneSignalSDKWorker.js`のままにするか、このファイルの名前を変更したい場合に使用できます。`.js`ファイル拡張子を使用する必要があります。
* **Service worker registration scope**は、このファイルが機能できるページです。プッシュ通知の場合、これは重要ではなく、サービスワーカーファイルにさらに機能を追加したい場合のために元々設計されました。これを場所と同じパスに設定する必要があります。
この例では、ファイルのコードが`https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js`で公開アクセス可能であることを確認する必要があります
高度なサービスワーカー設定、カスタム統合、および他のプロバイダーからの移行。
#### クリック動作
通知をクリックしたときに設定した[URL](./links)にユーザーがどのようにナビゲートするかを制御します。
ユーザーがいずれのタブでもサイトを開いていない場合、ブラウザーは新しいタブを開き、通知のURLに移動します。ユーザーがすでにサイトを開いている場合、動作は選択した設定によって異なります：
| 設定 | 一致する対象 | アクション |
| ------------------------- | -------------------------------- | --------------------- |
| **Exact Navigate**（デフォルト） | 完全一致URL（例：`example.com/product`） | 一致するタブで通知のURLに移動 |
| **Origin Navigate** | オリジン（例：`example.com`） | 一致するタブで通知のURLに移動 |
| **Exact Focus** | 完全一致URL | ページを更新せずに一致するタブにフォーカス |
| **Origin Focus** | オリジン | ページを更新せずに一致するタブにフォーカス |
#### 永続性
デフォルトのWebプッシュ動作は、通知センターに移動される前に約5秒間デバイスにポップアップ表示され、オペレーティングシステムによって削除される前に約1週間そこに保持されます。
一部のデバイスとChromeおよびEdgeのバージョンでは、画面上で通知をより長く持続させることができます。これは、ユーザーが操作するまで通知が画面上に留まることを意味します。**これはユーザーを苛立たせる可能性があり、推奨されません。** また、永続性を有効にすると、文字数が減少し、画像やボタンの表示方法に影響を与えることで、サブスクライバーへの通知の表示方法に影響します。
変更すると、更新された設定でサイトにアクセスするサブスクライバーに対してのみ有効になります。これらのオプションの変更が表示されない場合は、待つ必要があります
#### Safari証明書（オプション）
OneSignalは、Safariブラウザーで動作するために必要な証明書を追加費用なしで自動的に提供します。すでに独自のSafari Webプッシュ証明書をお持ちの場合は、このオプションを切り替えて`Safari Web .p12 Push Certificate`とパスワードをアップロードします。
***
## サービスワーカーファイルのアップロード
`OneSignalSDKWorker.js`サービスワーカーファイルをサイトに追加します。OneSignalダッシュボードからダウンロードするか、[GitHubから](https://github.com/OneSignal/OneSignal-Website-SDK/files/11480764/OneSignalSDK-v16-ServiceWorker.zip)ダウンロードしてください。
このファイルをサイトのルートディレクトリまたはサブディレクトリに配置します。サブディレクトリに配置する場合は、[詳細設定 > サービスワーカー](#service-workers)セクションで**Path to service worker files**を設定する必要があります。
ファイルがサーバーにある場合は、次のことを確認して動作を確認してください：
ファイルが[詳細設定 > サービスワーカー](#service-workers)で設定されたのと同じ**Path to service worker files**に配置されていることを確認してください。これらの設定を更新していない場合は、ファイルをルートに配置する必要があります。例：
* `https://yourdomain.com/OneSignalSDKWorker.js`
* `https://yourdomain.com/some-subdirectory/OneSignalSDKWorker.js`
`OneSignalSDKWorker.js`ファイルは、オリジンで公開アクセス可能で利用可能である必要があります。CDN経由でホストしたり、リダイレクトで別のオリジンに配置したりすることはできません。
ファイルのURLにアクセスすると、コードが表示されるはずです。
これはjavascriptファイルであり、そのように提供される必要があります。content-typeがtext/htmlであってはなりません。
高度な設定および他のWebプッシュプロバイダーからの移行。
## サイトにコードを追加
以下のJavaScript SDKコードはあらゆるサイトで機能します。サイトが[Angular](./angular-setup)、[React JS](./react-js-setup)、または[Vue JS](./vue-js-setup)で構築されている場合は、これらのリンクに従ってください。
JavaScript SDKを使用してサイトでOneSignalを初期化するには、提供されたコードをWebサイトの``タグにコピー/ペーストします。OneSignalダッシュボードでは、[アプリID](./keys-and-ids)があらかじめ入力された同じスニペットが提供されます。
```javascript theme={null}
```
### iOS Webプッシュサポート
Appleは、iOS 16.4+を実行しているiPhoneとiPadでWebプッシュ通知のサポートを開始しました。サポートされているブラウザーでアクセスするだけでWebプッシュが「機能する」Androidデバイスとは異なり、Appleは`manifest.json`ファイルやユーザーがサイトをホーム画面に追加するアクションなど、いくつかの追加要件を追加しました。
必要な`manifest.json`ファイルを追加し、ユーザーにサイトをホーム画面に追加するように案内します。
***
## OneSignal SDK統合のテスト
このガイドでは、プッシュ通知とサブスクリプション登録をテストして、OneSignal SDK統合が正しく機能していることを確認する方法を説明します。
### Webプッシュサブスクリプションを確認
* テスト中は、Chrome、Firefox、Edge、またはSafariを使用してください。
* \*\*シークレットモードやプライベートブラウジングモードは使用しないでください。\*\*これらのモードでは、ユーザーはプッシュ通知にサブスクライブできません。
* [許可プロンプト](/docs/ja/permission-requests)の設定に基づいてプロンプトが表示されるはずです。
* プッシュ通知にサブスクライブするには、ネイティブプロンプトで**Allow**をクリックします。
* **Audience > Subscriptions**に移動します。
* ステータスが**Subscribed**の新しいエントリが表示されるはずです。
[Webプッシュサブスクリプション](/docs/ja/subscriptions)の作成に成功しました。
Webプッシュサブスクリプションは、ユーザーがサイトでプッシュ通知に初めてサブスクライブしたときに作成されます。
### テストサブスクリプションをセットアップ
テストサブスクリプションは、メッセージを送信する前にプッシュ通知をテストするのに役立ちます。
ダッシュボードで、サブスクリプションの横にある\*\*Options（3つのドット）\*\*ボタンをクリックし、**Add to Test Users**を選択します。
**test usersタブ**で後でデバイスを簡単に識別できるように、サブスクリプションに名前を付けます。
**Audience > Segments > New Segment**に移動します。
セグメントに`Test Users`という名前を付けます（この名前は後で使用されるため重要です）。
テストユーザーのセグメントの作成に成功しました。
この個別のデバイスとテストユーザーのグループにメッセージを送信するテストが可能になりました。
### API経由でテストプッシュを送信
OneSignalダッシュボードで、\*\*Settings > [Keys & IDs](/docs/ja/keys-and-ids)\*\*に移動します。
以下のコードの`YOUR_APP_API_KEY`と`YOUR_APP_ID`を実際のキーに置き換えます。このコードは、先ほど作成した`Test Users`セグメントを使用します。
```curl theme={null}
curl -X \
POST --url 'https://api.onesignal.com/notifications' \
--header 'content-type: application/json; charset=utf-8' \
--header 'authorization: Key YOUR_APP_API_KEY' \
--data \
'{
"app_id": "YOUR_APP_ID",
"target_channel": "push",
"name": "Testing basic setup",
"headings": {
"en": "👋"
},
"contents": {
"en": "Hello world!"
},
"included_segments": [
"Test Users"
],
"chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'
```
ターミナルでコードを実行します。
すべてのセットアップ手順が正常に完了した場合、テストサブスクリプションは通知を受信するはずです。
画像をサポートしているのはChromeのみです。画像は折りたたまれた通知ビューでは小さく表示されます。通知を展開すると、完全な画像が表示されます。
ダッシュボードで**Delivery > Sent Messages**に移動し、メッセージをクリックして統計を表示します。**confirmed**統計が表示されるはずです。これはデバイスがプッシュを受信したことを意味します。
Safariはconfirmed receiptをサポートしていません。
プッシュ通知の配信、クリック、コンバージョン統計を表示します。
API経由でセグメントに通知を送信することに成功しました。
通知が届かない場合は、以下の情報を添えて`support@onesignal.com`にご連絡ください：
* APIリクエストとレスポンスを`.txt`ファイルにコピー＆ペースト
* サブスクリプションID
* OneSignalコードを含むウェブサイトURL
***
## ユーザー識別
前のセクションではウェブプッシュ[サブスクリプション](/docs/ja/subscriptions)の作成方法を説明しました。このセクションでは、OneSignal SDKを使用してすべてのサブスクリプション（プッシュ、メール、SMSを含む）にわたる[ユーザー](/docs/ja/users)の識別に拡張します。プラットフォーム間でユーザーを統合しエンゲージするために、External ID、タグ、マルチチャネルサブスクリプション、プライバシー、イベントトラッキングについて説明します。
### External IDを割り当て
External IDを使用して、バックエンドのユーザー識別子を使用して、デバイス、メールアドレス、電話番号間でユーザーを一貫して識別します。これにより、チャネルとサードパーティシステム間でメッセージングが統一されたままになります（特に[統合](/docs/ja/integrations)に重要）。
SDKの[`login`メソッド](/docs/ja/web-sdk-reference#login-external-id)を使用して、アプリによってユーザーが識別されるたびにExternal IDを設定します。
OneSignalは、サブスクリプション（Subscription ID）とユーザー（OneSignal ID）に対して一意の読み取り専用IDを生成します。
ユーザーが異なるデバイスでアプリをダウンロードしたり、ウェブサイトにサブスクライブしたり、アプリ外でメールアドレスや電話番号を提供したりすると、新しいサブスクリプションが作成されます。
すべてのサブスクリプションにわたってユーザーを識別するために、SDKを介してExternal IDを設定することを強くお勧めします。作成方法に関係なく。
### データタグを追加
[タグ](/docs/ja/add-user-data-tags)は、ユーザープロパティ（`username`、`role`、設定など）とイベント（`purchase_date`、`game_level`、ユーザーインタラクションなど）を保存するために使用できる文字列データのキーと値のペアです。タグは、高度な[メッセージパーソナライゼーション](/docs/ja/message-personalization)と[セグメンテーション](/docs/ja/segmentation)を強化し、より高度なユースケースを可能にします。
アプリでイベントが発生したときに、SDKの[`addTag`および`addTags`メソッド](/docs/ja/web-sdk-reference#addtag-%2C-addtags)を使用してタグを設定します。
この例では、ユーザーはレベル6に到達し、`current_level`というタグで識別され、値は`6`に設定されます。
レベルが5から10の間のユーザーのセグメントを作成し、それを使用してターゲット化されたパーソナライズされたメッセージを送信できます：
### メールおよび/またはSMSサブスクリプションを追加
OneSignal SDKはユーザーがオプトインすると自動的にウェブプッシュサブスクリプションを作成します。対応するサブスクリプションを作成することで、メールとSMSチャネルを通じてユーザーにリーチすることもできます。
* [`addEmail`メソッド](/docs/ja/web-sdk-reference#addemail-%2C-removeemail)を使用してメールサブスクリプションを作成します。
* [`addSms`メソッド](/docs/ja/web-sdk-reference#addsms-%2C-removesms)を使用してSMSサブスクリプションを作成します。
メールアドレスや電話番号がOneSignalアプリに既に存在する場合、SDKはそれを既存のユーザーに追加し、重複は作成しません。
ダッシュボードの**Audience > Users**または[View user API](/reference/view-user)を使用して、統合されたユーザーを表示できます。
マルチチャネルコミュニケーションのベストプラクティス
* メールまたはSMSサブスクリプションを追加する前に、明示的な同意を得てください。
* 各コミュニケーションチャネルの利点をユーザーに説明してください。
* ユーザーが好むチャネルを選択できるように、チャネルの設定を提供してください。
***
### プライバシーとユーザー同意
OneSignalがユーザーデータを収集するタイミングを制御するには、SDKの同意ゲーティングメソッドを使用します：
* [`setConsentRequired(true)`](/docs/ja/web-sdk-reference#setconsentrequired)：同意が与えられるまでデータ収集を防ぎます。
* [`setConsentGiven(true)`](/docs/ja/web-sdk-reference#setconsentgiven)：同意が付与されるとデータ収集を有効にします。
プライバシーとセキュリティの詳細については：
OneSignal SDKがユーザーから収集するデータを確認します。
プライバシー規制に準拠してユーザーデータを管理および保護します。
***
## プッシュ、ユーザー、アプリ内イベントをリッスン
SDKリスナーを使用して、ユーザーのアクションと状態の変化に反応します。
SDKは、フックできるいくつかのイベントリスナーを提供します。詳細については、[SDKリファレンスガイド](/docs/ja/web-sdk-reference)を参照してください。
### プッシュ通知イベント
* [クリックイベントリスナー](/docs/ja/web-sdk-reference#click)：通知がタップされたときを検出します。
* [フォアグラウンドライフサイクルリスナー](/docs/ja/web-sdk-reference#foregroundwilldisplay)：フォアグラウンドでの通知の動作を制御します。
### ユーザー状態の変更
* [ユーザー状態変更イベントリスナー](/docs/ja/web-sdk-reference#addeventlistener-user-state)：External IDが設定されたときを検出します。
* [許可オブザーバー](/docs/ja/web-sdk-reference#permissionchange)：ネイティブのプッシュ許可プロンプトとのユーザーの特定のインタラクションを追跡します。
* [プッシュサブスクリプション変更オブザーバー](/docs/ja/web-sdk-reference#addeventlistener-push-subscription-changes)：プッシュサブスクリプションのステータスが変更されたときを追跡します。
***
## 高度なセットアップと機能
統合を強化するための追加機能を探索します：
別のプッシュプロバイダーからOneSignalに移行します。
OneSignalをサードパーティツールとプラットフォームに接続します。
プッシュ通知にインタラクティブなボタンを追加します。
ユーザーの好みの言語でローカライズされたメッセージを送信します。
サーバーサイドのIdentity VerificationでSDK統合を保護します。
メッセージに関連するカスタムコンバージョンイベントを追跡します。
### Web SDKのセットアップとリファレンス
統合のすべての主要なウェブプッシュ機能を有効にします。
利用可能なメソッドと設定オプションの完全な詳細。
おめでとうございます！Web SDKセットアップガイドが正常に完了しました。
***
***
## FAQ
### HTTPサイトでWebプッシュは機能しますか？
いいえ。WebプッシュにはHTTPSが必要です。ブラウザーはこれをセキュリティ要件として強制しています。唯一の例外は`localhost`と`127.0.0.1`で、ブラウザーは開発目的のためにこれらをセキュアオリジンとして扱います。
### サービスワーカーファイルが必要なのはなぜですか？
サービスワーカーはバックグラウンドで実行され、ユーザーがサイトを開いていない場合でも受信したプッシュ通知を処理します。これがなければ、ブラウザーは通知を表示できません。`OneSignalSDKWorker.js`ファイルはオリジン上で公開アクセス可能である必要があります。
### iOS（iPhone/iPad）でWebプッシュを使用できますか？
はい、iOS 16.4+から使用できます。ただし、Appleは`manifest.json`ファイルを必要とし、ユーザーは最初にサイトをホーム画面に追加する必要があります。完全な要件については[iOS Webプッシュセットアップ](./web-push-for-ios)を参照してください。
### 通知が表示されないのはなぜですか？
よくある原因としては、サービスワーカーファイルの配置が間違っている、ダッシュボードのサイトURLが一致していない、またはブラウザー設定でユーザーが通知をブロックしていることが挙げられます。完全なトラブルシューティングのチェックリストについては[通知が表示されないまたは遅延する](./notifications-show-successful-but-are-not-being-shown)を参照してください。
***
サポートが必要ですか？
サポートチームとチャットするか、`support@onesignal.com`にメールしてください
以下を含めてください：
* 発生している問題の詳細と再現手順（利用可能な場合）
* OneSignal App ID
* 該当する場合は、External IDまたはSubscription ID
* 該当する場合は、OneSignalダッシュボードでテストしたメッセージのURL
* 関連する[ログまたはエラーメッセージ](/docs/ja/capturing-a-debug-log)
お気軽にお問い合わせください！
***