PWAとは何ですか？

Webアプリにネイティブアプリのような体験を提供する技術。オフライン動作、プッシュ通知、ホーム画面追加が可能。

PWAのポイントは？

Progressive Web App の略。Service Worker でオフライン動作とバックグラウンド処理を実現。manifest.json でホーム画面への追加やアプリ風の表示が可能。App Storeを通さずに配布可能（Webを開くだけ）

【ぴーだぶりゅーえー】

PWA とは？

💡 Webアプリを「アプリっぽく」使える技術

📌 このページのポイント

Progressive Web App の略
Service Worker でオフライン動作とバックグラウンド処理を実現
manifest.json でホーム画面への追加やアプリ風の表示が可能
App Storeを通さずに配布可能（Webを開くだけ）

PWA（Progressive Web App）のイメージ

ひよこ

PWAの何が嬉しいの？

ペンギン先生

①App Storeの審査なしで配布できる、②URLを共有するだけでインストール可能、③オフラインでも動作する、④自動アップデート（常に最新版）、⑤ネイティブアプリより開発コストが低い。Twitter Lite（現X）がPWAで成功して注目を集めたよ

ひよこ

ネイティブアプリと何が違うの？

ペンギン先生

PWAはWebベースだからブラウザの制約がある。カメラ、GPS、プッシュ通知は使えるけど、Bluetooth（一部）やNFC（iOS未対応）など一部のハードウェアアクセスは制限がある。パフォーマンスもネイティブに劣る場面がある。ただし多くのBtoBアプリではPWAで十分なケースが多いよ

ひよこ

おもしろい！どうやって作るの？

ペンギン先生

①manifest.json（アプリ名、アイコン、テーマカラーなどを定義）、②Service Worker（キャッシュ制御、オフライン対応）、③HTTPS（必須要件）の3つが最低限必要。Next.jsやViteにはPWAプラグインがあるから、既存のWebアプリに追加するのも比較的簡単だよ

ひよこ

PWAは普及している？

ペンギン先生

Starbucks、Pinterest、Uber などが大企業で導入しているよ。ただしAppleがiOSでのPWA機能を制限する動きもあり（EU規制対応で一時撤回されたが）、プラットフォームの政治的な影響を受ける面もある。PWAの機能は着実に拡張されているけど、ネイティブを完全に置き換えるにはまだ時間がかかりそうだね

まとめ：ざっくりこれだけ覚えればOK！

「PWA」って出てきたら「ネイティブアプリのように動くWebアプリ」と思えればだいたいOK！

📖 おまけ：英語の意味

「Progressive Web App」＝プログレッシブウェブアプリ

💬 Progressive（段階的に）Web App（Webアプリ）を強化する技術だよ

← 用語集にもどる