Zenn
Closed7

PWA(Progressive Web Apps)まとめ

てりーてりー

PWAとは

Software Design2021年11月号のPWA特集ではこう書いてある。

PWA（Progressive Web Apps）は、Webアプ
リとネイティブアプリの機能の利点を併せ持っ
たWebアプリです。

特定のフレームワークを指すのではなく、今までのWebアプリとは違いネイティブアプリの特性も足し合わせた新しいユーザー体験を目指すコンセプトの様なもので、本質的には単なるWebアプリ

てりーてりー

ネイティブアプリとWebアプリの特性比較

Webアプリばっかり作っている自分からしたら、「そもそもネイティブアプリってどんな特性をもっているのか？」があいまいだったので、調べて書き記してみる。

ネイティブアプリ

  • スタンドアロンに動作する
    • 端末1つで動作できる
  • インストールするとホーム画面やタスクバー（アンドロイド）に居座る
  • オフラインでも動作する
  • デバイス自体のファイルにアクセスできる（連絡先やカレンダーなど）
  • Bluetooth経由のハードウェアにもアクセスできる

Webアプリ

  • デバイスに左右されず、ブラウザを通して動作できる
    • リンクを伝って誰とでも共有できる
てりーてりー

PWAの3つの柱

Googleはweb.devでWebアプリがネイティブアプリの様に動作する為の3つの柱について説明している。

https://web.dev/what-are-pwas/

  1. 高い性能を持つ
  2. 信頼性がある
  3. インストールできる

高い性能を持つ

最新のAPIを使う事で、Webアプリがネイティブアプリのような機能をもたらす事を指している。
例えばwebRTCによるローカルでのビデオチャットなど。

信頼性がある

オフラインでも高い操作性を出しパフォーマンスが良い状態を保つ必要がある。

インストールできる

PWAはブラウザだけではなく、インストールされスタンドアロンウィンドウで実行される。

てりーてりー

PWAのメリット

PWAを採用するメリットを考える

クロスプラットフォーム

PWAを採用するとワンソースでweb、IOS、Androidと複数デバイスへの対応が可能になり、工数の削減が出来る。

またIosやAndorid専門でエンジニアを雇う必要もなくなる為、エンジニアの確保の難易度も下がる。

専用のstoreを通さなくて良い

アプリケーションは日々アップデートしていくものだが、AppleAtoreやGooglePlayでは毎回審査が入るのでリジェクトされる可能性もある。

PWAはそもそもがWebアプリだからstoreを通さずに公開できアップデートに対する苦労が少ない。

てりーてりー

PWAの条件

ここからPWA！！という線引きは難しいがLightHouseのPWA項目でバッジが貰えていればPWAといえるだろう

現在主流なフロントエンドフレームワーク（React,Vueなど）やWordpressでは細かい設定などを行わずにPWA化をすることが出来る。

このスクラップは2022/03/03にクローズされました