search

モバイル版 Safari（iOS / iPadOS）

モバイル iOS/iPadOS デバイスの Safari Web ブラウザで Web プッシュを有効にするためのステップバイステップガイド

hashtag
要件

iOSデバイスでWeb Pushをサポートするためには、あなたのWebサイトはProgressive Web App（PWA）としてインストール可能である必要があります。

サイトがPWAとしてインストール可能になったら、iOS 16.4以降を使用し、そのサイトをホーム画面に追加した訪問者は、Webプッシュ通知の購読および受信の対象となります。

次の項目も完了していることを確認してください Web Push実装手順.

circle-info

SafariのWeb Pushには2段階の許可プロンプトが必要です。プラットフォームで少なくとも1つの2段階プロンプトが有効になっていない場合、訪問者に通知の購読を促すプロンプトは表示されません。

hashtag
ステップ1: Web App Manifestを作成して公開する

Web app manifestはJSONファイルで、ブラウザに対して、訪問者のオペレーティングシステム上であなたのサイトをアプリとしてどのように表示するかを伝えます。

このファイルは通常、publicルートフォルダに配置され、すべてのHTMLページからリンクされます。推奨拡張子は .webmanifest ですが、 application/manifest+json コンテンツタイプ、または次のようなその他の有効なJSONコンテンツタイプで配信されていれば、任意のファイル名でも構いません。 text/json。歴史的にはサイトはファイル名として manifest.json を使用してきました。

たとえば次のようなファイルを作成します。 site.webmanifest 以下の内容で、サンプルの name およびアイコンの src の値を、あなたのサイトに適した値に置き換えてください:

{
    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
    "name": "Example",
    "display": "standalone",
    "icons": [
        {
            "src": "https://example.com/images/logo-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
circle-info

manifestで指定できるフィールドの完全な一覧については、以下を参照してください。 Web App Manifestに関するMDNの記事arrow-up-right.

manifestは通常、サイトのpublicルートから配信されます。例: https://www.example.com/site.webmanifest ただし、manifestをサブディレクトリから配信することも可能です。なお、サブディレクトリから配信すると、将来的に追加のPWA機能を実装する際に影響が出る場合があります。

manifestを公開するだけでなく、サイトの各ページに、ブラウザへmanifestファイルの場所を知らせる行を追加する必要があります。たとえば、次のコード行を各ページの <head> セクション内に配置します:

ファイルを配置し、上記の行をサイトのページに追加したら、iOS 16.4以降を搭載したiOSデバイスで実装をテストできます。

hashtag
ステップ2: テスト

iOS/iPadOS 16.4以降を搭載したデバイスでSafariからサイトにアクセスし、 共有 アイコンをクリックして、 ホーム画面に追加をタップします。ホーム画面に移動して、サイトのアイコンを見つけて開いてください。manifestが正しく実装されていれば、ブラウザの操作UIを表示せずに、サイトはスタンドアロンアプリとして開くはずです。

hashtag
ステップ3（任意）: 訪問者にWebサイトをホーム画面に追加するよう促す

SafariでのWeb Pushは、訪問者があなたのサイトをPWAとしてインストールする必要があるため、そのための案内要素をサイトに追加するとよいでしょう。

これは、サイト上のボタン、共有ボタンのすぐ上に表示される手順付きポップアップ、バナー、または訪問者があなたのサイトをPWAとして追加するために必要な手順を促すその他の要素として実装できます。

この機能の実装に役立つオープンソースプロジェクトがいくつかあります。また、WordPressを使用している場合は、多くのPWAプラグインがこのためのオプションを提供しています。

hashtag
FAQ / デバッグ

hashtag
スタンドアロンではなくブラウザで開かれる

サイトがまだスタンドアロンアプリではなくブラウザで開かれる場合は、サイトのデバッグコンソールを開き、ブラウザがmanifestを検出しなかったというメッセージを探してください。このメッセージが表示される場合は、manifestをブラウザで直接読み込めること、またコンテンツタイプが正しく設定されていることを確認してください。

hashtag
2段階プロンプトが表示されない

アプリがPWA/スタンドアロンモードで開いているのに許可プロンプトが表示されない場合は、次の点を確認してください:

  1. プラットフォームのPrompts設定で、少なくとも1つの2段階プロンプトが有効になっている

  2. Web PushをサポートするiOSデバイス（iOS 16.4以降）を使用している

前へSafari次へSDK

最終更新