もう一人のY君

iPhoneアプリのレビューやアップデートレビューなどを書いています. たまに数学の記事も書きます.

もう一人のY君 MENU  MENU

フルスクリーンモード(疑似Webアプリモード)に対応しました

 気まぐれ対応です.

 プッシュ通知などには対応していません.

 

 

スポンサーリンク

 


 

 

 

PWAについておさらい

blog.thetheorier.com

 先日紹介したように、かなり昔ですがWebサイトでもiOSアプリやAndroidアプリのように振る舞うPWA(Progressive Web Apps)というものがあります.

 アプリのように振る舞うのでブラウザのURL表示や共有ボタンなどブラウザ側のUIが取り除がれて画面全体をこちら側で扱うことができ、またWebPushやNotificationPushなども行える、まさにアプリに限りなく近づいたWebサービスを提供できます.

 今回は前者のみとなります.

 

 

 先日も比較しましたが画像の通り、ステータスや各種ボタンが取り除かれ、表示したいWebコンテンツがより広くなります.

 

 

作り方

 今回のフルスクリーンモードは、それに対応するWebサイトのショートカットをホーム画面に追加し、そのアイコンからアクセスする場合に限られます.

 対応するWebサイトをブラウザからアクセスしても恩恵に預かることはできません.

 

 

 まずフルスクリーンモードで見たいWebサイトのページをSafariで開き、画面下の共有ボタンから「ホーム画面に追加」をタップします.

 

 

 好みで名前を編集して「追加」をタップすればホーム画面にアイコンが追加されます.

 ようはこれまでWebサイトをホーム画面から開くアイコンを作る方法とまったく同じです.

 フルスクリーンモード(≒PWA)に対応するWebサイトに限り挙動が異なるというわけです.

 

 こうして作ったアイコンからアクセスしたWebサイトはフルスクリーンで表示されます.

 

 

 なお、フルスクリーンモードで開いたページから他のページに飛ぶとフルスクリーンモードでなくSafariでもなく「Safariビューコントローラ」で開きます.

 先日紹介したこれ↓です.

 

blog.thetheorier.com

 Safariとは違い実行中のアプリケーション上でポップアップのように表示され、Safariに似ていますが上下のステータスやボタンの種類が異なります.

 右下のアイコンをタップすればSafariが起動し、そちらで表示中のWebサイトを開きます(画像①).

 また画面左上の「完了」をタップするとフルスクリーンモードとして作った元のWebサイトにフルスクリーンモードで戻ります(画像②).

 フルスクリーンモード内ではどのような過程を踏んでも元のWebサイトのみフルスクリーンモードになります.

 

 

 ちょっとしたことですがステータスやボタンなどが邪魔に思う時は確かにあるのでやらないよりマシですね.

 

 ブラウザの時点でできればもっと嬉しいんですがそういうのは専用アプリに頼るしかなさそうです.