きっかけ
iOSでプッシュ通知ができない等のプラットフォーム間の差がありましたが、iOS16.4にてプッシュ通知がサポートされるようになったので改めてPWAについて調べ直したいと思います。
PWAとは？
WEB技術だけでネイティブみたいなWEBアプリケーションを作るためのデザインパターンと個人的に解釈しました。
Googleのドキュメントを読んでも明確な事は示されていなかった。しかし、Progressive = 「発展、前進」と言う意味だし、「今後のWEBアプリ開発のガイドライン」と言った意味も含んでそうだと感じました。
PWAの特徴
MDN や他ブログを読んで噛み砕いてみると下記要素を含むとPWAであると言えそう。
- レスポンシブデザイン：PC,スマホ等のデバイスの違いに対応できるデザインを提供する
- WEB APIの活用：ネイティブアプリの様にローカルファイル、カメラや地図等へアクセスする様々な機能を利用できる。
- Service Workerの活用：端末へのインストールやプッシュ通知で利用しているモジュール
- UX重視：キャッシュ等を用いてユーザーの体験を損なわない設計を是としている
PWA（WEB）でできること
上記特徴にも上げましたが、ブラウザ上で使えるAPIが拡充されていていますね。
WebAssenblyも出てきたので、動画編集の様な、高負荷でネイティブでしかできなかったアプリもWEB化する未来があるかも？
PWAの要件
Googleさんの定義するところではUX重視なのが伺えますね。
- Starts fast, stays fast：ユーザーは表示に3秒以上かかると離脱すると言われているやつですね
- Works in any browser：どのブラウザでも動作させる
- Responsive to any screen size：モバイルファーストになりつつありますが、パソコンでの表示も考慮しましょう
- Provides a custom offline page：アプリ体験を損なわないためにオフライン時の動作も考慮した方がUXが向上する
- Is installable：インストール（ホームにアイコンを設置）すると、アクセスが向上する。インストール（キャッシュ活用）することでUXが向上できるらしい
要件通り実装できているかは Lighthouse で評価できるとのこと。
PWAを構築するための手順
GoogleのドキュメントやWEBを見ると下記が必要になりそうだ。
- HTTPS対応：Service Workerを利用するには必須みたいです
- Web App Manifest：WEBアプリの情報を定義するJSONファイル。アプリ情報を格納するみたい
- Service Worker：アプリのキャッシュやプッシュ通知用のバックグラウンドなタスク処理に利用するみたい
調べて直してみた感想
お、覚えることが多い。。しかし、web.devにまとまった資料が置いてあったので、時間を作って読み込みたいと思います。
現時点の懸念は、キャッシュファイルの管理とかオフライン時の状態管理とかを考慮しないといけなくなるのでアプリの複雑度が上がりそうだと感じました。（もしかしたら楽にできる？）