service worker 检查与配置

浏览器中service worker 检查与配置

[TOC]

当 `navigator.serviceWorker` 为 `undefined` 时，说明当前浏览器环境不支持 Service Worker。以下是解决方案和排查步骤：

## 1. **必要条件检查**
Service Worker 需要以下条件才能正常运行：

### **A. 协议要求**
- ✅ **必须使用 HTTPS**（localhost 和 127.0.0.1 除外）
- ❌ HTTP 不支持（开发环境可用 localhost）

### **B. 浏览器兼容性**
- ✅ **现代浏览器**：Chrome 40+、Firefox 44+、Edge 17+、Safari 11.1+
- ❌ **不支持**：IE、旧版 Safari、某些隐私模式

### **C. 安全上下文**
```javascript
// 检查是否在安全上下文中
if (window.isSecureContext) {
  // 安全上下文，可以注册 Service Worker
} else {
  console.log('需要 HTTPS 或 localhost');
}
```

## 2. **完整检测代码**
```javascript
// 综合检测函数
function isServiceWorkerSupported() {
  // 1. 检查 navigator.serviceWorker 是否存在
  if (!('serviceWorker' in navigator)) {
    console.error('浏览器不支持 Service Worker API');
    return false;
  }
  
  // 2. 检查是否在安全上下文中
  if (!window.isSecureContext && 
      !window.location.hostname.includes('localhost') && 
      !window.location.hostname.includes('127.0.0.1')) {
    console.error('Service Worker 需要 HTTPS 或 localhost');
    return false;
  }
  
  // 3. 检查是否在隐私模式下
  if (navigator.userAgent.includes('Firefox') && 
      navigator.serviceWorker.controller === null) {
    console.warn('Firefox 隐私模式可能限制 Service Worker');
  }
  
  return true;
}

// 使用示例
if (isServiceWorkerSupported()) {
  // 注册 Service Worker
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker 注册成功:', registration);
    })
    .catch(error => {
      console.error('Service Worker 注册失败:', error);
    });
}
```

## 3. **本地开发环境配置**
### **使用 localhost**
```bash
# 使用 Python 启动本地服务器
python -m http.server 8000

# 或使用 http-server（Node.js）
npx http-server -p 8000 --cors
```

### **配置自签名 HTTPS（本地开发）**
```bash
# 使用 mkcert 创建本地证书
# 1. 安装 mkcert
# 2. 生成证书
mkcert -install
mkcert localhost

# 3. 使用 HTTPS 服务器
npx https-server -p 443 -S -C localhost.pem -K localhost-key.pem
```

## 4. **具体场景解决方案**

### **场景 1：开发环境（HTTP）**
```javascript
// 开发环境特定处理
if (window.location.hostname === 'localhost' || 
    window.location.hostname === '127.0.0.1') {
  // 开发环境，即使 HTTP 也尝试注册
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then(() => console.log('Service Worker 注册成功（开发环境）'))
      .catch(e => console.log('开发环境注册失败:', e));
  }
}
```

### **场景 2：生产环境部署**
```nginx
# Nginx 配置 HTTPS
server {
    listen 443 ssl;
    server_name yourdomain.com;
    
    ssl_certificate /path/to/certificate.crt;
    ssl_certificate_key /path/to/private.key;
    
    # 强制 HTTPS
    add_header Strict-Transport-Security "max-age=31536000" always;
    
    location / {
        root /var/www/your-app;
        index index.html;
    }
}
```

### **场景 3：浏览器兼容性处理**
```javascript
// 渐进增强方案
function setupServiceWorker() {
  // 检查支持性
  if (!('serviceWorker' in navigator)) {
    // 不支持 Service Worker 的降级方案
    console.log('当前浏览器不支持 PWA 功能');
    showFallbackMessage();
    return;
  }
  
  // 检查安全上下文
  if (!window.isSecureContext && 
      window.location.protocol !== 'http:' &&
      !['localhost', '127.0.0.1'].includes(window.location.hostname)) {
    console.log('请使用 HTTPS 访问以获得完整功能');
    return;
  }
  
  // 正常注册
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js', {
      scope: '/'
    }).then(registration => {
      console.log('SW registered:', registration);
    }).catch(registrationError => {
      console.log('SW registration failed:', registrationError);
    });
  });
}

// 启动
setupServiceWorker();
```

