如何通过Google Apps Script实现Google Sheets标签页失焦时的文档变更无邮件提醒？

我之前也碰到过类似的需求——不想用邮件轰炸，但要让后台标签的用户知道表格有更新。你试过的那些方法没生效，大概率是没踩对Google Apps Script和浏览器权限的点，下面给你几个亲测有效的方案：

1. 标签页徽章（Badge API）：低调但醒目的数字提示 #

这个方法在后台标签下也能直接在标签图标上显示更新次数，用户扫一眼任务栏就能看到，不会打扰当前工作。

实现步骤： #

• 用onEdit触发器监听表格编辑事件，通过HtmlService向嵌入的隐藏侧边栏发送更新信号；
• 前端调用浏览器的navigator.setAppBadge()方法设置徽章数字，更新时递增，用户切回标签页时重置。

代码示例：

Code.gs

function onEdit(e) {
  const ui = SpreadsheetApp.getUi();
  const html = HtmlService.createHtmlOutputFromFile('Reminder');
  try {
    // 首次打开时显示隐藏侧边栏
    ui.showSidebar(html);
  } catch (err) {
    // 侧边栏已存在，通过postMessage通知前端更新
    google.script.run.withSuccessHandler(() => {
      window.parent.postMessage({type: 'UPDATE_BADGE'}, '*');
    }).dummyFunc();
  }
}

function dummyFunc() {
  // 空函数用于触发前端通讯
  return true;
}

Reminder.html

<!DOCTYPE html>
<html>
<body style="display:none;">
<script>
let updateCount = 0;
const originalTitle = document.title;

// 监听更新消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'UPDATE_BADGE') {
    updateCount++;
    // 优先使用Badge API，不兼容则改标题
    if (navigator.setAppBadge) {
      navigator.setAppBadge(updateCount);
    } else {
      document.title = `(${updateCount}) 表格已更新`;
    }
  }
});

// 切回标签页时重置状态
window.addEventListener('focus', () => {
  updateCount = 0;
  if (navigator.clearAppBadge) navigator.clearAppBadge();
  document.title = originalTitle;
});
</script>
</body>
</html>

2. 优化版Notification API：解决权限和后台推送问题 #

你之前用Notification API没生效，大概率是没在用户主动交互时请求权限。浏览器会自动拒绝非交互场景下的权限请求，所以得先让用户点击按钮授权，之后才能在后台推送系统级通知。

代码补充（在Reminder.html中添加）：

<button id="grantPerm" style="padding:8px; margin:10px;">开启更新通知</button>
<script>
document.getElementById('grantPerm').addEventListener('click', async () => {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') this.style.display = 'none';
});

// 收到更新时发送通知
window.addEventListener('message', (event) => {
  if (event.data.type === 'SEND_NOTICE' && Notification.permission === 'granted') {
    new Notification('协作表格更新', {
      body: '有人修改了表格内容，点击查看详情',
      icon: 'https://ssl.gstatic.com/docs/spreadsheets/forms/spreadsheet-icon-128.png'
    });
  }
});
</script>

3. 动态标题闪烁：老方法但更可靠的实现 #

之前改标题没生效，可能是只修改了一次——后台标签的标题在任务栏不会实时刷新，得做交替闪烁的效果才能被用户注意到。

代码片段：

let flashTimer = null;
const originalTitle = document.title;

window.addEventListener('message', (event) => {
  if (event.data.type === 'FLASH_TITLE' && !document.hasFocus()) {
    if (!flashTimer) {
      flashTimer = setInterval(() => {
        document.title = document.title === originalTitle ? '🔔 表格已更新！' : originalTitle;
      }, 1000);
    }
  }
});

window.addEventListener('focus', () => {
  clearInterval(flashTimer);
  flashTimer = null;
  document.title = originalTitle;
});

为什么之前的方法没生效？ #

• window.alert()：浏览器出于体验考虑，后台标签的alert会延迟到标签切换到前台才弹出，后台时用户完全看不到；
• 单次修改标题/图标：后台标签的标题在任务栏不会主动刷新，只有动态变化才能触发视觉提示；
• Notification API：必须在用户主动交互（比如点击按钮）时请求权限，否则浏览器会直接拒绝，后台推送也就无从谈起。

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