> ## 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.

# iOS Webプッシュセットアップ

> Safari、Chrome、Edgeブラウザーのマニフェストファイルのセットアップ、ユーザーオンボーディング戦略、実装のベストプラクティスを含む、iOSおよびiPadOSデバイスで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 <Frame {...frameProps}>
      <iframe src={iframeSrc} width="100%" height={iframeHeight} frameBorder="0" style={{
    border: "none"
  }} title="SDK Releases" key={iframeSrc} />
    </Frame>;
};

<SdkReleasesIframe sdkFilter="react,vue,vue3,angular,wordpress" viewMode="table" height="380" />

Appleは、ユーザーのホーム画面に追加されたWebアプリ向けに、iOS and iPadOS 16.4+でプッシュ通知のサポートを開始しました。この機能はSafari、Chrome、Edgeブラウザーで機能し、Web第一の企業に新しいエンゲージメントの機会を開きます。この包括的なガイドでは、iOS Webプッシュ通知を正常に実装するために必要なすべてをカバーしています。

<Frame caption="モバイルでのWebプッシュ通知の例。">
  <img src="https://mintcdn.com/onesignal/3zq1PvSaqvUE2bIx/images/docs/2477862-iOS_push-doc.jpg?fit=max&auto=format&n=3zq1PvSaqvUE2bIx&q=85&s=86aed6cdbed6645e568a644ac725f414" width="806" height="929" data-path="images/docs/2477862-iOS_push-doc.jpg" />
</Frame>

***

## 2025年の重要な更新

**クロスブラウザーサポート**：WebプッシュNotificationはiOS/iPadOS 16.4+のすべての主要なブラウザー（Safari、Chrome、Edgeを含む）で機能するようになりました。

**iOS 17+の改善**：デフォルトで有効になっている関連APIによる実装の強化により、Webプッシュがユーザーにとってよりアクセスしやすくなりました。

**信頼性に関する考慮事項**：一部の開発者は、iOS Webプッシュ通知が最初は機能するが、その後予期せず停止する場合があるという、時折発生する信頼性の問題を報告しています。通知配信率を監視し、フォールバックエンゲージメント戦略を用意してください。

***

## 要件

* **iOS/iPadOSバージョン**：16.4以上
* **HTTPSオリジン**：レスポンシブデザインを使用したセキュア接続
* **Webアプリケーションマニフェスト**：正しい設定を持つ有効な`manifest.json`ファイル
* **ホーム画面へのインストール**：サポートされているブラウザーからユーザーのホーム画面にWebアプリを追加する必要があります
* **ユーザー主導のアクション**：権限プロンプトが表示される前に、ユーザーはサイトと対話する必要があります
* **OneSignalサービスワーカー**：通知配信に必要

### Progressive Web App（PWA）チェック

