Oppia平台国际化改进：浏览器语言检测与提示横幅实现

背景与需求分析

Oppia作为一个开源学习平台，致力于为全球用户提供优质的教育资源。在平台国际化过程中，我们发现非英语用户可能无法第一时间发现平台提供的多语言支持功能。为此，我们需要实现一个智能化的语言提示系统，当检测到用户浏览器语言为非英语时，自动显示语言切换提示横幅。

技术实现方案

核心功能设计

1. 浏览器语言检测：通过navigator.language或navigator.languages API获取用户浏览器首选语言设置
2. 提示横幅组件：创建独立组件显示语言切换提示，包含以下元素：
   • 提示文本（支持多语言翻译）
   • "Got it!"确认按钮
   • "不再显示"复选框
3. 用户偏好存储：使用Cookie存储用户选择不再显示的偏好

组件架构

在learner-dashboard-page目录下创建新的language-banner组件，包含：

• HTML模板文件：定义横幅的视觉结构和样式
• TypeScript文件：处理业务逻辑和交互
• 样式文件：定义组件特定样式

关键技术实现

语言检测逻辑

// 检测浏览器语言是否为英语
const isEnglishBrowser = !navigator.language.startsWith('en');

Cookie管理

使用ngx-cookie-service处理Cookie存储：

// 检查是否已设置不再显示
const dontShowAgain = this.cookieService.get('hide_language_banner');
if (dontShowAgain === 'true') {
  return;
}

// 用户选择不再显示时设置Cookie
if (this.dontShowAgainChecked) {
  this.cookieService.set('hide_language_banner', 'true', {
    expires: 365 // 有效期1年
  });
}

与现有系统集成

1. 将新组件添加到learner-dashboard-page.component.html模板中
2. 在learner-dashboard-page.module.ts中导入并声明新组件

用户体验设计

提示横幅设计遵循以下原则：

• 非侵入性：不影响主要功能使用
• 明确性：清晰传达语言切换功能
• 可控性：用户可永久关闭提示
• 一致性：与平台现有设计风格保持一致

横幅包含：

1. 多语言提示文本（根据浏览器语言自动选择）
2. 确认按钮（"Got it!"）
3. 可选复选框（"不再显示"）

测试要点

1. 功能测试：

   • 英语浏览器不显示横幅
   • 非英语浏览器显示横幅
   • 点击确认按钮关闭横幅
   • 勾选"不再显示"后不再出现

2. 兼容性测试：

   • 桌面端和移动端显示
   • 不同浏览器测试
   • 启用/禁用redesigned_learner_dashboard功能标志

3. 性能测试：

   • 组件加载时间
   • Cookie操作性能影响

实现注意事项

1. 隐私合规：确保符合GDPR等隐私法规，仅在用户同意Cookie后存储偏好
2. 无障碍访问：确保组件符合WCAG标准，支持键盘导航和屏幕阅读器
3. 多语言支持：横幅文本需支持平台已翻译的所有语言
4. 错误处理：妥善处理Cookie被禁用等异常情况

总结

通过实现浏览器语言检测和智能提示横幅，Oppia平台能够更好地服务于国际用户，帮助他们发现和使用平台的多语言功能。这一改进不仅提升了用户体验，也体现了平台对全球学习者的包容性。技术实现上采用了模块化组件设计，确保功能可维护性和扩展性，同时严格遵循隐私和可访问性标准。