iOS 16.4でSafariのPWAがPush通知に対応したのでWeb Pushの動作検証する

はじめに

2023年3月27日に iOS 16.4 が公開され、iPhoneのSafariでもPush通知が利用できるようになりました。

Web Push機能を実装したPWAが iOS 16.4 Safariでどのように動作するか検証したのでまとめます。（動作検証端末：iPhone 13 mini）

目次

1. Push通知の動作確認
2. バックグラウンドやスリープ時の動作確認
3. Push通知にURLを指定した場合の動作確認
4. まとめ

プッシュ通知の動作確認

Web Push機能を持つPWAを用意して、次のようなパターンで動作を検証します。

1. Safari（ブラウザ上）でPush通知が動作するか
2. ホーム画面に追加したPWAでPush通知が動作するか

Push通知の動作確認用のWebページは次に示すような実装をしました。

• ホーム画面にインストールする実装
  • manifest.jsonファイルを作成する
  • Service Workerファイルを作成する
  • ホームアイコンとして表示される画像を作成する
• プッシュ通知の実装
  • OneSignalを利用する
    • OneSignalはPush通知を実装できるサービス（無料から使える）
    • アカウントを作成して管理画面で通知の設定をする
    • SDKファイルをダウンロードする
    • 管理画面からPush通知用のコードをコピーして、Webページに貼り付ける

実装について詳しく説明すると長くなるので、ここでは省略します。もっと知りたい方は、こちらのリポジトリにコードを用意しているので参考にしてください。

https://github.com/chinen-octtn/Count-to-3

1. Safari（ブラウザ上）でPush通知が動作するか

Push通知を実装したSample ページにアクセスして、通知の許可を求めるウインドウが表示されるか確認します。

結果：Push通知が動作しません。

SafariでWebページにアクセスした状態ではPush通知の許可を求めるウインドウは表示されません。

2. ホーム画面に追加したPWAでPush通知が動作するか

単独のアプリとして動作させるために、ホーム画面に追加してみましょう。Safariでは、AndroidのChromeと違ってホーム画面に追加するボタンが表示されません。そのため、共有メニューを開いて「ホーム画面に追加」をタップする必要があります。

ホーム画面から起動したPWAでPush通知の許可ウインドウが表示されるか確認します。

結果：Push通知が動作します。

どうやら、iOS 16.4でPush通知に対応したのは PWAでホーム画面に追加したアプリだけのようです。
ホーム画面からPWAを起動してPush通知の登録ボタンをタップすると、通知の許可を求めるウインドウが表示されます。
許可すると、Push通知が動作することが確認できます。

左：通知の許可ウインドウ、右：Push通知の受信

バックグラウンドやスリープ時の動作確認

SafariのPWAがPush通知に対応していることが確認できたので、バックグラウンドやスリープ時の動作も確認します。

0. PWAをフォアグラウンドで起動中の動作確認
1. PWAをバックグラウンドに移動させた状態で他のアプリを操作中にPush通知を受け取ることができるか
2. PWAを完全に閉じた状態（終了した状態）でもPush通知を受け取ることができるか
3. iPhone をスリープ（ロック画面）にした状態でPush通知を受け取ることができるか

結果：1〜3の全てのパターンで動作することが確認できました。

左：0. アプリ起動中、右：1. バックグラウンドに移動させて他のアプリを使っている状態

左：2. アプリを終了した状態、右：3. アプリ終了してiPhoneをスリープ（ロック画面）にした状態

バックグラウンドやスリープ時でもPush通知を受け取ることでき、アプリのような動作を実現できます。

Push通知にURLを指定した場合の動作確認

Push通知にはURLを指定できます。通知をタップしたときに指定したURLに遷移する機能です。

SampleページのPush通知で自身のページへのURL（https://deploy-preview-3--count-to-3.netlify.app/ ）を指定して動作確認します。

結果：ホームに追加したPWAが起動します。

Safariのタブが開くのではなく、PWAとして追加したアプリが起動することが確認できました。
また、別のページのURLを指定した場合は、アプリが起動してその中でWebViewのウインドウが開き、指定したページに遷移しました。

左：自身のページへのURLを指定した場合、右：別のページのURLを指定した場合

まとめ

1. iOSのPush通知はSafariのブラウザでは動作しない
2. iOSのPush通知はホーム画面に追加したPWAでは動作する
3. 通知を許可したら、バックグラウンドやスリープ時でもPush通知を受け取ることができる
4. Push通知に自身のURLを指定した場合はホーム画面に追加したPWAが起動する
5. Push通知に外部のURLを指定した場合は、PWA内のWebViewウインドウで指定したページに遷移する

iOSでもPush通知が利用できるようになったことで、企業がWeb Pushを導入しようとするケースが増えると予想されます。
しかし、現状のiOSのPush通知はホーム画面に追加したユーザーにしか届かないので、どのように動作するかを検討した上で導入する必要がありますね。
ユーザーにとって通知を受け取るメリットがなければ許可しないため、サービスがPush通知を受け取る価値を提供できるかどうかが導入のカギになると思います。