## 5. **常见问题排查表**

| 问题 | 检查项 | 解决方案 |
|------|--------|----------|
| `navigator.serviceWorker` 为 `undefined` | 1. 浏览器版本<br>2. 是否为隐私模式<br>3. 浏览器设置 | 1. 更新浏览器<br>2. 退出隐私模式<br>3. 检查浏览器标志 |
| 注册成功但无法工作 | 1. Service Worker 文件路径<br>2. 缓存策略<br>3. 更新机制 | 1. 确保 sw.js 文件存在<br>2. 检查 fetch 事件监听<br>3. 清理旧 Service Worker |
| HTTPS 证书问题 | 1. 证书有效性<br>2. 证书链完整性 | 1. 使用有效证书<br>2. 检查证书链 |

## 6. **浏览器特定设置**
### **Chrome**
```
chrome://flags/#unsafely-treat-insecure-origin-as-secure
# 添加本地 HTTP 地址到白名单（仅开发）
```

### **Firefox**
```
about:config
# 将 dom.serviceWorkers.enabled 设为 true
```

## 7. **最佳实践建议**
1. **始终先检测再使用**
2. **提供降级方案**（对不支持的用户）
3. **在 `window.onload` 后注册**，避免影响页面加载
4. **明确控制 Service Worker 范围**
5. **实现更新策略**

## 8. **完整的生产级示例**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PWA 应用</title>
    <link rel="manifest" href="/manifest.json">
</head>
<body>
    <div id="app"></div>
    
    <script>
        // 检测并注册 Service Worker
        (function() {
            // 功能检测
            const isLocalhost = Boolean(
                window.location.hostname === 'localhost' ||
                window.location.hostname === '127.0.0.1' ||
                window.location.hostname === '[::1]' ||
                window.location.hostname.match(/^192\.168\.\d+\.\d+$/)
            );
            
            // 注册函数
            function registerValidSW(swUrl) {
                navigator.serviceWorker
                    .register(swUrl)
                    .then(registration => {
                        registration.onupdatefound = () => {
                            const installingWorker = registration.installing;
                            if (installingWorker == null) return;
                            
                            installingWorker.onstatechange = () => {
                                if (installingWorker.state === 'installed') {
                                    if (navigator.serviceWorker.controller) {
                                        console.log('新内容已就绪，请刷新');
                                    } else {
                                        console.log('内容已缓存，可离线使用');
                                    }
                                }
                            };
                        };
                    })
                    .catch(error => {
                        console.error('Service Worker 注册错误:', error);
                    });
            }
            
            // 检查并注册
            function checkAndRegister() {
                // 检查支持性
                if (!('serviceWorker' in navigator)) {
                    console.warn('当前浏览器不支持 Service Worker');
                    return;
                }
                
                // 检查协议（生产环境需要 HTTPS）
                if (!isLocalhost && window.location.protocol !== 'https:') {
                    console.warn('生产环境需要使用 HTTPS');
                    return;
                }
                
                // 页面加载完成后注册
                window.addEventListener('load', () => {
                    const swUrl = '/sw.js';
                    
                    if (isLocalhost) {
                        // 本地开发：检查文件是否存在
                        fetch(swUrl)
                            .then(response => {
                                if (response.ok) {
                                    registerValidSW(swUrl);
                                } else {
                                    console.log('Service Worker 文件未找到');
                                }
                            })
                            .catch(() => {
                                console.log('无法连接服务器');
                            });
                    } else {
                        registerValidSW(swUrl);
                    }
                });
            }
            
            // 执行检查
            checkAndRegister();
        })();
    </script>
</body>
</html>
```

通过以上步骤，您应该能够解决 Service Worker 不支持的问题。如果问题依旧，请检查控制台错误信息，通常会有更具体的提示。