Webサイトがすでに[Progressive Web App（PWA）](https://onesignal.com/blog/what-is-a-pwa/)である場合、追加のサイト更新は必要ありません。[Chrome DevToolsのLighthouse](https://developer.chrome.com/docs/lighthouse/overview/#devtools)を使用して、サイトがPWAとして認定されているかどうかを監査します。

***

## セットアップ

### 1. Webアプリケーションマニフェストの作成

Webアプリケーションマニフェスト（`manifest.json`）は、ユーザーのデバイスにインストールされたときにWebアプリケーションがどのように表示され、動作するかを定義するJSONファイルです。iOS Webプッシュの場合、このファイルは**必須**です。

#### 必須のマニフェストフィールド

`manifest.json`には、これらの重要なフィールドを含める必要があります：

* **`$schema`**（推奨）：検証とIDEサポートのためのJSONスキーマURL
* **`name`**（必須）：ユーザーに表示される完全なアプリケーション名
* **`display`**（必須）：iOS互換性のため`"standalone"`または`"fullscreen"`に設定する必要があります
* **`start_url`**（必須）：アプリケーション起動時のエントリポイントURL
* **`icons`**（必須）：複数のサイズを持つアイコンオブジェクトの配列
* **`id`**（推奨）：複数のアプリインスタンスを許可する一意の識別子

#### Example manifest file

```json theme={null}
{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "OneSignal Manifest Example",
  "short_name": "OS Manifest",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#E54B4D",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "id": "?homescreen=1"
}
```

#### 実装手順

1. **ファイルの配置**：`manifest.json`をWebサイトのルートディレクトリに配置します
2. **HTML統合**：すべてのページの`<head>`セクションにこのlinkタグを追加します：

```html theme={null}
<link rel="manifest" href="/manifest.json"/>
```

3. **アイコンの準備**：複数のサイズ（192x192、256x256、384x384、512x512ピクセルを推奨）の高品質なPNGアイコンを作成します

<Note>
  [SimiCart Manifest Generator](https://www.simicart.com/manifest-generator.html/)などのツールを使用してマニフェストファイルを素早く作成するか、[Manifest Tester](https://manifesttester.com/)で既存のファイルを検証します。
</Note>

### 2. OneSignalサービスワーカーの追加

[Web SDKセットアップ](./web-sdk-setup)をすでに完了し、他のブラウザーでWebプッシュ通知を受信できる場合、このステップは完了しています。詳細なセットアップ手順については、[OneSignalサービスワーカー](./onesignal-service-worker)のドキュメントを参照してください。

### 3. 権限プロンプトの構成

[Web SDKセットアップ](./web-sdk-setup)からの既存の[Web権限プロンプト](./permission-requests)は、**ユーザーがサイトをホーム画面に追加してそこから開いた後にのみ**、iOSデバイスで機能します。これはAppleの設計要件です。

### 4. ユーザーを「ホーム画面に追加」に誘導

設定に基づいて権限プロンプトが表示されるデスクトップまたはAndroidデバイスとは異なり、iOSでは、促進する必要がある特定のユーザージャーニーが必要です。

#### 必要なユーザージャーニー

ユーザーは通知を受信するために以下のステップを完了する必要があります：

1. iOS/iPadOS 16.4+でSafari、Chrome、またはEdgeでWebサイトにアクセスします
2. ブラウザーの**共有**ボタンをクリックします
3. **ホーム画面に追加**オプションを選択します
4. デバイスにアプリを保存します
5. ホーム画面からアプリを開きます（ブラウザーからではありません）
6. サブスクライブボタンと対話してネイティブ権限プロンプトをトリガーします

<Frame caption="iOSでホーム画面にWebサイトを追加">
  <img src="https://mintcdn.com/onesignal/2iWYYuHf1gqm06bv/images/docs/638b3a1-ios-web-push-add-to-home-screen.jpg?fit=max&auto=format&n=2iWYYuHf1gqm06bv&q=85&s=54cb44f40d70397099b32375a3e97683" width="1346" height="736" data-path="images/docs/638b3a1-ios-web-push-add-to-home-screen.jpg" />
</Frame>

#### ユーザーオンボーディング戦略

このプロセスは直感的ではないため、次の方法で明確なガイダンスを実装します：

* **Webサイトバナー**：モバイルAppleデバイスに特別に表示されるバナーで、通知の価値を説明し、ステップバイステップの手順を提供します。

* **ビジュアルガイド**：スクリーンショットと矢印を使用して、ユーザーにどこをタップするかを正確に示します。

* **タイミング**：ユーザーがコンテンツとのエンゲージメントを示した後にガイダンスを提示します。

#### 実装例

実際のアプリケーションからの効果的なアプローチを以下に示します：

<Frame caption="ユーザーにホーム画面への追加を促すバナーの例">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0b97752-image.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=bfec43a31639c25a6eab85961334a8bd" width="2055" height="1257" data-path="images/docs/0b97752-image.png" />
</Frame>

<Frame caption="ステップバイステップのビジュアルガイダンス">
  <img src="https://mintcdn.com/onesignal/YOTSrtBSoqdrJ37A/images/docs/4e970c1-image.png?fit=max&auto=format&n=YOTSrtBSoqdrJ37A&q=85&s=04aef274f934dd44f34eaa8bd7e37360" width="2055" height="1257" data-path="images/docs/4e970c1-image.png" />
</Frame>

<Frame caption="メリットを重視したメッセージング">
  <img src="https://mintcdn.com/onesignal/tNi1OgLc_p9hiq7_/images/docs/208b123-image.png?fit=max&auto=format&n=tNi1OgLc_p9hiq7_&q=85&s=c8bd38cfb229c68500a9260b8b6e4b33" width="2055" height="1257" data-path="images/docs/208b123-image.png" />
</Frame>

<Frame caption="ビジュアルキューを使用した明確なCTA">
  <img src="https://mintcdn.com/onesignal/0qspEXXeJ8zJbkJ-/images/docs/7ec125a-image.png?fit=max&auto=format&n=0qspEXXeJ8zJbkJ-&q=85&s=c532cb02bcde365092a6bc001beaaf06" width="2055" height="1257" data-path="images/docs/7ec125a-image.png" />
</Frame>

#### オープンソースソリューション

この人気のあるオープンソースバナーソリューションの実装を検討してください：

**GitHubプロジェクト**：[add-to-home-screen by rajatsehgal](https://github.com/rajatsehgal/add-to-home-screen)

<Frame caption="rajatsehgalによるオープンソースプロジェクトからのホーム画面に追加バナープロンプトの例。">
  <img src="https://mintcdn.com/onesignal/56ctKxZSV4m5VEkn/images/docs/b63b31f-GitHub_A2HS_Ex_1.jpg?fit=max&auto=format&n=56ctKxZSV4m5VEkn&q=85&s=ccc678721ffc636fa5ddb4a71efb7ed0" width="1149" height="2142" data-path="images/docs/b63b31f-GitHub_A2HS_Ex_1.jpg" />
</Frame>

追加のバナー例とベストプラクティスは[web.dev](https://web.dev/promote-install/)で入手できます。

### 5. テストと検証

#### マニフェストファイルのテスト

1. **アクセシビリティチェック**：`https://yoursite.com/manifest.json`に移動して、公開アクセスを確認します
2. **ブラウザーDevTools**：
   * Chrome DevTools（F12）を開きます
   * ApplicationタブからManifestに移動します
   * エラーまたは警告を確認します
3. **オンラインバリデーター**：
   * [Manifest Tester](https://manifesttester.com/)
   * [Redirection.io Validator](https://redirection.io/tools/web-app-manifest/validator)
   * [ValidBot Manifest Wizard](https://www.validbot.com/tools/app-manifest-wizard.php)

#### エンドツーエンドのプッシュ通知テスト

1. iOS 16.4+デバイスでSafari、Chrome、またはEdgeを使用してWebサイトにアクセスします
2. ブラウザーの**共有**ボタンをクリックします
3. **ホーム画面に追加**を選択します
4. デバイスにアプリを保存します
5. ホーム画面からアプリを開きます（重要なステップ）
6. サブスクライブボタンをトリガーします - ネイティブ権限プロンプトが表示されるはずです
7. 権限を付与し、通知配信をテストします

#### 重要なテストノート

**再テスト要件**：同じデバイスで再度テストするには：

* ホーム画面からアプリを削除します
* ブラウザーキャッシュをクリアします（設定 > Safari/Chrome/Edge > キャッシュをクリア）
* プロセスを繰り返します

**権限拒否の回復**：権限が拒否された場合、権限プロンプトが再度表示されるようにするには、ホーム画面アプリを削除して再追加する必要があります。

**確認すべき一般的な問題**：

* `display`フィールドが`"standalone"`または`"fullscreen"`であることを確認します
* すべてのアイコンパスがアクセス可能であることを確認します
* マニフェストが正しいMIMEタイプ（`application/manifest+json`）で提供されていることを確認します
* CORSエラーをテストします

***

## トラブルシューティング

**マニフェストが読み込まれない**：ファイルパス、HTTPS要件、サーバーのMIMEタイプ構成を確認してください。

**アイコンが表示されない**：アイコンファイルのアクセシビリティとマニフェスト内の正しいサイズ仕様を確認してください。

**権限プロンプトが表示されない**：ユーザーがホーム画面アプリ経由でサイトにアクセスし、最初にインタラクティブ要素をクリックしたことを確認してください。

**通知が配信されない**：OneSignalサービスワーカーが正しくインストールされていることを確認し、ブラウザーコンソールでエラーを確認してください。

***

## 次のステップ

<Check>
  これで通知を送信する準備が整いました！[プッシュ](./push)ドキュメントに進むか、[Create message](/reference/create-message) APIを使用して、Webプッシュ通知でiOSユーザーとのエンゲージメントを開始してください。
</Check>

継続的な成功のために、iOS Webプッシュのパフォーマンスメトリクスを監視し、iOSユーザーに必要な追加のステップを適切に処理しながら、他のプラットフォームでシームレスなエクスペリエンスを提供するプログレッシブエンハンスメント戦略の実装を検討してください。

***
