如何用Google Apps Script onEdit()实现Web App实时同步表单新数据

onEdit(e) 本身就不适合你的场景：这个简单触发器只会响应用户手动在表格界面修改单元格的操作，Google表单自动向"Student Info"工作表写入响应行是服务端动作，根本不会触发onEdit，你自然没法通过它联动Web App更新。

不需要长轮询全表，靠「可安装表单提交触发器 + 服务端缓存 + 前端轻量校验」就能实现1秒内的更新感知，和即时推送效果无差异，资源消耗远低于你之前的全量数据轮询方案。

第一步：替换触发器，绑定表单提交事件 #

删掉你之前写的无效onEdit逻辑，新建表单提交触发函数，每次有新提交时提前把最新数据写入服务端缓存，避免前端每次请求都读表消耗配额：

// 表单提交触发函数，不要命名为onEdit
function handleFormSubmit(e) {
  const targetSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Student Info");
  // 读取全量有效数据，过滤空行
  const allRows = targetSheet.getDataRange().getValues().filter(row => row.some(cell => cell.toString().trim() !== ''));
  // 优先取事件对象里的新增行数据，事件对象为空时取表内最后一行
  const newRow = e ? e.namedValues : allRows[allRows.length - 1];
  const cache = CacheService.getScriptCache();
  // 缓存有效期设为6小时，足够日常使用
  cache.put('student_full_data', JSON.stringify(allRows), 21600);
  cache.put('student_latest_row', JSON.stringify(newRow), 21600);
  cache.put('student_last_update', Date.now().toString(), 21600);
}

写完函数后手动绑定可安装触发器：

• 打开Apps Script编辑器，点击左侧时钟图标进入触发器管理页
• 点击「添加触发器」，按以下参数配置：
  • 选择要运行的函数：handleFormSubmit
  • 选择事件源：来自电子表格
  • 选择事件类型：提交表单时
• 保存后完成账号授权即可，后续每一笔表单响应写入表格后，这个函数都会自动执行更新缓存。

第二步：改造Web App后端逻辑 #

在doGet路由里加一个轻量数据接口，前端请求时优先从缓存读数据，减少表格API调用：

function doGet(e) {
  // 数据接口分支
  if (e.parameter.action === 'fetchLatest') {
    const cache = CacheService.getScriptCache();
    let fullData = cache.get('student_full_data');
    // 缓存未命中时（比如首次部署）主动读表生成缓存
    if (!fullData) {
      handleFormSubmit(null);
      fullData = cache.get('student_full_data');
    }
    const resp = {
      fullData: JSON.parse(fullData),
      newRow: JSON.parse(cache.get('student_latest_row')),
      updateTime: Number(cache.get('student_last_update'))
    };
    return ContentService.createTextOutput(JSON.stringify(resp)).setMimeType(ContentService.MimeType.JSON);
  }
  // 默认返回Web App前端页面
  return HtmlService.createHtmlOutputFromFile('index');
}

第三步：改造Web App前端逻辑 #

不要做全量数据轮询，只做1秒间隔的更新时间校验，只有检测到时间戳变化时才重新渲染页面，性能消耗极低：

// 记录当前本地已渲染的最新版本时间
let currentVersion = 0;

// 页面加载完成后初始化渲染
window.addEventListener('load', async () => {
  await loadAndRender(true);
  // 启动1秒间隔的更新检查
  setInterval(checkUpdate, 1000);
});

// 检查是否有更新
async function checkUpdate() {
  const resp = await fetch(`?action=fetchLatest&t=${Date.now()}`); // 加时间戳避免浏览器缓存
  const data = await resp.json();
  if (data.updateTime > currentVersion) {
    renderTable(data.fullData);
    highlightNewEntry(data.newRow); // 你自定义的新增行高亮逻辑
    currentVersion = data.updateTime;
  }
}

// 首次加载/强制刷新时拉取数据渲染
async function loadAndRender(isInit = false) {
  const resp = await fetch(`?action=fetchLatest&t=${Date.now()}`);
  const data = await resp.json();
  renderTable(data.fullData);
  if (isInit) currentVersion = data.updateTime;
}

// 你原有的表格渲染函数，替换成自己的业务逻辑即可
function renderTable(fullData) {
  // 原有全量表格渲染逻辑
}

// 你原有的新增行提示/高亮逻辑
function highlightNewEntry(newRow) {
  // 原有新增内容展示逻辑
}

• 不要尝试在服务端触发器里直接操作已打开的Web App页面：触发器运行在Google服务端，无法主动向用户浏览器里已经加载的页面推送数据，上述1秒间隔的校验方案是当前Google Apps Script生态下延迟最低、配额消耗最少的方案，用户端感知不到延迟，和即时推送效果一致
• 部署Web App时，执行身份选择「以我自己的身份执行」，访问权限根据你的需求配置即可，若要公开访问选「任何人（包括匿名）」
• 每次修改完代码后需要重新部署Web App新版本，否则改动不会生效

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