CTS-KB

PWA

ぴーだぶりゅーえー

Progressive Web App Progressive Web Application
#Web #フロントエンド #Service Worker #W3C #Chrome

Progressive Web App(PWA)。Web アプリをデスクトップ・モバイル両環境でネイティブアプリのように扱える仕組み。単一の Web 技術スタック(HTML / CSS / JavaScript)で配布可能なクロスプラットフォームアプリを実現する W3C / WHATWG 仕様群の総称。

構成要素

要素役割
Web App Manifestmanifest.jsonアプリ名・アイコン・起動 URL・表示モード等のメタデータ宣言
Service Workerバックグラウンド常駐スクリプト。オフラインキャッシュ・プッシュ通知・バックグラウンド同期を担当
HTTPS通信の暗号化(Service Worker の動作要件)
App Shell起動高速化のために事前キャッシュする UI 骨格

ネイティブアプリとの違い

観点ネイティブアプリPWA
配布App Store / Google Play 経由URL からインストール / ブラウザの「インストール」ボタン
開発言語Swift / Kotlin / Flutter 等HTML / CSS / JavaScript
起動経路OS のアプリランチャーデスクトップ・タスクバー・ホーム画面に独立アイコン
アップデートApp Store 経由でユーザー操作サーバー側で透過的に反映(Service Worker 経由)
OS API アクセスフル限定的(カメラ・通知・位置情報等の Web API のみ)

Chrome PWA の Linux 運用

Chrome の「ページをアプリとしてインストール」機能でインストールした PWA は、Chrome 本体とは別の .desktop ファイルから起動するため、Chrome 本体に追加した起動オプションが適用されない。Linux で Google Meet 等を PWA 化して使う場合、PWA 側の .desktop ファイルにも個別に起動オプションを追加する必要がある(詳細は Microsoft 365 → Google Workspace 全面移行 参照)。

主要な PWA 採用例

  • Gmail / Google Meet / Google Calendar / Google Drive(Chrome PWA で独立アプリ化可能)
  • X (Twitter) / Instagram / Spotify / Pinterest
  • Microsoft Office Web(Word / Excel / PowerPoint)

関連用語

外部リソース