詳細は誌面に記載有るため、一部のみ要約して抜粋。
PWAの3つの柱
Capable
最新のAPIを使用してネイティブアプリのような機能を提供する事を指す。
例)
・カメラやマイクにアクセス
・画像加工
・デバイス上に保存
今後提供されるAPI、WebAssemblyなどで、PWAはこれまで以上に機能向上が期待できる。
Reliable
アプリの信頼性を指す。
ネットワークに関係なく、高速に動作するアプリケーションは信頼性が高いということである。
特に重要と言われているのが速度で、ページの読み込み速度だけでなく、スクロールやアニメーション、ボタンをクリックしたときの反応速度など、アプリケーションのパフォーマンスはユーザー体験全体に影響する。
また、ユーザーはアプリケーションがネットワークに接続されているかどうか関係なく、不安定な接続状態やオフライン環境でも起動、使用できることを期待している。
Installable
インストールできること。
ブラウザタブではなく、スタンドアロンウインドウで実行できることを指す。
インストールされたPWAは、ユーザーのホーム画面やドック、タスクバーから起動でき、ブラウザのアドレスバーや固定メニューを表示しな全画面での起動、ネイティブアプリのような使い勝手や操作性の提供が可能である。
なぜPWAを採用するのか
PWAを採用するメリット
本質的には単なるWebアプリ
ブラウザで動作するためワンソースで対応可能
- ストアを通さずに公開可能
アップデート内容の審査待ち、リジェクト対応をしなくて済む
- 技術者が多い
ネイティブアプリに比べPWA対応できるエンジニア数が絶対的に多い
また、PWAを作成したことないエンジニアでも、HTML/CSS/JavaScriptが多くを占めるので、ハードルが低い
PWAの条件
PWAは特定の技術などを指すものではなくコンセプトである
Webアプリがどの様な状態であればPWAと言ってよいかの基準は、Googleがweb.devで提供しているPWAのチェックリストがある。
PWAのチェックリスト
コアな条件は以下の5つ
- すばやく起動してすばやく動作すること
- どのブラウザでも動作すること
- あらゆる画面サイズで表示すること
- カスタムオフラインページを提供すること
- インストールできること
より優れた体験をもたらすPWAのチェックリストの抜粋内容
- オフラインでもオンラインと同じように動作すること
- アクセシビリティに対応していること(WCAG2.0アクセシビリティ要件に合格)
- マウス、キーボード、タッチなど任意デバイスで機能すること
- 強力な権限を必要とするAPIを使用許可を求める際、使用する理由を提示すること
すべての項目に対処すると困難なので、できるところから対応していく方が良いとのこと。
Lighthouseを使ったチェック
Googleが提供するLighthouseというツールを使ってPWAの要件を満たしているかチェック可能
パフォーマンス、アクセシビリティ、SEO、ベストプラクティス、PWAの項目ごとに評価
Lighthouseは、以下の3種類の方法で利用可能
- Chrome DevToolsに統合されているものを利用
DevToolsの[Lighthouse]タブを選択
チェックしたいカテゴリと検査するデバイス(モバイル or デスクトップ)を選択
上記選択後にGenerate reportを実行(自身で試したら時間はそれなりにかかった)
開発時のパフォーマンスチェックにも利用可能
- Google Chromeの拡張機能をインストールして利用
インストールすればブラウザのツールバーから簡単に利用可能
DevToolsに慣れていない非開発者が利用する場合などにお勧め
- Nodeモジュールでコマンドラインから利用
![Software Design (ソフトウェア デザイン) 2021年 11月号 [雑誌]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/1115/4910058271115_1_2.jpg?_ex=128x128 "Software Design (ソフトウェア デザイン) 2021年 11月号 [雑誌]")
