PWA & Service Workers 2026 — Workbox 7 / vite-pwa / Capacitor / TWA / iOS Web Push / Storage Buckets 深掘りガイド

[Webページ]
   |
   v
1. Manifest (web app manifest)  -- アイコン・名前・テーマ・display:standalone
   |
   v
2. Service Worker               -- バックグラウンドスレッド・キャッシュ・インターセプト
   |
   v
3. HTTPS                        -- Service Workerの前提
   |
   v
4. Installable                  -- ホーム画面追加・beforeinstallprompt
   |
   v
5. Capable APIs                 -- Push・Notification・Bluetooth・FS Access・...

// 1) パーミッション要求 — 必ずユーザージェスチャ（click）内で
button.addEventListener('click', async () => {
  const permission = await Notification.requestPermission()
  if (permission !== 'granted') return

  const reg = await navigator.serviceWorker.ready
  const subscription = await reg.pushManager.subscribe({
    userVisibleOnly: true, // iOSではtrue必須
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY),
  })

  // 購読情報をサーバーへ送信
  await fetch('/api/push/subscribe', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify(subscription),
  })
})

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
  const raw = atob(base64)
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)))
}

// sw.js
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? { title: 'New', body: '' }
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icons/icon-192.png',
      badge: '/icons/badge-72.png',
      data: { url: data.url },
    })
  )
})

self.addEventListener('notificationclick', (event) => {
  event.notification.close()
  event.waitUntil(clients.openWindow(event.notification.data.url))
})

register
   |
   v
parse install   --(skipWaiting?)--> activate
   |                                    |
   |                                    v
   |                                  fetch / push / sync / message
   |                                    |
   |                                    v
   |                                  ... 新バージョンinstall
   |                                    |
   |                                    v
   |                              waiting (oldがcontrol中)
   |                                    |
   +-- update found ---------------------+

// sw.js
const CACHE_VERSION = 'v2026-05-16'
const PRECACHE = `precache-${CACHE_VERSION}`
const RUNTIME = `runtime-${CACHE_VERSION}`

const PRECACHE_URLS = ['/', '/offline.html', '/styles.css', '/app.js']

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches
      .open(PRECACHE)
      .then((cache) => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting())
  )
})

self.addEventListener('activate', (event) => {
  const valid = new Set([PRECACHE, RUNTIME])
  event.waitUntil(
    caches
      .keys()
      .then((keys) => Promise.all(keys.filter((k) => !valid.has(k)).map((k) => caches.delete(k))))
      .then(() => self.clients.claim())
  )
})

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url)
  if (event.request.method !== 'GET') return
  if (url.origin !== self.location.origin) return

  // ネットワーク優先、失敗したらキャッシュ
  event.respondWith(
    fetch(event.request)
      .then((res) => {
        const copy = res.clone()
        caches.open(RUNTIME).then((cache) => cache.put(event.request, copy))
        return res
      })
      .catch(() => caches.match(event.request).then((r) => r || caches.match('/offline.html')))
  )
})

// sw.js
import { precacheAndRoute } from 'workbox-precaching'
import { registerRoute } from 'workbox-routing'
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'
import { ExpirationPlugin } from 'workbox-expiration'

// ビルド時に注入されるマニフェスト（vite-pwa / next-pwa が自動で埋める）
precacheAndRoute(self.__WB_MANIFEST)

// 画像 — キャッシュ優先、30日保持、最大60件
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [new ExpirationPlugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60 })],
  })
)

// API — ネットワーク優先、3秒タイムアウト、失敗時はキャッシュ
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
)

// ページ — Stale-While-Revalidate（古いキャッシュを即返し、バックグラウンドで更新）
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new StaleWhileRevalidate({ cacheName: 'pages' })
)

// vite.config.ts
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate', // 新SW発見時に自動更新
      injectRegister: 'auto',
      workbox: {
        globPatterns: ['**/*.{js,css,html,svg,png,ico,woff2}'],
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\.example\.com\//,
            handler: 'NetworkFirst',
            options: { cacheName: 'api', networkTimeoutSeconds: 3 },
          },
        ],
      },
      manifest: {
        name: 'My App',
        short_name: 'MyApp',
        theme_color: '#000000',
        background_color: '#ffffff',
        display: 'standalone',
        icons: [
          { src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png' },
          {
            src: '/icons/maskable-512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'maskable',
          },
        ],
      },
    }),
  ],
})

import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
  onNeedRefresh() {
    if (confirm('新しいバージョンがあります。リロードしますか？')) updateSW(true)
  },
  onOfflineReady() {
    console.log('オフラインで利用可能です')
  },
})

// next.config.js
const withPWA = require('@ducanh2912/next-pwa').default({
  dest: 'public',
  cacheOnFrontEndNav: true, // App Routerナビゲーションをキャッシュ
  aggressiveFrontEndNavCaching: true,
  reloadOnOnline: true,
  swcMinify: true,
  workboxOptions: {
    disableDevLogs: true,
  },
})

