PWA（プログレッシブウェブアプリ）

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" }
  ]
}