vf_react/src/index.js

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
// 导入 Tailwind CSS 和 Brainwave 样式
import './styles/brainwave.css';
import './styles/brainwave-colors.css';

// 导入 Bytedesk 客服系统 z-index 覆盖样式（必须在所有样式之后导入）
import './styles/bytedesk-override.css';

// Import the main App component
import App from './App';

// 导入通知服务并挂载到 window（用于调试）
import { browserNotificationService } from './services/browserNotificationService';
window.browserNotificationService = browserNotificationService;

// 🔧 条件导入调试工具（生产环境可选）
// 开启方式: 在 .env 文件中设置 REACT_APP_ENABLE_DEBUG=true
// 移除方式: 删除此段代码 + 删除 src/devtools/ 目录
if (process.env.REACT_APP_ENABLE_DEBUG === 'true') {
    import('./devtools').then(({ debugToolkit }) => {
        debugToolkit.init();
        console.log(
            '%c✅ 调试工具已加载！使用 window.__DEBUG__.help() 查看命令',
            'color: #4CAF50; font-weight: bold; font-size: 14px;'
        );
    });
}

// 注册 Service Worker（用于支持浏览器通知）
function registerServiceWorker() {
    // ⚠️ Mock 模式下跳过 Service Worker 注册（避免与 MSW 冲突）
    if (process.env.REACT_APP_ENABLE_MOCK === 'true') {
        console.log(
            '%c[App] Mock 模式已启用，跳过通知 Service Worker 注册（避免与 MSW 冲突）',
            'color: #FF9800; font-weight: bold;'
        );
        return;
    }

    // 仅在支持 Service Worker 的浏览器中注册
    if ('serviceWorker' in navigator) {
        // 在页面加载完成后注册
        window.addEventListener('load', () => {
            navigator.serviceWorker
                .register('/service-worker.js')
                .then((registration) => {
                    console.log('[App] ✅ Service Worker 注册成功');
                    console.log('[App] Scope:', registration.scope);

                    // 检查当前激活状态
                    if (navigator.serviceWorker.controller) {
                        console.log('[App] ✅ Service Worker 已激活并控制页面');
                    } else {
                        console.log('[App] ⏳ Service Worker 已注册，等待激活...');
                        console.log('[App] 💡 刷新页面以激活 Service Worker');

                        // 监听 controller 变化（Service Worker 激活后触发）
                        navigator.serviceWorker.addEventListener('controllerchange', () => {
                            console.log('[App] ✅ Service Worker 控制器已更新');
                        });
                    }

                    // 监听 Service Worker 更新
                    registration.addEventListener('updatefound', () => {
                        const newWorker = registration.installing;
                        console.log('[App] 🔄 发现 Service Worker 更新');

                        if (newWorker) {
                            newWorker.addEventListener('statechange', () => {
                                console.log(`[App] Service Worker 状态: ${newWorker.state}`);
                                if (newWorker.state === 'activated') {
                                    console.log('[App] ✅ Service Worker 已激活');

                                    // 如果有旧的 Service Worker 在控制页面，提示用户刷新
                                    if (navigator.serviceWorker.controller) {
                                        console.log('[App] 💡 Service Worker 已更新，建议刷新页面');
                                    }
                                }
                            });
                        }
                    });
                })
                .catch((error) => {
                    console.error('[App] ❌ Service Worker 注册失败');
                    console.error('[App] 错误类型:', error.name);
                    console.error('[App] 错误信息:', error.message);
                    console.error('[App] 完整错误:', error);

                    // 额外检查：验证文件是否可访问
                    fetch('/service-worker.js', { method: 'HEAD' })
                        .then(response => {
                            if (response.ok) {
                                console.error('[App] Service Worker 文件存在但注册失败');
                                console.error('[App] 💡 可能的原因:');
                                console.error('[App]    1. Service Worker 文件有语法错误');
                                console.error('[App]    2. 浏览器不支持某些 Service Worker 特性');
                                console.error('[App]    3. HTTPS 证书问题（Service Worker 需要 HTTPS）');
                            } else {
                                console.error('[App] Service Worker 文件不存在（HTTP', response.status, '）');
                            }
                        })
                        .catch(fetchError => {
                            console.error('[App] 无法访问 Service Worker 文件:', fetchError.message);
                        });
                });
        });
    } else {
        console.warn('[App] Service Worker is not supported in this browser');
    }
}

// 启动 Mock Service Worker（如果启用）
async function startApp() {
    // 只在开发环境启动 MSW
    if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_ENABLE_MOCK === 'true') {
        const { startMockServiceWorker } = await import('./mocks/browser');
        await startMockServiceWorker();
    }

    // Create root
    const root = ReactDOM.createRoot(document.getElementById('root'));

    // Render the app with Router wrapper
    // ✅ StrictMode 已启用（Chakra UI 2.10.9+ 已修复兼容性问题）
    root.render(
        <React.StrictMode>
            <Router
                future={{
                    // v7_startTransition: true, // 禁用：导致路由切换延迟2秒，影响用户体验
                    v7_relativeSplatPath: true,
                }}
            >
                <App />
            </Router>
        </React.StrictMode>
    );

    // 注册 Service Worker
    registerServiceWorker();
}

// 启动应用
startApp();