ブログ

2023-03-03

iOSにWebプッシュがやってきた！

プッシュ通知 iOS

こんにちは。
３月になり春の気配を感じることが多くなってきました。
様々なスポーツイベントも開幕を迎え、野球のビッグイベントもすぐそこに迫っています。
楽しみで仕方ありません！

さて、プッシュ通知界隈でも大きな動きがありました。
先日、iOS16.4から搭載されているSafariでWebプッシュがサポートされるとの発表がありました。

- Web Push for Web Apps on iOS and iPadOS

以前より、多くのお客様から「iPhoneのSafariでWebプッシュ通知を行いたい」とのご要望を頂いておりましたが、ついに実現できるようになり、我々も期待を膨らませています。

本ブログでは、発表記事からWebプッシュを実現するための条件や、検証結果をご説明したいと思います。

実現条件

iOS版Safariへのプッシュ通知を実現するために次の条件があります。

  • Home Screen web apps のサポート
  • ユーザーの操作によるプッシュ通知の受信リクエスト

Home Screen web appsへのサポート

上記発表記事には以下のように記載されています。

Now with iOS and iPadOS 16.4 beta 1, we are adding support for Web Push to Home Screen web apps.

「Home Screen web apps」とは、モバイルアプリのように振る舞うウェブアプリです。
manifestファイルを用意したウェブサイトをSafariで表示し、シェアメニューから「ホーム画面に追加」を選択すると、ホーム画面にアプリアイコンが追加されます。
これを起動するとウェブサイトがモバイルアプリのように動作します。

「どこかで聞いたことがあるな」と思った方もいらっしゃると思います。
Progress Web Apps(PWA)の説明ですね。(PWAをご存知でない方は「PWAとは」で検索してみてください。)

つまりPWAに対応しているウェブサイトであれば、改修不要でiOS版SafariのWebプッシュを実現できる可能性があります。

一方、PWAに対応していないウェブサイトの場合はPWA対応が必要になります。
(Safariでウェブサイトを表示するだけでWebプッシュを配信できることを期待していましたので少し残念です。)

Safariで表示
シェアメニュー
Home Screen web apps

ユーザーの操作によるプッシュ通知の受信リクエスト

iOSのアプリを初めて起動したとき、何も操作しない状態でプッシュ通知の受信の許可を求めるメッセージを見た方は多いと思います。
これはアプリが起動時にプッシュ通知を受信する権限の付与をOSに対してリクエストしているためです。

Safariのプッシュ通知はこのようなユーザーが操作しない状態で受信権限付与のリクエストを行うことは許可されていません。

A web app that has been added to the Home Screen can request permission to receive push notifications as long as that request is in response to direct user interaction — such as tapping on a ‘subscribe’ button provided by the web app.

記事の通り、ユーザーの操作をきっかけとしてプッシュ通知の受信権限付与のリクエストを行う必要があります。

例えば、「購読」ボタンをページ上に配置して、これをタップすると権限付与のリクエストが行われるようにします。(ボタンをタップ後にブラウザから受信の許可を確認するメッセージが表示されます）

なお、このルールはmacOSのSafariでも同様です。

Webプッシュの実証

では、前述した2つの条件を満たした簡単なウェブアプリを使って検証してみたいと思います。
検証は、iOS16.4ベータ版(20E5212f)を利用しました。

SafariでWebページを表示

「Subscribe!」ボタンをタップしても何も起きません...
※Safariに表示したページに対してはプッシュ通知を配信できないことがわかります。

シェアメニューから「ホーム画面に追加」を選択します。

※ベータ版なので英語表記になっています。

ホーム画面にウェブアプリが追加されました。

モバイルアプリっぽいですね！

ウェブアプリを起動します。

余談ですが、Home Screen web appsに対応したウェブアプリはモバイルアプリと同じようにAppスイッチャーで切り替えができます。

「Subscribe!」ボタンをタップします。

プッシュ通知の受信許可ダイアログが表示されました。

RichFlyerの管理画面からプッシュ通知を配信します。

プッシュ通知を受信できました!!

iOS版モバイルアプリとの違い

「Home Screen web appsはモバイルアプリのように振る舞う」と前述しましたが、プッシュ通知については、モバイルアプリと比較して制限される機能があります。

  • 画像や動画などを添付できるリッチプッシュを配信できない。
    ※RichFlyerの管理画面でリッチコンテンツを設定してもテキストのみが配信されます。
  • アクションボタンが設定できない。
    ※RichFlyerの管理画面でリッチコンテンツを設定してもアクションボタンは表示されません。
  • Time Sensitive通知(優先度"高"のメッセージ)を配信できない。
  • 大量のプッシュ通知を配信する速度はモバイルアプリに比べて遅い。

モバイルアプリも運営している方は、メリットの多いモバイルアプリのプッシュ通知の活用をお勧めします。

さいごに

iOSでWebプッシュが配信できるようになったことで、お客様のサービスの価値をユーザーにPRできる手段が増えました。これは大きな変化だと思います。

Home Screen web apps（PWA）に対応する必要があるものの、無数にあるウェブサイトの中で、ユーザーに選択してもらう上で有効なテクノロジーですので、これを機に検討してみてはいかがでしょうか？

※RichFlyerでは、PWAアプリへのプッシュ通知も可能です。

ご質問、ご相談等がございましたらぜひお気軽にご相談ください。

お問い合わせ