--- title: "モバイル Web プッシュが Safari でサポートされるようになりました。" description: "消費者に価値のある顧客体験を提供する顧客(カスタマー)エンゲージメントプラットフォームBraze（ブレイズ）の「ブログ」ページです。モバイル Web プッシュが Safari でサポートされるようなったことにつきましてご紹介しています。" canonical_url: "https://www.braze.com/ja/resources/articles/mobile-web-push-is-now-supported-on-safari" language: "ja" datePublished: "2023-03-27T03:57:00-04:00" dateModified: "2024-01-10T19:26:59-05:00" publisher: "Braze" authors: - "Team Braze" tags: - "モバイルプッシュ通知" --- # モバイル Web プッシュが Safari でサポートされるようになりました。 2023 年 2 月 16 日、Apple は、iOS および iPadOS を介して、iPhone および iPad のモバイル Safari Web ブラウザーでの Web プッシュ通知のサポートを[発表](https://www.itmedia.co.jp/mobile/articles/2302/17/news104.html)しました。 Safari は Web プッシュ サポートを追加する最後のブラウザーであり、この変更によりプログレッシブ Web アプリと呼ばれる Web サイトがモバイル アプリのように動作させるようにできるため、この発表は大変期待されていました。 私のような Web 愛好家は、プッシュ通知、オフライン キャッシュ、ホーム画面のインストールをサポートすることで、ネイティブ モバイル アプリと同じくらい優れた機能を備えた Web アプリを、App Store の承認の手間や高いアプリ内購入手数料をかけずに構築できる、と長い間、信じてきました。それでは、[Safari のモバイル Web プッシュ](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/push_notifications/safari_mobile_push/?wovn=ja)がどのように機能するか、その要件 (および制限)、およびブランドが Web での顧客エンゲージメントに大きな影響を与えることのできるこの機会を、どのように利用しはじめることができるか、一緒に見てみましょう。 **補足: Web プッシュに Braze を使用している場合、モバイル Safari ユーザーへのプッシュの送信は既にサポートされており、SDK の更新は必要ありません。** ### プログレッシブ Web アプリと Web プッシュの重要性 プログレッシブ Web アプリ (PWA) は、最新のテクノロジを使用して、ネイティブ アプリのような操作感を体験できる Web サイトです。厳密な定義や基準はありません。[Mozilla によると](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Introduction)、PWA は、単一の何か、というよりも、パフォーマンスの高いサイトを構築するため最新技術が織り込まれた「哲学」に近いものと言えます。 Web プッシュは、最も象徴的なモバイル機能です。あるプッシュ通知を Webでも実現できれば、 PWA の最も重要な機能となりえます。私たちは皆、iOS デバイスや Android デバイスで通知センターを設定しますが、プッシュ通知を実装している Web サイトはかなり少なく、唐突にプッシュの許可を求めてきます。 2022年12月時点で[Safariのモバイル市場シェアが50%](https://www.statista.com/statistics/272664/market-share-held-by-mobile-browsers-in-the-us/)に達すると推定され、Webサイトの運営者がモバイルでの顧客エンゲージメント戦略に投資することの重要性がますます高まっています。また、アプリストアへの配信を個別に管理する必要があるAndroidやiOSのアプリとは異なり、インターネットに自社の管理下で公開可能であるため、ユーザーがよりアクセスしやすいと言えるでしょう。さらに、ウェブアプリは、一般的にストレージを消費せず、ユーザーはアプリのインストールしすぎや容量不足を気にする必要がありません。 ### [Webプッシュ通知の仕組みについて詳細を見る](https://www.braze.com/ja/resources/articles/web-push-notification) **Safari でのモバイルプッシュを実現する上での注意事項** ユーザーが Safari モバイルでプッシュをオプトインできるようにするには、ユーザーのホーム画面にブックマークされている Web サイトのみが、プッシュ許可を要求できる、という点に注意しなければいけません。 ![a screenshot of the safari web push app on a cell phone .](https://cdn.sanity.io/images/b7pblshe/marketing-prod/567429974509bbf3d95e3b7121452116041e5372-2400x1210.png) 他の主要なブラウザー (Chrome、Firefox、Edge) では、どのサイトでもプッシュ許可を要求できますが、Safari のホーム画面にブックマークされていないといけないと言う要件は、そのような手順が必要であることを理解・周知することの難易度が高く、プッシュを受け取れる状態になる人の数が少なくなることが予想されます。この分かりにくい状況に対応するため、多くの Web アプリが、アプリ内メッセージやドキュメントを通じて、ホーム画面にインストールするメリットをユーザーに訴求していくことが予想されます。 しかしながら、Safari によるホーム画面の追加要件はハードルが高い一方で、この追加要件を乗り越えたお客さんは他のブラウザよりも快適にWeb を閲覧できるようになるとも言えます。最近、私たちは Chrome と Firefox でプッシュ通知や Cookie バナーを反射的に拒否する習慣がついていますし、 Chrome と Firefox は、ネイティブのプッシュ通知が再設計され、ページにポップアップ表示ではなく、URL バーの小さなベル アイコンで表示するようになりましたので、ますますPush許諾のハードルは低くなっています。Apple は、あえて、モバイル Web のプッシュへのオプトインに高いハードルを設定し、このチャネルに関連するノイズを潜在的に制限し、ブランドがこのチャネルで、本当に興味のある Web ユーザーにリーチしやすくする可能性を高めています。 ### ハードルの高いオプトインへの対処方法としてのインストールプロンプトのサポート 将来、Sa​​fari がインストールのハードルを克服するための 1 つの方法は、インストレーション プロンプト と呼ばれる、新しい Web 機能をサポートすることです。 Chrome、Edge、Opera でサポートされているインストール プロンプトを使用すると、ユーザーは Web サイトに組み込まれたボタンを介して、ワンクリックで Web アプリをホーム画面にインストールできます。技術的に言えば、ブラウザはユーザーにインストールのオプションを提供できると判断した場合、通常はウェブサイトを十分に長い間閲覧したり、繰り返し訪問したりする場合に、このコードを実行します。 ![a phone screen shows a safari mobile push demo](https://cdn.sanity.io/images/b7pblshe/marketing-prod/4554367caf6eebaa33cc84e9d95b380f0aaac0af-2400x1210.png) Apple がインストール プロンプトのサポートを決断し、信頼できる Web アプリをユーザーがより直感的に、ホーム画面にインストールでき、プッシュ通知を受け取れるようになることを願っています。 ### Safari モバイル Web プッシュをサポートするための技術要件 **要件 1: Web アプリケーション マニフェスト ファイル** 独自のアイコンとフルスクリーンの没入型エクスペリエンスを備えた Web サイトをインストール可能にするには、Web アプリケーション マニフェスト ファイルが必要です。これは、ユーザーがサイトをホーム画面にインストールしたときに Web サイトがどのように表示されるかを制御する単純な JSON ファイルです。 たとえば、App Switcher が使用する背景テーマの色とアイコンを構成したり、ネイティブ アプリに似たサイトをフルスクリーンで開いたり、問題のアプリを横向きモードと縦向きモードのどちらで開いたりするかを制御するために使用されます。 ![a phone with safari mobile push on the screen](https://cdn.sanity.io/images/b7pblshe/marketing-prod/5f0004618b747b3ac80e253a3442883eada05d94-2400x1210.png) Web サイトの public ディレクトリに、少なくとも次の必須フィールドを含む新しい manifest.json ファイルを作成するだけです。 Safari に固有の唯一の要件は、"display" オプションを "standalone" または "fullscreen" に設定する必要があることです。サポートされているフィールドの完全なリストは、[こちら](https://developer.mozilla.org/ja/docs/Web/Manifest)にあります。 ![a javascript code is displayed on a purple background](https://cdn.sanity.io/images/b7pblshe/marketing-prod/97810711902ae73ffac31d3a0d09d000f6fde77d-2400x1210.png) 次に、HTML タグを Web サイトの セクションに追加して、マニフェスト ファイルがホストされている場所を示します。その結果、ウェブサイトをスタンドアロン アプリとしてスマートフォンのホーム画面に、他のネイティブ アプリと一緒にインストールできるようになりました。 ![a javascript code is displayed on a purple background](https://cdn.sanity.io/images/b7pblshe/marketing-prod/65fc740ed6faadee02fc4614857e8c8fdb15da2a-2400x744.png) **要件 2: Service Worker** Service Worker は、プッシュ通知用の Push API、Web アプリ用の Offline Caching Support、Google Chrome の新しい「MV3」バージョンの Browser Extensions など、多くの最新の PWA 機能を強化するバックグラウンド Javascript プロセスです。 Braze のお客様は、Braze Web SDK を初期化するだけで、以下に説明する複雑さがすべて自動的に処理されます。 Web プッシュを手動で実装する予定がある場合は、次のような大規模で複雑なプロジェクトが必要になります。 - Service Worker の登録 - サーバー側で VAPID キーを生成する - プッシュ サーバーからプッシュ登録の詳細を要求する - プッシュ トークンをデータベースに保存する - ユーザーのセグメントにプッシュ通知を送信する - Service Worker によるプッシュ通知の表示の処理 - メトリックのロギングとモニタリング **要件 3: ホーム画面に追加する** ホーム画面に Web サイトを追加するには、ユーザーは Safari で [共有] アイコンをクリックし、[ホーム画面に追加] オプションを選択する必要があります。ここから、ユーザーはアプリの表示名をカスタマイズできます。既定では、Web アプリケーション マニフェストの "name" プロパティが使用されます。 このステップは大きな摩擦点になる可能性が高く、前述のように、アプリ内メッセージや電子メールなどの他のチャネルを介してユーザーに提供できる教育は、モバイル Web プッシュの利用率やオプトインを高めるための改善が不可欠です。この種の教育的アプローチだけで、ユーザーがあなたの Web サイトをホーム画面に追加するか分かりませんが、その価値を肯定的に説明することで、ユーザーを後押しする事はできます。 **要件 4: プッシュ許可をリクエストする** Web アプリがホーム画面にインストールされたので、プッシュ許可を要求する資格があります。 Braze Web SDK を使用すると、この単純な行コードを実行してプッシュ許可をリクエストするだけで済みます。あとは SDK と Braze プラットフォームがすべて処理します。 ![a white box with javascript written on it](https://cdn.sanity.io/images/b7pblshe/marketing-prod/e2a73a53359e2e2e2d793a55e29e1f246780e6f0-2400x890.png) ホームスクリーンアプリを開いたら、ユーザーが通知を受け取る意思を示した時（例えば「通知を受け取る」というボタンをクリック）またはサイト内で十分にユーザーがサイトの利用価値を把握できたであろうと思う時を狙って、適切なタイミングでプッシュ許可をリクエストすることができます。 ![a safari mobile push demo screen on a phone](https://cdn.sanity.io/images/b7pblshe/marketing-prod/07ea3b0c12a80fed7cc814c23724a8890c31fc4c-2400x1210.png) **要件 5 (推奨): プッシュのプライム ユーザー** モバイルでプッシュ通知を実行できるようになったのに、許可プロンプトのオプトイン率が低いのは残念です。 ユーザーがネイティブのプッシュ プロンプトで [許可しない] を選択した場合、ユーザーに再度尋ねる機会を永久に失っている可能性があります。技術的には、ユーザーがスマートフォンの設定画面でPush許可を手動でリセットすることはできますが、その可能性は非常に低く、現実的には、おそらく、再度、Pushを許諾してもらうチャンスは完全に失われているはずです。 プッシュプライマーは、ユーザーにとって一生に一度のプッシュ許可のチャンスを逃さないようにするための戦略です。幸いなことに、Braze のお客様は、新しいノーコード プッシュ プライマー機能を使用してプッシュ プライマー メッセージを簡単に作成し、表示するタイミングを正確に設定できます。その結果どうなるか？プッシュの利点を理解していない（しかも、永久にオプトアウトされてしまう可能性がある）ユーザーに対してネイティブのプッシュプロンプトをトリガーするのではなく、プッシュの仕組みや、このチャンネルでメッセージを送ることを許可すると、どのようなメリットがあるかを説明するアプリ内メッセージの表示ができるようになります。 残念ながら、ユーザーがアプリ内メッセージを拒否した場合でも、また、Brazeのプッシュプロンプト（アプリ内メッセージ）でユーザーがプッシュ許可の受け入れを選択した場合は、後日、適切なタイミングで再度、問い合わせることができます。また、Brazeのプッシュプロンプト（アプリ内メッセージ）でユーザーがプッシュ許可の受け入れを選択した場合は、その後に表示されるネイティブプロンプトで「許可」をクリックする可能性が高いことが判別できるため、プッシュ通知可能なユーザーを最大化することができます。 ![a phone with the time of 9:41 on monday june 3](https://cdn.sanity.io/images/b7pblshe/marketing-prod/7e544530facbe941dc91728ca61a48ef5dc6e943-2400x1210.png) ### まとめ 1. モバイルの Safari は、Web プッシュを使用して、多数の新しい到達可能なユーザーのロックを解除できるようになり、再エンゲージメントが可能になる。 2. Safariは、プッシュ資格をホームスクリーンにインストールされたアプリに限定している。 3. 今のところ、ユーザーにアプリのインストールを促す簡単な方法は存在せず、Safariの共有メニューにアプリを手動で追加する必要がある。 4. Brazeでは、プッシュのためのユーザー登録、プッシュトークンの管理、プッシュメッセージのセグメント化や細かい調整などを簡単にできる。 ウェブプッシュ、アプリ内メッセージ、およびウェブ上でユーザーを惹きつけるその他のツールについて、さらに詳しくお知りになりたいですか？**[ウェブメッセージガイド](https://www.braze.com/ja/resources/reports-and-guides/web-messaging)**をご覧ください。 [モバイルおよびWEBプッシュのブログ記事をもっと読む](https://www.braze.com/resources/search) --- *Published 2023-03-27T03:57:00-04:00 · Updated 2024-01-10T19:26:59-05:00 · canonical lives at https://www.braze.com/ja/resources/articles/mobile-web-push-is-now-supported-on-safari*