使用 HTML 服務建構使用者介面，與標準網頁開發類似。不過，某些方面是 Apps Script 環境特有的。本指南著重說明開發回應式安全 HTML 服務 UI 的最佳做法。
HTML、CSS 和 JavaScript 分開
將所有 HTML、CSS 和 JavaScript 合併成單一檔案，可能會導致專案難以維護。雖然 Apps Script 規定用戶端程式碼必須位於 .html 檔案中，但您仍應將 CSS 和用戶端 JavaScript 分別放在各自的檔案中，並使用自訂函式將這些檔案納入主要 HTML 網頁。
以下範例在 Code.gs 中使用伺服器端 include 函式，將 Stylesheet.html 和 JavaScript.html 匯入 Page.html。使用列印指令碼片段呼叫時，這個函式會直接插入檔案內容。由於這些是 HTML 片段，而非獨立的 .css 或 .js 檔案，因此必須包含 <style> 和 <script> 標記。
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>Stylesheet.html
<style>
p {
color: green;
}
</style>JavaScript.html
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>非同步載入資料，而非在範本中載入
範本化 HTML 可用於快速建構介面，但應限制使用，確保使用者介面具有回應性。範本中的程式碼會在網頁載入時執行一次，且在處理完成前，不會將任何內容傳送至用戶端。如果腳本程式碼中有長時間執行的工作，可能會導致 UI 顯示緩慢。
使用 scriptlet 標記執行快速的一次性工作，例如納入其他內容或設定靜態值。所有其他資料都應使用 google.script.run 呼叫載入。以這種非同步方式編碼較為困難，但可加快 UI 載入速度，並讓 UI 有機會向使用者顯示微調器或其他載入訊息。
請勿 - 載入範本
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>正確做法：非同步載入
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>使用 HTTPS 載入資源
在IFRAME 沙箱模式中，所有 JavaScript 和 CSS 檔案都必須透過 HTTPS 提供。以不安全的方式提供這些檔案，會導致下列錯誤：
複合型內容：網頁「https://...」是透過 HTTPS 載入，但要求了不安全的指令碼「http://...」。這項要求已遭到封鎖； 內容必須透過 HTTPS 提供。
大多數熱門程式庫都支援 HTTP 和 HTTPS，因此通常只要在網址中插入額外的「s」即可切換。
使用 HTML5 文件類型宣告
如果網頁是使用較新的 IFRAME
沙箱模式放送，請務必在 HTML 檔案頂端加入下列程式碼片段。
<!DOCTYPE html>
這項文件類型宣告會告訴瀏覽器，您設計的網頁適用於新式瀏覽器，因此不應使用「相容模式」轉譯網頁。即使您不打算使用新式 HTML5 元素或 JavaScript API，這也有助於確保網頁正確顯示。
最後載入 JavaScript
許多網頁開發人員建議在網頁底部載入 JavaScript 程式碼，以提高回應速度，這對 HTML 服務來說更是重要。將 <script> 標記移至網頁結尾，即可在處理 JavaScript 前轉譯 HTML 內容，向使用者顯示微調器或其他訊息。
善用 jQuery
jQuery 是熱門的 JavaScript 程式庫，可簡化網頁開發中的許多常見工作。