【フロントエンド入門25】PWA（プログレッシブWebアプリ）の基礎｜オフラインでも動くアプリの作り方

Webアプリケーションは、インターネット接続が必要な場合が多いですが、近年ではオフラインでも動作し、ネイティブアプリのようなユーザー体験を提供するPWA（プログレッシブWebアプリ）が注目されています。本記事では、PWAの基本と、オフラインでも動作するアプリの構築方法を初心者向けに解説します。

PWAとは？
1. PWAの概要
2. PWAの主な特徴
PWAを構築するための基本要素
サービスワーカーの登録とキャッシュ
プッシュ通知の設定（オプション）
1. 基本的なプッシュ通知の流れ
PWAのテストとデプロイ
1. 1. ローカル環境でのテスト
2. 2. デプロイ
結論

PWAとは？

PWAの概要

PWA（Progressive Web App）とは、Webアプリケーションにネイティブアプリのような機能を持たせた技術のことです。PWAを導入することで、オフライン対応やホーム画面へのアイコン追加、プッシュ通知などが可能になります。

PWAの主な特徴

オフラインでも動作：ネットワーク接続が切れても、キャッシュされたデータを利用してアプリを使用できます。
インストール可能：ホーム画面にアイコンを追加し、ネイティブアプリのように起動できます。
高速な読み込み：キャッシュ機能により、ページの表示が速くなります。
プッシュ通知：ユーザーに通知を送信でき、再訪問を促します。

PWAを構築するための基本要素

1. HTTPSでの配信

PWAは安全な通信を行うため、必ずHTTPSで配信する必要があります。ほとんどのブラウザでPWAの機能はHTTPS環境下でのみ有効になります。

2. Webアプリマニフェスト

マニフェストファイル（manifest.json）は、アプリの名前、アイコン、起動方法などを定義する設定ファイルです。ユーザーがホーム画面にアプリを追加するときに、この情報が使われます。

例：`manifest.json`

{
  "name": "PWAサンプルアプリ",
  "short_name": "PWAサンプル",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0000ff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

解説

nameとshort_name：アプリの名前を設定します。
start_url：アプリ起動時に開くURLを指定します。
display：アプリがどのように表示されるか（standaloneはネイティブアプリのような表示）。
icons：ホーム画面用のアイコン画像を指定します。

3. サービスワーカー

サービスワーカーは、バックグラウンドで動作するJavaScriptファイルで、オフラインキャッシュやプッシュ通知などの機能を提供します。

サービスワーカーの登録とキャッシュ

1. サービスワーカーの登録

サービスワーカーは、Webアプリの最初の読み込み時に登録されます。

`index.html`の例

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/service-worker.js')
        .then(function(registration) {
          console.log('サービスワーカーが登録されました:', registration);
        })
        .catch(function(error) {
          console.log('サービスワーカーの登録に失敗しました:', error);
        });
    });
  }
</script>

解説

navigator.serviceWorker.register()：サービスワーカーを登録するメソッド。
window.addEventListener('load')：ページが読み込まれたときにサービスワーカーを登録します。

2. サービスワーカーによるキャッシュ

サービスワーカーを使って、アプリの静的ファイルをキャッシュし、オフライン時に利用できるようにします。

`service-worker.js`の例

const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icons/icon-192x192.png'
];

// インストールイベントでキャッシュを作成
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('キャッシュが作成されました');
        return cache.addAll(urlsToCache);
      })
  );
});

// リクエスト時にキャッシュを使用
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        return response || fetch(event.request);
      })
  );
});

解説

installイベント：サービスワーカーがインストールされる際に呼び出され、指定したリソースをキャッシュします。
fetchイベント：ネットワークリクエストが行われるたびに呼び出され、キャッシュされたデータを優先的に返します。

プッシュ通知の設定（オプション）

PWAでは、プッシュ通知を設定することで、ユーザーに重要な情報をリアルタイムで伝えることができます。

基本的なプッシュ通知の流れ

ユーザーの許可を取得。
サーバーからプッシュ通知を送信。
サービスワーカーが通知を表示。

例：プッシュ通知の基本コード

self.addEventListener('push', function(event) {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icons/icon-192x192.png'
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});