もう一人のY君

主にiPhoneのショートカットアプリのレシピやTipsなどを書いています. たまに数学の記事も書きます.

もう一人のY君 MENU  MENU

【iOS16】プッシュ通知が可能なWebサイトをホーム画面に追加する【iPhone】

 

 iOS16.0から対応はしていたPWAですが、一部の機能は後手となっていました.

 iOS16.4からプッシュ通知に対応しました.

 

 

 

スポンサーリンク

 


 

 

 

PWAとは

 Webの世界ではシンプルに記事を提供するWebサイトと、コメントやデータの加工、動画視聴、商品購入などの機能を兼ね備えたWebアプリにおおまかに大別されてきました.

 

 スマホが登場しスマホ向けアプリが生まれ、これまでのWebサイトやWebアプリになかったプッシュ通知などの機能が登場しました.

 

 そのWebアプリにスマホアプリのような機能を持ち合わせる技術のことをPWA(Progressive Web Apps)と言います.

 簡単に言うと「ほぼアプリのように使えるWebサイト」です.

 

 iOSではiOS16になって導入自体はされましたが、プッシュ通知についてはiOS16.4になってようやく対応したことになります.

 

 ただし以下の条件があるようです.

 

  • Safari限定
  • 該当サイトがPWAに対応していること(現状対応しているサイトはあまりない?)
  • PWAに対応するサイトをホーム画面に追加したアイコンから開く場合に限られる
  • 要設定?(後述)

 

 

 

設定1:Push APIの設定

 情報が少ないのでハッキリしませんがプッシュ通知を利用するには設定が必要なようです.

 

 

 設定アプリを開き、「Safari」→「Experimental Features」と進みます.

 

 

 iOS16.4であれば「Push API」という項目があると思いますのでこれをオンにします.

 

 

設定2:PWA対応サイトをホーム画面に追加する

 PWAに対応するWebアプリは例えばTwitterやYoutubeなどがあるようです.

 どのサイトがPWAに対応しているかはイマイチよくわかっていません.

 ここではTwitterを参考にします.

 

 

 PWA対応のサイトをSafariで開き、共有ボタンから「ホーム画面に追加」をタップします.

 

 

 好みでラベル名を変更して「追加」をタップします.

 

 

 こうしてホーム画面に追加されたアイコンからアクセスすることでPWAに対応した状態でアクセスできます.

 

 見ての通り作り方はこれまでWebサイトをホーム画面に追加するのと同じで、PWAに対応している場合のみ、PWAの仕様で開くことになります.

 

 

 PWAで開くと画像のようになります.

 

 

 

比較

 画像左がPWAでない場合、右がPWAの場合です.

 本来Safariで表示されるステータスバーなどの表示がPWA適用後は表示されず、その分だけWebアプリの表示域が大きくなっています.

 

 ステータスバーは上下にスワイプすると一時的に隠すことはできますが、PWA適用後はスワイプしても表示されません.

 

 なおこの表示の変化自体は先程のPush APIの設定に依存しません.

 

 

 

プッシュ通知やアイコンバッジは?

 iOS16.4ではどちらもサポートしているようですが、実際に確認することができていません.

 

 

blog.kimizuka.org

 こちらにある通り対象のWebアプリがPWAに対応しており、かつ通知などの条件を満たせばちゃんと表示されるはずです.

 

 

 プッシュ通知についてもネイティブアプリ同様実行時に確認のポップアップが表示されるはずなんですが、いくつか試してもスルーされてしまってスクリンショートカットを撮る以前の問題でした.

 

 

 

 PWAはわざわざネイティブアプリを作ることなくネイティブアプリのような機能を使えるため、開発側にメリットのある技術です(Appleが渋った理由のひとつでもあります).

 iOSで対応したことで、プッシュ通知などのPWAを利用するWebアプリが増えるのではという声もあるので今後に期待ですね.