MENU
暮らしを少し便利にするアプリとサービスを作っています
  1. ホーム
  2. Flutter
  3. service-worker.jsとmanifest.json

service-worker.jsとmanifest.json

Flutter

service-worker.jsとmanifest.jsonはPWAの必須要件！！

目次

PWAの3つの必須要件

PWAとして認識されるために:

✅ manifest.json（必須）
→ インストール可能にする
→ アプリの情報を定義

✅ service-worker.js（必須）
→ オフライン対応
→ キャッシュ管理

✅ HTTPS（必須）
→ セキュリティのため
→ localhostは例外

この3つが揃って初めて「PWA」!

manifest.json の役割

これがないと:

❌ インストールボタンが表示されない
❌ ホーム画面に追加できない
❌ アプリっぽく起動しない
❌ スプラッシュスクリーンが出ない
❌ アプリ名が表示されない

→ ただのWebサイト

これがあると:

✅ インストールボタンが表示される
✅ ホーム画面/アプリフォルダに追加
✅ 独立したウィンドウで起動
✅ アプリ名とアイコンが設定される
✅ スプラッシュスクリーンが表示される
✅ テーマカラーが適用される

→ PWAとして認識される!

manifest.jsonの中身（重要な部分）:

{
  "name": "My First PWA",           // アプリの正式名称
  "short_name": "First PWA",        // 短い名前（アイコン下）
  "start_url": "/",                 // 起動時のURL
  "display": "standalone",          // ⭐ 重要！アプリっぽく表示
  "theme_color": "#2196F3",         // テーマカラー
  "background_color": "#ffffff",    // 背景色
  "icons": [ ... ]                  // アイコン（必須）
}

display の値:

“standalone” ⭐ おすすめ
→ アプリっぽく（ブラウザUIなし）
→ Dockに表示される
→ 独立したウィンドウ

“fullscreen”
→ 全画面（ゲームなど）

“minimal-ui”
→ 最小限のブラウザUI

“browser”
→ 普通のブラウザ（PWAの意味がない）

service-worker.js の役割

これがないと:

❌ オフライン対応できない
❌ キャッシュ管理できない
❌ バックグラウンド動作できない
❌ プッシュ通知できない

→ 普通のWebサイト
→ PWAとして認識されない場合も

これがあると:

✅ オフラインでも動く
✅ 2回目以降が超速い
✅ バックグラウンドで同期
✅ プッシュ通知を受け取れる

→ PWAの核心的機能!

Service Workerの3つのイベント:

// 1. install（初回のみ）
self.addEventListener('install', (event) => {
  // キャッシュにファイルを保存
});

// 2. activate（更新時）
self.addEventListener('activate', (event) => {
  // 古いキャッシュを削除
});

// 3. fetch（リクエストごと）
self.addEventListener('fetch', (event) => {
  // リクエストをインターセプト
  // キャッシュから返すか、サーバーから取得
});

この3つだけ! シンプル

最小限のPWA

📁 minimal-pwa/
  ├─ 📄 index.html
  ├─ 📄 manifest.json  ← 必須
  ├─ 📄 service-worker.js  ← 必須
  └─ 🖼️ icon.png（192x192以上）← 必須

最小限の manifest.json:

{
  "name": "Minimal PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [{
    "src": "/icon.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

これだけでPWAとして認識される!

最小限の service-worker.js:

// 超シンプル版（ほぼ何もしない）
self.addEventListener('install', () => {
  console.log('Service Worker installed');
});

self.addEventListener('fetch', (event) => {
  // ネットワークリクエストをそのまま通す
  event.respondWith(fetch(event.request));
});

これだけでもPWAとして認識される!

なぜ簡単なのか

1. 構造がシンプル
HTMLファイル + JSON2つ = PWA

複雑なフレームワーク不要
複雑な設定不要
シンプルなファイル構成

2. Webの技術がそのまま使える

✅ HTML → そのまま
✅ CSS → そのまま
✅ JavaScript → そのまま

新しい言語を覚える必要なし!

3. 段階的に機能追加できる

最初: 基本的なPWA
↓
追加: オフライン対応を強化
↓
追加: プッシュ通知
↓
追加: バックグラウンド同期

→ 少しずつ進められる!

🎯 Flutter Web との関係


Flutter Web でも同じ:

Flutter Web プロジェクト:
├─ web/
├─ index.html
├─ manifest.json ← これを編集
├─ icons/
└─ （flutter build web で生成されるファイル）

追加するだけ:
└─ web/
└─ service-worker.js ← これを追加

→ Flutter Web も PWA 化できる!

比較表

要素必須?役割なくても動く?
manifest.json✅ 必須インストール可能に❌ PWAとして認識されない
service-worker.js✅ 必須オフライン対応❌ PWAとして認識されない
HTTPS✅ 必須セキュリティ❌ 動かない（localhostは例外）
アイコン画像✅ 必須アプリとして表示△ 警告が出る
HTML/CSS/JS✅ 必須アプリ本体❌ 何も表示されない

さらなる応用

□ 高度なキャッシュ戦略

  • Cache First
  • Network First
  • Stale While Revalidate

□ プッシュ通知
　ユーザーへの通知

□ バックグラウンド同期
　オフラインで記録した変更を後で同期

□ ライブラリの活用
　　Workbox（Google製）
　　　→ Service Workerをもっと簡単に

Flutter
目次