Progressive Web App（PWA）は、Webアプリケーションにネイティブアプリのような体験を提供する技術です。オフライン対応、プッシュ通知、ホーム画面への追加といった機能により、Webとネイティブの境界を曖昧にします。開発コストの面でも、iOS・Android向けに別々のアプリを開発する必要がなく、単一のコードベースで両プラットフォームをカバーできる点が魅力です。
TwitterのPWA（Twitter Lite）はページあたりのデータ消費量を70%削減し、エンゲージメントを65%向上させました。こうした成功事例が示すように、PWAは特にネットワーク環境が不安定な地域や、アプリストア経由の配布が難しいケースで大きな効果を発揮します。
PWAの核となるのがService Workerです。ブラウザとネットワークの間に位置するプロキシとして動作し、キャッシュ制御やプッシュ通知を実現します。
入会申込
ログイン// main.js - Service Workerの登録
if ('serviceWorker' in navigator) {
window.addEventListener('load', async () => {
try {
const registration = await navigator.serviceWorker.register('/sw.js');
console.log('SW registered:', registration.scope);
} catch (error) {
console.error('SW registration failed:', error);
}
});
}
次に、Service Worker本体でキャッシュ戦略を実装します。
// sw.js
const CACHE_NAME = 'app-v1';
const ASSETS = [
'/',
'/index.html',
'/styles.css',
'/app.js',
'/icons/icon-192.png'
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(ASSETS))
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then(cached => cached || fetch(event.request))
);
});
install イベントで静的アセットをプリキャッシュし、fetchイベントでキャッシュファーストの戦略を適用しています。
実際のアプリケーションでは、リソースの種類に応じて異なるキャッシュ戦略を使い分けます。静的アセットにはCache First、APIレスポンスにはNetwork First、画像にはStale While Revalidateが適しています。Workboxライブラリを使うと、これらの戦略を宣言的に設定できます。
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new StaleWhileRevalidate({ cacheName: 'images' })
);
registerRoute(
({url}) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api-cache', networkTimeoutSeconds: 3 })
);
プッシュ通知はユーザーのリエンゲージメントに効果的です。まずユーザーの許可を取得し、サブスクリプションをサーバーに送信します。サーバー側ではWeb Push Protocolに準拠したライブラリ（web-pushなど）を使ってプッシュメッセージを送信し、Service Workerのpushイベントで受信して通知を表示します。
通知の頻度や内容には十分配慮が必要です。過度な通知はユーザーのブロックにつながるため、本当に価値のある情報のみを送信すべきです。
ホーム画面への追加やスプラッシュスクリーンの表示には、Web App Manifestが必要です。アプリ名、アイコン、テーマカラー、表示モードなどをJSON形式で定義します。display属性をstandaloneに設定することで、ブラウザのUIなしでアプリのように表示されます。PWAの導入は段階的に進められるため、まずはService Workerによるキャッシュから始めて、徐々に機能を追加していくのが現実的なアプローチです。
