iOS16.4のWebプッシュ通知を試す

先日iOS 16.4がリリースされ、条件付きではありますが、iOSでもWebプッシュ通知が受信可能となったので、早速試してみました。
まずはどのような流れでWebプッシュ通知を有効にできるか説明します。

次に、Webプッシュ通知の受信に必要なWebアプリの構築やFirebase Cloud Messaging（以下、FCM）を使ったプッシュ通知の配信方法について説明します。
なお、この記事は2023年3月29日時点の情報に基づいて記載しています。

iOSでWebプッシュ通知を受信する流れ

iOSでWebプッシュ通知を受信するには大まかに次の手順が必要です。

• Safariの試験運用機能をオンにする
• SafariでWebプッシュ通知を受信するサイトを表示する
• サイトをホーム画面に追加する
• 追加したホーム画面のサイトをタップする
• プッシュ通知受信を許可する

具体的な手順を説明します。

Safariの試験運用機能をオンにし、サイトをホーム画面に追加する

iOS 16.4以上がインストールされた端末で設定アプリを起動します。
Safari→詳細→Experimental Featuresの順に移動します。

下の方にある「Push API」をオンにします。
SafariでWebプッシュ通知を受信したいサイトを表示します。
次にSafariの下のバー中央にある共有アイコンをタップします。
次に「ホーム画面に追加」をタップします。

画面が切り替わるので追加するサイトの名前など確認、変更して、右上の「追加」をタップします。
すると、ホーム画面にアイコンが追加されていると思います。

ホーム画面からWebアプリを起動し、通知を許可する

先ほどの手順で追加した、ホーム画面上のWebアプリのアイコンをタップし、起動します。
「通知の有効化」ボタンをタップします。（このボタンは各Webアプリによって異なります）
iOSが通知を許可するか確認するダイアログが開くので、「許可」をタップします。

以上でWebアプリからプッシュ通知を受け取る準備ができました。
Webアプリを削除するか、通知設定で許可が取り消されるなどするまでは通知が受信できる状態です。
FCMなどからプッシュ通知を行うと、次のように通常のアプリと同様の通知が届きます。

Webプッシュ通知の配信と受信方法について

配信や受信方法についてはPCやAndroidなど、これまでのWebプッシュ通知と変わりません。
そのため、既にWebプッシュ通知の配信と受信が行える環境やプログラムを構築していた場合、以下の内容に目新しい情報はないと思います。
以下はまだWebプッシュ通知環境を構築したことがない方向けに、構築手順を説明します。

今回は通知の配信はFirebase Cloud Messaging（以下、FCM）を使い、受信用のWebアプリはVueで作成しました。
また、Webアプリのデプロイ先はFirebase Hostingを利用しました。
なお、Webアプリのサンプルソースを公開していますが、ビルドは各環境で行っていただく必要があるので、npmコマンドが動作するよう事前にセットアップが必要です。

Firebase Cloud Messagingの設定

通知送信を行うためFirebaseプロジェクトの作成などを行います。

1. プロジェクト作成

Firebaseコンソールにログインし、「プロジェクトを追加」からプロジェクトを追加し、そのプロジェクトに移動します。

2. Messagingの設定

左のメニューから「エンゲージメント」→「Messaging」に移動します。
次に、下の画像にある< / >アイコンをクリックします。

アプリのニックネームを入力後、「アプリを登録」ボタンを押します。
チェックボックス「このアプリのFirebase Hostingも設定します」はオフで大丈夫です。

受信用Webアプリの準備

次に受信用のWebアプリを準備します。

1. ソースコードのダウンロードとセットアップ

コンソールで次のように実行します。

git clone https://github.com/marble-inc/web-push-fcm-example.git
cd web-push-fcm-example
cp .env.example .env

