Flutter Web应用浏览器标签页最小化时声音通知失效求助

问题根源 #

现代浏览器会对隐藏标签页执行资源节流策略：暂停AudioContext、延迟定时器触发时机，以此降低CPU/内存占用。你的数据库更新正常是因为Firebase实时同步属于网络请求，不受该节流影响，但本地音频播放的触发逻辑被浏览器延迟到标签重新激活时才执行。

具体解决方法 #

1. 主动唤醒AudioContext（核心修复）

浏览器会自动暂停隐藏标签的AudioContext，需要在播放音频前主动唤醒它：

import 'dart:html' as html;
import 'dart:async';

// 全局AudioContext实例
html.AudioContext? _audioContext;

Future<void> playNotificationSound() async {
  // 初始化或唤醒AudioContext
  if (_audioContext == null) {
    _audioContext = html.AudioContext();
  } else if (_audioContext!.state == 'suspended') {
    await _audioContext!.resume();
  }

  // 加载并播放音频（示例：使用本地资源）
  final response = await html.HttpRequest.request('assets/notification.mp3', responseType: 'arraybuffer');
  final audioBuffer = await _audioContext!.decodeAudioData(response.response as ByteBuffer);
  final source = _audioContext!.createBufferSource();
  source.buffer = audioBuffer;
  source.connectNode(_audioContext!.destination);
  source.start();
}

调用这个方法替代原来的音频播放逻辑，确保标签隐藏时AudioContext能被正常唤醒。

2. 结合浏览器Notification API增强提示

仅靠音频可能不够，配合系统通知能确保用户在标签隐藏时收到提醒：

import 'dart:html' as html;

Future<void> requestNotificationPermission() async {
  final permission = await html.Notification.requestPermission();
  if (permission != 'granted') {
    // 提示用户开启通知权限
    print('通知权限未开启，无法在后台收到提示');
  }
}

void showNotificationWithSound() {
  if (html.Notification.permission == 'granted') {
    // 创建通知，可指定音频
    final notification = html.Notification('计时器到期', NotificationOptions(
      body: '您的计时器已结束',
      sound: 'assets/notification.mp3', // 部分浏览器支持直接指定通知声音
    ));
    
    // 同时播放音频（兼容不支持通知声音的浏览器）
    playNotificationSound();
  }
}

记得在应用初始化时调用requestNotificationPermission()请求权限。

3. 避免使用Flutter默认Timer（可选）

Flutter的Timer在Web隐藏标签下可能被浏览器节流，改用Web原生的定时器API更可靠：

import 'dart:html' as html;
import 'dart:ui';

void startBackgroundTimer(Duration duration, VoidCallback onFinish) {
  html.window.setTimeout(() {
    onFinish();
  }, duration.inMilliseconds);
}

用这个替代Timer(Duration, callback)，确保定时器在后台标签下能按时触发。

额外注意事项 #

• 测试时不要用Chrome的隐身模式，部分权限在隐身模式下会被限制。
• Firebase托管的静态资源要确保音频文件路径正确，避免404导致播放失败。

内容的提问来源于stack exchange，提问作者Sune Amtoft