PWA(Progressive Web Apps)とは -Qiitaをスマホで快適に見る-

QiitaをiPhoneで快適に見たい

1. でも公式アプリってないよね？
2. とりあえずホーム画面に追加するか…
   
3. で、生成されたこれを押す。
   
4. するとSafariで開かれず、アドレスバーも何もないネイティブアプリのような画面で表示される。
   
5. !?

調べてみた

どうやらこれはPWA(Progressive Web Apps)という技術を使っているらしい。

PWAとは、Progressive Web Appsの略称で、モバイルブラウザとネイティブアプリ（アプリストアからダウンロードして使用するアプリ）の利点を融合したWebアプリ（アプリのように振る舞う高速なWebサイト）のこと。
https://www.irep.co.jp/knowledge/glossary/detail/id=10227/

サイト側と端末側が対応している必要があるが、2022年9月現在AndroidとiOSが対応しているのでほとんどのスマホではこの機能が使える模様。

PWAはGoogleが考えついた。やっぱなんでもGoogleのせいなんだね。
Googleが推す「PWA」とは？　iOS16からプッシュ通知も可能に

2018年頃にiPhoneでも使用可能になった模様。
これの何が嬉しいかというと、

• インストール不要。
• ネイティブアプリとして開発しなくても、ネイティブアプリのような動作をさせられる。
• オフラインでも使用可能(もちろん最新のデータを受信するにはインターネット接続が必要)。
• プッシュ通知を受け取れる。
• 検索に載る。
  • 中身はそのままWebサイトなので、コンテンツが普通にウェブページとして検索に引っかかるのがアプリと違うところ。

デメリットは

• アプリストアに乗らない(流入口が減る)
• 普通のWebサイトを開発するのと比べるとPWA対応のための開発コストがかかる

といったところか。

対応サービスの例

• これ(Qiita)
• Twitter
• Instagram
• 日経電子版
• SUUMO
• etc.

対応させるには

以下の記事が参考になる。
PWA導入までの3ステップと、簡単なオフライン対応まで

要点としては

1. HTTPS対応
   Service Workerというのが動くのにHTTPSが必須

2. マニフェストの作成・読み込み
   マニフェスト: JSONで記述されたPWAの設定ファイル

3. Service Workerの作成・読み込み
   なんかファイルを作るらしい。詳しくは公式を見てくれ。

へぇ～

すごい。