PWA ​

// 主线程中注册 Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker
      .register('/sw.js')
      .then(function (registration) {
        console.log('Service Worker 注册成功: ', registration.scope)
      })
      .catch(function (error) {
        console.log('Service Worker 注册失败: ', error)
      })
  })
}

// sw.js - Service Worker 安装和激活
const CACHE_NAME = 'my-pwa-cache-v1'
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png',
]

// 安装阶段：预缓存关键资源
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
      console.log('已打开缓存')
      return cache.addAll(urlsToCache)
    })
  )
})

// 激活阶段：清理旧缓存
self.addEventListener('activate', function (event) {
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (cacheName) {
          if (cacheName !== CACHE_NAME) {
            console.log('删除旧缓存：', cacheName)
            return caches.delete(cacheName)
          }
        })
      )
    })
  )
})

// sw.js - 缓存策略实现
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      // 缓存命中 - 返回缓存内容
      if (response) {
        return response
      }

      // 克隆请求，因为请求是流，只能使用一次
      const fetchRequest = event.request.clone()

      return fetch(fetchRequest).then(function (response) {
        // 检查响应是否有效
        if (!response || response.status !== 200 || response.type !== 'basic') {
          return response
        }

        // 克隆响应，因为响应是流，只能使用一次
        const responseToCache = response.clone()

        caches.open(CACHE_NAME).then(function (cache) {
          // 将新资源加入缓存
          cache.put(event.request, responseToCache)
        })

        return response
      })
    })
  )
})

// 更精细的缓存策略：网络优先，失败时使用缓存
async function networkFirst(request) {
  try {
    const networkResponse = await fetch(request)
    const cache = await caches.open(CACHE_NAME)
    cache.put(request, networkResponse.clone())
    return networkResponse
  } catch (error) {
    const cachedResponse = await caches.match(request)
    return cachedResponse || Response.error()
  }
}

// 缓存优先，适用于静态资源
async function cacheFirst(request) {
  const cachedResponse = await caches.match(request)
  if (cachedResponse) {
    return cachedResponse
  }
  try {
    const networkResponse = await fetch(request)
    const cache = await caches.open(CACHE_NAME)
    cache.put(request, networkResponse.clone())
    return networkResponse
  } catch (error) {
    return Response.error()
  }
}

// 推送通知 API
function requestNotificationPermission() {
  return new Promise((resolve, reject) => {
    if (!('Notification' in window)) {
      reject(new Error('浏览器不支持通知'))
    } else if (Notification.permission === 'granted') {
      resolve('granted')
    } else if (Notification.permission !== 'denied') {
      Notification.requestPermission().then((permission) => {
        resolve(permission)
      })
    } else {
      reject(new Error('通知权限已被拒绝'))
    }
  })
}

function showLocalNotification(title, options) {
  if (Notification.permission === 'granted') {
    navigator.serviceWorker.ready.then((registration) => {
      registration.showNotification(title, options)
    })
  }
}

// 使用示例
document.getElementById('notify-btn').addEventListener('click', () => {
  requestNotificationPermission()
    .then(() => {
      showLocalNotification('欢迎使用PWA', {
        body: '这是一个推送通知示例',
        icon: '/icons/icon-192x192.png',
        badge: '/icons/badge-72x72.png',
        actions: [
          { action: 'like', title: '👍 喜欢' },
          { action: 'dismiss', title: '关闭' },
        ],
      })
    })
    .catch((error) => console.error(error))
})

// 后台同步 API
function registerBackgroundSync() {
  if ('serviceWorker' in navigator && 'SyncManager' in window) {
    navigator.serviceWorker.ready.then((registration) => {
      registration.sync
        .register('background-sync')
        .then(() => console.log('后台同步已注册'))
        .catch(() => console.log('后台同步注册失败'))
    })
  }
}

// 在 Service Worker 中处理后台同步
self.addEventListener('sync', (event) => {
  if (event.tag === 'background-sync') {
    event.waitUntil(doBackgroundSync())
  }
})

async function doBackgroundSync() {
  // 执行后台同步任务，如发送待发送的数据
  const pendingData = await getPendingData()
  for (const data of pendingData) {
    try {
      await sendToServer(data)
      await markAsSent(data.id)
    } catch (error) {
      console.error('同步失败:', error)
    }
  }
}

// 使用 Web Share API 实现内容分享
function shareContent(shareData) {
  if (navigator.share) {
    navigator
      .share(shareData)
      .then(() => console.log('分享成功'))
      .catch((error) => console.log('分享失败:', error))
  } else {
    // 降级方案：复制到剪贴板
    fallbackShare(shareData)
  }
}

// 使用示例
document.getElementById('share-btn').addEventListener('click', () => {
  shareContent({
    title: '我的PWA应用',
    text: '看看这个很棒的PWA应用!',
    url: window.location.href,
  })
})

// 检查 Service Worker 状态
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations().then((registrations) => {
    console.log(`已注册 ${registrations.length} 个 Service Worker`)
    registrations.forEach((registration) => {
      console.log('Scope:', registration.scope)
      console.log('状态:', registration.active ? '激活' : '未激活')
    })
  })
}

// 检查缓存内容
caches.keys().then((cacheNames) => {
  console.log('现有缓存:', cacheNames)
  cacheNames.forEach((cacheName) => {
    caches.open(cacheName).then((cache) => {
      cache.keys().then((requests) => {
        console.log(
          `缓存 ${cacheName} 中的内容:`,
          requests.map((req) => req.url)
        )
      })
    })
  })
})

// 监听 Service Worker 消息
navigator.serviceWorker.addEventListener('message', (event) => {
  console.log('收到来自 Service Worker 的消息:', event.data)
})

// 向 Service Worker 发送消息
function sendMessageToSW(message) {
  if (navigator.serviceWorker.controller) {
    navigator.serviceWorker.controller.postMessage(message)
  }
}

// 预缓存关键资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('critical-v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/main.js',
        '/images/hero-image.jpg',
      ])
    })
  )
})

// 延迟缓存非关键资源
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/')) {
    // API 请求：网络优先策略
    event.respondWith(networkFirst(event.request))
  } else if (event.request.destination === 'image') {
    // 图片：缓存优先，后台更新
    event.respondWith(cacheFirst(event.request))
  } else {
    // 其他资源：网络优先
    event.respondWith(networkFirst(event.request))
  }
})

// 使用 Workbox 简化 PWA 开发
importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
)

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30天
      }),
    ],
  })
)

workbox.routing.registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new workbox.strategies.NetworkFirst({
    cacheName: 'api-responses',
    networkTimeoutSeconds: 3,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 5 * 60, // 5分钟
      }),
    ],
  })
)