PWA(プログレッシブウェブアプリ)
Service WorkerやWeb App Manifestを使い、Webアプリにネイティブアプリに近い体験を提供する技術。オフライン動作・ホーム画面への追加・プッシュ通知が実現できる。
PWA(Progressive Web App)とは?
PWA(Progressive Web App)は、Webブラウザの標準技術を使いながら、ネイティブアプリに近い体験を提供するWebアプリケーションの設計概念です。Googleが2015年頃から提唱しています。
PWAの主要技術
| 技術 | 役割 |
|---|---|
| Service Worker | バックグラウンドで動作するJSスクリプト。オフラインキャッシュ・プッシュ通知を実現 |
| Web App Manifest | アプリ名・アイコン・起動画面・テーマカラーをJSON定義 |
| HTTPS | Service Workerの動作に必須 |
PWAでできること
- オフライン動作: Service WorkerがリソースをキャッシュしてWi-Fiなしでも表示
- ホーム画面への追加: ブラウザから「ホームに追加」でアプリアイコンとして起動
- プッシュ通知: ネイティブアプリと同様の通知を送信
- バックグラウンド同期: オフライン中の操作をオンライン復帰後に自動送信
Web App Manifest の例
{
"name": "Lapis Tech Tools",
"short_name": "LapisTool",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1ebbbd",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
まとめ
PWAは「App Storeに公開せずにアプリ体験を提供したい」ニーズに応えます。特にオフラインキャッシュとホーム画面追加は導入コストが低く効果的です。
関連する用語 (プログラミング)
全33件を見るESLint
JavaScriptとTypeScriptのコードを静的解析し、潜在的なバグや規約違反を検出するリンター。プロジェクト全体で一貫したコードスタイルを強制し、コードレビューの負担を軽減する。
ヘッドレスCMS
表示用フロントエンド(ヘッド)を持たず、コンテンツ管理とAPIによるデータ提供に特化したCMS。Next.js・Astro等の任意のフロントエンドと組み合わせてJAMstack構成を実現する。
SPA(シングルページアプリケーション)
ページ遷移時にブラウザをリロードせず、JavaScriptで動的にコンテンツを更新するWebアプリのアーキテクチャ。React・Vue・Angularで実装されることが多い。
Webpack(ウェブパック)
JavaScriptアプリの依存関係を解析して複数のファイルを1つ(または少数)のバンドルにまとめるモジュールバンドラー。CSS・画像等も処理でき、フロントエンドビルドツールの長年の標準。
GraphQL
FacebookがRESTの課題を解決するために開発したAPIクエリ言語。クライアントが必要なデータの形を宣言的に指定して取得でき、オーバーフェッチ・アンダーフェッチを解消する。
SSG(静的サイトジェネレーター)
ビルド時にすべてのページをHTMLとして事前生成する手法。サーバーが不要なため高速・安全・低コストで、ブログ・ドキュメントサイト・ランディングページに最適。