Google Apps Script部署Web应用自动刷新及数据同步异常问题求解

问题原因说明 #

1. 整页刷新空白：Google Apps Script Web App的页面加载存在权限校验、缓存逻辑，强制整页刷新容易触发校验失败返回空白，不需要整页刷新，用局部数据更新即可解决。
2. doGet触发器无效：触发器仅在Google服务器端执行doGet函数，不会将运行结果推送给用户端的浏览器，用户浏览器加载的页面是独立的静态内容，服务器端运行doGet和用户端页面没有关联，这类触发器没有作用可以直接删除。

实现方案（使用google.script.run局部更新） #

google.script.run是GAS提供的前端与服务端交互的原生方法，前端可以直接调用你在Code.gs中定义的公共函数，执行完成后会将服务端函数的返回值传给withSuccessHandler指定的回调函数，在回调函数里用返回的最新数据更新页面元素即可。

Game Day端修改步骤 #

1. 修改index.html，给所有需要动态更新的元素添加id属性，方便JS定位修改

示例修改后的核心代码：

<div class="container">
  <div class="row">
    <div class="col s12 center-align">
      <h5 id="matchTitle"><?= stats[0] + " (home) v. " + stats[1] + " (guest)"; ?></h5>
    </div>
  </div>
  
  <div class="row">
    <div class="col s4 center-align"><b>Home</b></div>
    <div class="col s4 center-align"><b>Inning</b></div>
    <div class="col s4 center-align"><b>Guest</b></div>
  </div>

  <div class="row">
    <div class="col s4 center-align stat" id="homeScore"><?= stats[4] ?></div>
    <div class="col s2 right-align stat" id="inningTop"><?= stats[2] ?></div>
    <div class="col s2 left-align stat" id="inningBottom"><?= stats[3] ?></div>
    <div class="col s4 center-align stat" id="guestScore"><?= stats[5] ?></div>
  </div>

  <div class="row"></div>

  <div class="row">
    <div class="col s4 center-align"><b>Balls</b></div>
    <div class="col s4 center-align"><b>Strikes</b></div>
    <div class="col s4 center-align"><b>Outs</b></div>
  </div>

  <div class="row">
    <div class="col s4 center-align stat" id="balls"><?= stats[6] ?></div>
    <div class="col s4 center-align stat" id="strikes"><?= stats[7] ?></div>
    <div class="col s4 center-align stat" id="outs"><?= stats[8] ?></div>
  </div>

  <div class="row">
    <div class="col s12 center-align refresh">refresh page to update stats</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include('index-js'); ?>

2. 替换index-js.html的代码，实现自动局部更新

<script>
// 定义更新统计数据的核心函数
function updateStats() {
  google.script.run
    // 服务端getScore执行成功后，用返回的最新数据更新页面
    .withSuccessHandler(function(latestStats) {
      document.getElementById('matchTitle').textContent = latestStats[0] + " (home) v. " + latestStats[1] + " (guest)";
      document.getElementById('homeScore').textContent = latestStats[4];
      document.getElementById('inningTop').textContent = latestStats[2];
      document.getElementById('inningBottom').textContent = latestStats[3];
      document.getElementById('guestScore').textContent = latestStats[5];
      document.getElementById('balls').textContent = latestStats[6];
      document.getElementById('strikes').textContent = latestStats[7];
      document.getElementById('outs').textContent = latestStats[8];
    })
    .getScore(); // 调用Code.gs中已经定义好的getScore服务端函数
}

// 页面加载完成后，每10秒执行一次更新，可自行修改间隔时间
setInterval(updateStats, 10000);
</script>

Score Keeper端修改逻辑 #

所有修改数据的按钮点击事件，都可以在调用服务端更新函数后，加withSuccessHandler(updateStats)实现更新后自动刷新页面显示，示例逻辑如下（替换为你自己的服务端更新函数名即可）：

// 以增加坏球的按钮点击事件为例
function addBall() {
  google.script.run
    .withSuccessHandler(updateStats) // 服务端更新完成后，立刻刷新当前页统计数据
    .addBall(); // 你自己写的服务端更新坏球数的函数名
}

所有增加/减少得分、局数、好球、出局数的按钮，都按照同样逻辑修改即可，点击后无需手动刷新就能看到最新数据。

注意事项 #

每次修改代码后，需要在Web App部署界面选择「新建版本」重新部署，修改才会对线上用户生效。

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