module.exports = withPWA({
  reactStrictMode: true,
})

// astro.config.mjs
import AstroPWA from '@vite-pwa/astro'

export default {
  integrations: [
    AstroPWA({
      registerType: 'autoUpdate',
      manifest: { /* ... */ },
      workbox: { /* ... */ },
    }),
  ],
}

# 新規Capacitorプロジェクト（既存Webアプリに被せる）
npm i @capacitor/core @capacitor/cli
npx cap init my-app com.example.myapp --web-dir=dist

npm i @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

# ビルド後同期
npm run build
npx cap sync
npx cap open ios   # Xcodeを開く
npx cap open android  # Android Studioを開く

import { Camera, CameraResultType } from '@capacitor/camera'

const photo = await Camera.getPhoto({
  quality: 90,
  allowEditing: false,
  resultType: CameraResultType.Uri,
})
imgElement.src = photo.webPath

npm i -g @pwabuilder/cli

# Androidパッケージ生成（TWA）
pwabuilder package --type android --url https://example.com

# iOSパッケージ生成
pwabuilder package --type ios --url https://example.com

# Windowsパッケージ生成
pwabuilder package --type windows --url https://example.com

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.myapp",
      "sha256_cert_fingerprints": [
        "AA:BB:CC:..."
      ]
    }
  }
]

npm i -g @bubblewrap/cli

bubblewrap init --manifest https://example.com/manifest.webmanifest
bubblewrap build
# → app-release-signed.aab 生成

// ファイルを開く
const [handle] = await window.showOpenFilePicker({
  types: [{ description: 'Text', accept: { 'text/plain': ['.txt', '.md'] } }],
})
const file = await handle.getFile()
const text = await file.text()

// 同じファイルに書き戻す（追加パーミッション不要）
const writable = await handle.createWritable()
await writable.write(text + '\n編集済み')
await writable.close()

// ディレクトリ全体
const dirHandle = await window.showDirectoryPicker()
for await (const [name, entry] of dirHandle.entries()) {
  console.log(name, entry.kind) // 'file' または 'directory'
}

// ポリフィルライブラリ — browser-fs-access (Google)
import { fileOpen, fileSave } from 'browser-fs-access'

const blob = await fileOpen({ extensions: ['.txt'] })
// どこでも動く。Chrome ではFile System Access、それ以外はinput/Blobフォールバック。

// メインページ
const reg = await navigator.serviceWorker.ready
await reg.sync.register('send-message')

// sw.js
self.addEventListener('sync', (event) => {
  if (event.tag === 'send-message') {
    event.waitUntil(flushPendingMessages())
  }
})

const status = await navigator.permissions.query({ name: 'periodic-background-sync' })
if (status.state === 'granted') {
  await reg.periodicSync.register('refresh-feed', { minInterval: 24 * 60 * 60 * 1000 })
}

const device = await navigator.bluetooth.requestDevice({
  filters: [{ services: ['heart_rate'] }],
})
const server = await device.gatt.connect()
const service = await server.getPrimaryService('heart_rate')
const characteristic = await service.getCharacteristic('heart_rate_measurement')
characteristic.addEventListener('characteristicvaluechanged', (event) => {
  console.log('HR:', event.target.value.getUint8(1))
})
await characteristic.startNotifications()

const device = await navigator.usb.requestDevice({ filters: [{ vendorId: 0x2341 }] })
await device.open()
await device.selectConfiguration(1)
await device.claimInterface(0)
const result = await device.transferIn(1, 64)

await navigator.share({
  title: 'My PWA',
  text: 'これ見て',
  url: 'https://example.com',
})

// バケット生成
const userDataBucket = await navigator.storageBuckets.open('user-data', {
  durability: 'strict', // 絶対に失わない
  persisted: true, // 永続パーミッション
  quota: 100 * 1024 * 1024, // 100MB
})

// Cache・IDB・SWを各バケットで別々に
const cache = await userDataBucket.caches.open('user-files')
const idb = await userDataBucket.indexedDB.open('users', 1)
const sw = await userDataBucket.getDirectory() // OPFS

// 一時バケット — ユーザーがパスワードを忘れたとき一緒に消す
const tempBucket = await navigator.storageBuckets.open('temp-uploads', {
  durability: 'relaxed',
  persisted: false,
})

// バケット削除 — origin全体ではなく、このバケットだけ
await navigator.storageBuckets.delete('temp-uploads')

@view-transition {
  navigation: auto;
}

/* product-list.html */
.product-card img {
  view-transition-name: product-image;
}

/* product-detail.html */
.product-detail img {
  view-transition-name: product-image;
}

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/product/*" }, "eagerness": "moderate" }
  ],
  "prefetch": [
    { "where": { "href_matches": "/category/*" } }
  ]
}
</script>