PWAってなんだろう

Date2026/06/12 Last Modified2026/06/12

PWAとは

PWA(Progressive Web App)とは、Webアプリなのにモバイルアプリのように使える技術を指す。
ここで「モバイルアプリのように」とは具体的に何を指すのか、という疑問に至る。

ブラウザからホーム画面に追加してショートカットのように使うのかなと思っていたが、それとは少し違うようだ。
ショートカット化できるのはPWAも、ただのWebアプリも同じであり、最も大きな違いはOS上のアプリに近い形で起動・表示・再利用できることである。
Service WorkerやCache API、IndexedDBなどを実装していることで一部ローカルでの動作が可能になり、さらにブラウザのUIを非表示にしてアプリっぽく（スタンドアロン）表示できるようになるというのが強みなのだ。
しかもホーム画面に出るアイコンまで設定できるので、非常にアプリっぽい。

ちなみにSquooshというアプリがあるが、これはPWAを身近に体験できる。
Squoosh

ローカルなのに動くってどういうこと

PWAの重要な構成要素の一つに、Service WorkerというJSファイルがある。
PWA化されているWebアプリのDevtoolを開くと、Applicationにservice-workerとして登録されているのがわかる。

このサービスワーカーは、ページが必要とするHTML、CSS、JavaScript、画像、APIレスポンスなどの取得方法を制御し、localStorageやIndexedDBなどのリソースを使って動作する。
これらのローカルリソースの実体は、ブラウザの機能でローカルデバイスに保存されたファイルデータである。
すなわち、Webなのにオフラインでも繋がるという風に錯覚してしまうが、実のところはローカルに保存されたデータを参照して、プログラムとして動作しているだけなのだ。

ちなみに、スマホでもPCでも同じくPWAの恩恵を受けることができるが、特に恩恵が大きいのはスマホである。
特に通知などを活用したい場合は、ブラウザに比べて非常に体験を深めることができる。

PWAの利活用

PWAが最も有効な場面は、オフライン状態での作業とオンライン状態での同期が両方必要な場面である。

例えば、会員申込などをタブレットでやってもらって、その結果をサーバーで集計するような場合を想定してみよう。
まず、入力するときにブラウザで行ってしまうと誤操作のリスクだったり、操作性が悪かったりするかもしれない。
さらに、データを送信したにもかかわらずネットワークの不調で再入力になってしまうなど、体験を損なう可能性がある。

そこでPWAを使うとどうなるか。
PWAでインストールしたWebアプリケーションを、独自UIで入力してもらうことで、誤操作の危険を減らすことができる。
さらにネットワークが不安定でも、ローカルで一時的に入力内容を保持しておき、接続が確立したときに同期することができるのだ。

PWAのシステムを作る簡単な方法

PWAを構成するには、最小でたった3つのファイルがあればよい。

  • service-worker.js
  • manifest.json
  • index.html

以下は、ローカルの画面表示をもつPWAの最小構成である。

<!-- index.html -->
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="./manifest.json">
</head>
<body>
  <h1>Minimal PWA</h1>
  <p>これは最小構成のPWAです。</p>

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js');
    }
  </script>
</body>
</html>
<!-- manifest.json -->
{
  "name": "Minimal PWA",
  "short_name": "PWA",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
}
<!-- service-worker.js -->
const CACHE_NAME = 'minimal-pwa-v1';

const FILES_TO_CACHE = [
  './',
  './index.html',
  './manifest.json',
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(FILES_TO_CACHE);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      return cachedResponse || fetch(event.request);
    })
  );
});

まとめ

「モバイルアプリを作成できますか？」に対して「PWAが使えるのでできます！」というのは、さすがに見当違いということがわかった。
しかしクライアントが求める機能によっては、アプリの開発をするまでもなくWebの拡張で行けるケースもあるかもしれない。
そしてモバイル向けばかりではなく、PC向けの機能としても何か役立てる場面がありそうだと感じた。