次に、エディタで web-push-fcm-example/.env ファイルを開き、FCMのAPIキーなどを入力します。
Firebaseの画面で、次のようにページを移動すると表示される内容です。
左上の「プロジェクトの概要」の右にある歯車アイコン→プロジェクトの設定
ページ下部のマイアプリのウェブアプリの中の、「SDK の設定と構成」
「const firebaseConfig = {」の下にある「apiKey:」のクォーテーションで括られた文字列を順にコピペしてください。
最後の「VUE_APP_FIREBASE_VAPID_KEY」については別画面なので次に説明します。

VUE_APP_FIREBASE_API_KEY='*****************************'
VUE_APP_FIREBASE_AUTH_DOMAIN='*****.firebaseapp.com'
VUE_APP_FIREBASE_PROJECT_ID='*****************'
VUE_APP_FIREBASE_STORAGE_BUCKET='*********.appspot.com'
VUE_APP_FIREBASE_MESSAGING_SENDER_ID='999999999999'
VUE_APP_FIREBASE_APP_ID='1:999999999999:web:********************'
VUE_APP_FIREBASE_VAPID_KEY='************************************************'

「VUE_APP_FIREBASE_VAPID_KEY」に入力する値の取得手順を説明します。
Firebaseの画面で、次のようにページを移動します。
左上の「プロジェクトの概要」の右にある歯車アイコン→プロジェクトの設定→上のタブの「Cloud Messaging」
ページ下部に「ウェブの構成」があり、さらに「ウェブプッシュ証明書」の下にある「鍵ペアを作成」または「Generate key pair」をクリックします。
その後表示される「鍵ペア」の値をコピーし、「VUE_APP_FIREBASE_VAPID_KEY」の値としてペーストしてください。

2. Firebase Hostingのセットアップ

Webアプリをブラウザで表示し通知テストを行うにはHTTPSで接続可能な環境にデプロイする必要があるのでFirebase Hostingにアップすることにします。
Firebase Hostingにデプロイするには、コンソールでFirebaseにログインするコマンドを実行しブラウザでFirebaseにログイン後、初期設定が必要になります。

npm install -g firebase-tools
firebase login

ブラウザが開き、ログインが求められると思います。
ログイン後、権限の許可を行ってください。
その後、コンソールに戻って次を実行します。

npm install
npm run build
firebase init hosting

すると、少し待った後に質問が表示されるかと思います。
例として次のように選択します。

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: web-push-fcm-example # 前の手順で作成したFirebaseのプロジェクトを選択
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? No

完了したら、次のコマンドを実行し、Firebase Hostingにソースをデプロイします。
完了すると、「Hosting URL: 」の後にURLが表示されるので、ブラウザからアクセスします。
通知を許可する手順は上に書いた iOSでWebプッシュ通知を受信する流れ の通りです。

テスト通知の配信

Firebaseコンソールからテストでプッシュ通知を配信する手順を説明します。
左メニューから「Messaging」→右上あたりに表示される「新しいキャンペーンを作成」→「通知」の順に進みます。
通知のタイトルやテキストを入力し、「次へ」をクリックします。
「ターゲットとするユーザー」の真ん中あたりにある「アプリを選択」をクリックし、アプリを選択します
右下の「確認」をクリックし、「公開」をクリックすると登録が完了します。
その後、5分ほど待つとプッシュ通知が配信されます。
なお、私がテストで配信した際、何度かホーム画面への追加をやり直したりしないと配信されないことがありました。
今回は原因の切り分けなどできませんでしたが、実案件で採用する際は安定して配信できる設定や手順の再確認が必要だと思います。

Safari以外のブラウザについて

iOS16.4からSafari以外のブラウザでも、共有メニューから「ホーム画面に追加」オプションが追加できるようになるようです。
各アプリ側での対応が必要なので現時点では追加できず、追加後の挙動なども確認できませんが、Chromeなどでも機能する見込みなのはありがたいですね。

まとめ

iOS16.4で可能になったWebプッシュ通知の受信についてご紹介しました。
思っていたよりiOSでの事前操作が必要なので一般ユーザー向けとは言い難い状況ですが、いずれ設定や手順が緩和されると思いますし、企業向けのシステムであれば活用できる気がします。