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

モバイルでのWebプッシュ通知の例。

​
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）である場合、追加のサイト更新は必要ありません。Chrome DevToolsのLighthouseを使用して、サイトが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

{
  "$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タグを追加します：
<link rel="manifest" href="/manifest.json"/>
  1. アイコンの準備：複数のサイズ（192x192、256x256、384x384、512x512ピクセルを推奨）の高品質なPNGアイコンを作成します
SimiCart Manifest Generatorなどのツールを使用してマニフェストファイルを素早く作成するか、Manifest Testerで既存のファイルを検証します。

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

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

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

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

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

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

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

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

iOSでホーム画面にWebサイトを追加

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

このプロセスは直感的ではないため、次の方法で明確なガイダンスを実装します：
  • Webサイトバナー：モバイルAppleデバイスに特別に表示されるバナーで、通知の価値を説明し、ステップバイステップの手順を提供します。
  • ビジュアルガイド：スクリーンショットと矢印を使用して、ユーザーにどこをタップするかを正確に示します。
  • タイミング：ユーザーがコンテンツとのエンゲージメントを示した後にガイダンスを提示します。

​
実装例

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

ユーザーにホーム画面への追加を促すバナーの例

ステップバイステップのビジュアルガイダンス

メリットを重視したメッセージング

ビジュアルキューを使用した明確なCTA

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

この人気のあるオープンソースバナーソリューションの実装を検討してください： GitHubプロジェクト：add-to-home-screen by rajatsehgal

rajatsehgalによるオープンソースプロジェクトからのホーム画面に追加バナープロンプトの例。

追加のバナー例とベストプラクティスはweb.devで入手できます。

​
5. テストと検証

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

  1. アクセシビリティチェック：https://yoursite.com/manifest.jsonに移動して、公開アクセスを確認します
  2. ブラウザーDevTools：
    • Chrome DevTools（F12）を開きます
    • ApplicationタブからManifestに移動します
    • エラーまたは警告を確認します
  3. オンラインバリデーター：

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

  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サービスワーカーが正しくインストールされていることを確認し、ブラウザーコンソールでエラーを確認してください。

​
次のステップ

これで通知を送信する準備が整いました！プッシュドキュメントに進むか、Create message APIを使用して、Webプッシュ通知でiOSユーザーとのエンゲージメントを開始してください。
継続的な成功のために、iOS Webプッシュのパフォーマンスメトリクスを監視し、iOSユーザーに必要な追加のステップを適切に処理しながら、他のプラットフォームでシームレスなエクスペリエンスを提供するプログレッシブエンハンスメント戦略の実装を検討してください。