ブラウザで動くWebアプリをスマホでアプリっぽく表示させる方法
こんにちは！ソワレ東京の森江です。
今日は、エンジニアリングに関する記事です。
例えば、iPhoneのSafariで見ていたページをブックマークしてホーム画面に設置したページを開いたらたま〜に普通のスマホアプリっぽく開かれてしまうことはありませんか？
どういうことかわからない人のためにキャプチャを添付します💁♂️
※私が開発した縦書きくんという簡易Webアプリで説明
まず、普通にWebブラウザでページを表示した場合。
赤枠で囲んだ箇所にURLやフッターが表示される（そりゃそう
次に、ホーム画面に設置したWebページを開いた画面がこちら💁♂️
なんとURLなどのフッター表示が消えている！
スマホアプリっぽいね。
ちなみにアプリ選択画面の時もアイコンが表示されていてスマホアプリっぽい。
なんだこれは？
これは、PWA（Progressive Web Apps）という2018年ごろから本格的にChromeやSafariなどで導入され始めた比較的新しい技術で、要するに
Webアプリをスマホアプリ（普通のアプリ）っぽくする技術
なのです！
PWAの特徴はChat GPT o1（←大事）によると以下の5つがあるようです。
オフライン対応（Service Worker）
Webアプリの動作を裏でサポートする「Service Worker」を利用し、ネットワークが切れた状態でも限定的にアプリが使えたり、キャッシュを活用してページを高速に表示したりします。
インストール可能（Web App Manifest）
モバイルのホーム画面に追加したり、PCではアプリのようにスタートメニューなどにインストールできたりします。これにより利用者はネイティブアプリとほぼ同じ感覚で使えるようになります。
プッシュ通知（Push API）
対応ブラウザであれば、ユーザーにプッシュ通知を送ることができます。ネイティブアプリ同様に利用者との接点を維持しやすくなります。
レスポンシブデザイン
スマホやタブレット、PCなどデバイスを問わず、画面サイズに応じてレイアウトやUIを調整して快適に使えるように作られています。
常に最新の状態
アプリの配信元はWeb上にあるため、いちいちユーザーにアップデートを強要することなく、常に最新バージョンの状態を提供できます。
本当にネイティブアプリっぽくてすごい！
これで簡単にWebアプリをネイティブアプリっぽくできるね！
中でもプッシュ通知が送れるのはアツい。
（非エンジニア向けに説明すると、Webアプリは簡単に作れるけどApp Storeとかでインストールできるスマホアプリは言語が特殊で作るのも大変だしその後のAppleさんの申請とかが桁違いに大変なので。あとお金もかかる。）
ホーム画面に配置して開いてもアプリっぽくならない！
ではさっそくアプリっぽく表示しよう思って、お気に入りのWebページをホーム画面に配置して開いてみたけどなんか普通にWebページっぽく表示されてしまったという方もいると思います。
原因はシンプルです。
そのページがPWA対応されていなかったということです！☝️
PWA対応されていないということは、PWA対応してもらうようにそのページの開発者さんにお願いする必要があります。
PWA対応してくださいとそのページの管理者さんにお願いしましょう。
（なんか、ブログとかの場合はのテーマによってPWAに対応してたりしてなかったりするらしい。うろ覚え）
【エンジニアの方向け】自分が作ったWebアプリをPWA対応の実装をしよう！
ここからはエンジニアの方向けの内容です。
全世界のWebエンジニアは誰しもネイティブアプリに憧れを感じていると思います。簡単にネイティブアプリっぽくできるならぜひ実装したい！
でも結局どうやって実装すんのさ。ということで、以下の3STEPで実装できます。
（角ステップの細かいやり方は自分で調べましょう）
STEP1 HTTPSの導入しよう
PWA化では、セキュリティ対策としてHTTPSを使用する必要があるので導入しましょう。
STEP2 マニフェストファイルの作成しよう
マニフェストファイルとは、アプリの名前やアイコン、表示方法など諸々の機能の設定内容を記述したファイルです。このファイルを作成してはじめてPWAとして認められる（認識される）のです。
STEP3 サービスワーカーを実装しよう
PWA化のキモとなる部分です。
サービスワーカーとは、バックグラウンドで動作するJavaScriptファイルで、オフライン対応やプッシュ通知の機能を実現します。サービスワーカーを作成し、ウェブサイトに登録することで、PWAの機能を実現できます。
AIにPWA化してもらおうよ
ごちゃごちゃ書きましたがやっぱりPWA化めんどくさいよね。
ということで、めんどくさいことはAIにやってもらいましょう。
CursorのCOMPOSER機能で
PWA対応してください
といえば、一発でやってくれます。
いろいろ細かいゴチャゴチャした設定（マニフェストファイルとか）をいっきにやってくれるのでCursorくんいつもビッグラブです。
（まだ Cursor使っていないWebエンジニアは今すぐ使いましょう。）
ちなみに、上記のプロンプトだともしかしたらホーム上に設置した時にファビコン（アプリアイコンっぽいやつ）が設定してくれない場合があるので別途指示するといいかも。
ユーザにページをホームに設置してもらう（PWA仕様にしてもらう）UI
せっかくあなたのWebアプリをPWA対応してもユーザにWebページをホーム画面に設置してもらわないと意味ないのでそのUIを参考までにご紹介します。
シンプルに、Webブラウザから開いた場合に「ホーム画面に追加してください」というポップアップを表示するといいでしょう。
詳しくはこちらの記事が参考になったのでどうぞ！
（2、3年前に何かのニコニコ動画関連のWebページがめちゃめちゃいいUIでホーム画面登録に誘導してくれたんだけど思い出せない、、、）
PWA実装が迷惑なユーザもいるから気をつけてね
こちらの記事を見ると、どうやら私たちがネイティブアプリエンジニアになれる橋渡しであるPWAという技術に迷惑被っている人もいるらしいですね🤔
開発者のエゴを貫くのではなく、ユーザが求めるUIを提供するのが大前提ということを我々エンジニアは忘れてはいけませんね（超大事
弊社の宣伝
私が代表を務める株式会社ソワレ東京では、ITを用いたWebコンサル事業を行っています。今回の記事のようなWebに関する知識や経験が全くない中小企業向けにITを使ったWeb集客支援や業務効率化などをITとマーケティングを駆使してお助けします！
是非、お気軽に問い合わせフォームからご相談ください💁♂️
お問い合わせフォーム