yasudacloudの日記

札幌に住むソフトウェアエンジニア

iPhoneでWebプッシュを実装する

iOS/iPadOS 16.4からサポートされたWebプッシュが意外と話題になっておらず、通知が出てる動画を探してもなかなか見つからなかったので実装してみました。

通知自体はスマホのプッシュ通知と同じで面白みがないので先に動画を貼ります。

iOS

まずは通知の許可を得るために"ボタンをクリック"のような能動的な処理が必要になります。どうもGlobalに処理を書くとブラウザによってエラーになるようで。

次に通知の送信。「5秒後に通知を送信」ボタンをクリックしてexpressのWebAPIを叩きます。バックエンド側は"5秒経ったらWebプッシュを送信"という設定にして、その間にホーム画面に戻っておきます。そして5秒後にネイティブアプリのようにPWAアプリがバックグラウンドにいても通知が届くという流れです。

環境構築

プッシュ通知を受けるフロントと送るバックエンドが必要になります。サンプルということでシンプルにNodeのexpressにまとめます。

今回のソースコードはこちら

そして地味に面倒ですが、httpではなくhttpsにする必要があります。EC2やVPSを立てても良いのですが少し面倒だったのでCloudflare Tunnelを使って適当なドメインからローカルの環境にhttpsでアクセスできるようにします。

Cloudflare Tunnelについては下記リンクがちょうど良くまとまってます。

zenn.dev

通知を送る&受け取る

コードはGitHubに上げてるので説明は割愛しますが、VAPID Keyを正しく設定してSSL環境があれば動作するはずです。iPhone側の操作としてはWebサイトのURLを開いてSafariの「ホーム画面に追加」からホームにアプリを追加し、そこから開くだけです。

PublicなAPIからサブスクライブした全員に通知を送ったりしてますがサンプルなのでご了承下さい。

github.com

うまくいかない時のtips

・iPhoneだけでなくPCのブラウザ(Chrome、Safari)で試す。PCではうまくいくがiPhoneではうまくいかない、という場合はPWAの実装が少し違う可能性がある。

→manifest.jsonやService Worker周りを見る

・フロントでsubscribeがうまくいってるにも関わらず、PCでもプッシュ通知が受け取れない場合はVAPIDKeysがおかしい可能性がある。

・badgeやactionsに関しては現状動かないっぽい(参考

・ChromeのService Workerのキャッシュ削除は開発者ツールの[Application][ServiceWorker][Unregister]で消える

・SafariのWebインスペクタを使ってみる(console.logが出力されなかったが自分だけ・・?)

・ソース修正して反映されてるか確証がなかったらとりあえず削除(ホーム画面から一度削除)

SafariのExperimental Featuresについて

iPhoneの設定→Safari→詳細→Experimental Featuresの一覧にNotificationsという項目があります。これはプッシュ通知(あるいはネイティブアプリのローカル通知)を意味していると思ったのですがオフにしても通知は受け取れるようです。調べてもよくわかりませんでした。。

その他参考)

IOS 16.4 beta 2 PWA Push notificat… | Apple Developer Forums

Does Web Push Notification Actions… | Apple Developer Forums

最後に

PWAが流行るのか、Webプッシュはイケてるのかという点は個人的にあまり関心がなく。なぜかというとiPhoneで気に入ったWebサイトをホーム画面に置くって習慣が全くないので身近に感じないのが正直なところです。

でも今後、SafariのUIが変わったりPWAのネイティブアプリにはない機能的な優位性があれば使い方も変わってくるかもしれませんね。