【ぴーだぶりゅーえー】

PWA とは?

💡 Webアプリを「アプリっぽく」使える技術
📌 このページのポイント
PWA — Webアプリをネイティブのように Webアプリ HTML / CSS / JS ブラウザで動作 + PWA技術 Service Worker マニフェスト = PWA アプリのように ホーム画面に 追加できる オフライン対応 キャッシュで ネット不要 プッシュ通知 ネイティブ並の 通知機能 インストール ストア不要で 即追加 高速表示 キャッシュ活用 で爆速 Webの手軽さとネイティブアプリの機能を両立
PWA(Progressive Web App)のイメージ
ひよこ ひよこ

PWAの何が嬉しいの?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

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

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

おもしろい!どうやって作るの?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

PWAは普及している?

ペンギン先生 ペンギン先生

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

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「PWA」って出てきたら「ネイティブアプリのように動くWebアプリ」と思えればだいたいOK!
📖 おまけ:英語の意味
「Progressive Web App」 = プログレッシブ ウェブ アプリ
💬 Progressive(段階的に)Web App(Webアプリ)を強化する技術だよ
← 用語集にもどる