无需setInterval，如何高效更新Google Apps Script Web应用页面数据？

方案1：onChange触发器+长轮询（Long Polling） #

• 给目标Google表格绑定onChange触发器，当表格内容（编辑、删除、格式修改等）发生变化时，触发脚本记录更新标记（比如时间戳）到Script Properties。
• Web应用客户端放弃固定间隔轮询，改用长轮询：客户端发起请求后，服务器先对比客户端携带的旧时间戳和最新标记，有更新就立即返回新数据；无更新则保持连接一段时间（比如25秒），超时后客户端再自动发起下一次请求。这种方式只有数据变化时才会产生有效响应，大幅减少无效请求。
• 代码示例：
  服务器端（Google Apps Script）：

  function doGet(e) {
    const clientTimestamp = e.parameter.timestamp;
    const currentTimestamp = PropertiesService.getScriptProperties().getProperty('lastUpdate');
    
    // 有更新时返回新数据和最新时间戳
    if (clientTimestamp !== currentTimestamp) {
      const data = getTargetSheetData();
      return ContentService.createTextOutput(JSON.stringify({
        data: data,
        timestamp: currentTimestamp
      })).setMimeType(ContentService.MimeType.JSON);
    }
    
    // 无更新时等待后返回超时标记
    Utilities.sleep(25000);
    return ContentService.createTextOutput(JSON.stringify({
      timestamp: currentTimestamp,
      noUpdate: true
    })).setMimeType(ContentService.MimeType.JSON);
  }
  
  // 绑定表格的onChange触发器
  function onSheetChange(e) {
    PropertiesService.getScriptProperties().setProperty('lastUpdate', new Date().getTime().toString());
  }
  
  // 自定义获取表格数据的函数
  function getTargetSheetData() {
    const sheet = SpreadsheetApp.openById('你的表格ID').getSheetByName('目标工作表');
    return sheet.getDataRange().getValues(); // 根据需求调整获取范围
  }
  

  客户端（前端JS）：

  let lastTimestamp = null;
  
  function checkUpdates() {
    const url = '你的Web应用URL' + (lastTimestamp ? `?timestamp=${lastTimestamp}` : '');
    fetch(url)
      .then(res => res.json())
      .then(result => {
        if (!result.noUpdate) {
          renderPageData(result.data);
          lastTimestamp = result.timestamp;
        }
        // 立即发起下一次长轮询
        checkUpdates();
      })
      .catch(() => {
        // 出错时延迟重试
        setTimeout(checkUpdates, 5000);
      });
  }
  
  // 页面加载初始化
  window.onload = () => checkUpdates();
  
  // 自定义页面渲染逻辑
  function renderPageData(data) {
    const container = document.getElementById('data-container');
    container.innerHTML = '';
    data.forEach(row => {
      const rowEl = document.createElement('div');
      rowEl.textContent = row.join(' | ');
      container.appendChild(rowEl);
    });
  }
  

方案2：Google Cloud Pub/Sub实时推送 #

• 配置Google Cloud项目并启用Pub/Sub API，在表格的onChange触发器中，向指定Pub/Sub主题发送更新通知。
• Web应用客户端订阅该Pub/Sub主题，一旦收到推送消息，立即拉取最新表格数据更新页面。这种方式实时性最高，但需要额外配置云服务权限，适合对实时性要求高的场景。

方案3：缓存服务优化轮询 #

• 如果不想改动轮询模式，可通过CacheService优化：服务器端缓存表格数据和最后更新时间，客户端仍保持轮询，但服务器先对比表格最新更新时间和缓存标记，一致则直接返回缓存数据，不一致才重新读取表格并更新缓存。这种方式能减少服务器读取表格的次数，降低资源消耗。
• 服务器端代码示例：

  function doGet() {
    const cache = CacheService.getScriptCache();
    const cachedData = cache.get('sheetCachedData');
    const sheet = SpreadsheetApp.openById('你的表格ID').getSheetByName('目标工作表');
    const lastUpdated = sheet.getLastUpdated().getTime().toString();
    const cachedTimestamp = cache.get('lastUpdatedMark');
  
    if (cachedData && cachedTimestamp === lastUpdated) {
      return ContentService.createTextOutput(cachedData).setMimeType(ContentService.MimeType.JSON);
    }
  
    const freshData = sheet.getDataRange().getValues();
    const dataStr = JSON.stringify(freshData);
    cache.put('sheetCachedData', dataStr, 300); // 缓存5分钟
    cache.put('lastUpdatedMark', lastUpdated, 300);
    return ContentService.createTextOutput(dataStr).setMimeType(ContentService.MimeType.JSON);
  }
  

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