使用 HTML 服務建立使用者介面時，會遵循許多與其他類型網頁開發相同的模式和做法。不過，有些部分是 Apps Script 環境特有，或值得特別強調。以下將說明開發自己的 HTML 服務 UI 時，應謹記的幾項最佳做法。
分開 HTML、CSS 和 JavaScript
將所有 HTML、CSS 和 JavaScript 程式碼集中在一個檔案中，可能會導致您難以讀取及開發專案。雖然 Apps Script 規定使用者必須將用戶端程式碼放入 .html 檔案中，但您仍可將 CSS 和用戶端 JavaScript 區分為不同的檔案，然後透過自訂函式將這些 JavaScript 和用戶端 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 程式碼中執行長時間運作的作業，可能會導致 UI 速度變慢。
請使用指令碼片段標記，用於快速執行一次性任務，例如加入其他內容或設定靜態值。所有其他資料都應使用 google.script.run 呼叫載入。以非同步方式編寫程式碼較為困難，但能讓 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
沙箱模式提供服務，包括未透過 HTTPS 提供的 JavaScript 或 CSS 檔案，都會導致下列錯誤。
混合內容：位於「https://...」的頁面已透過 HTTPS 載入，但要求含有不安全的指令碼「http://...」。這項要求已遭到封鎖，內容必須透過 HTTPS 提供。
大多數熱門程式庫都支援 HTTP 和 HTTPS，因此切換時通常只需在網址中插入額外的「s」即可。
使用 HTML5 文件類型宣告
如果您的網頁是以新版 IFRAME
沙箱模式提供，請務必在 HTML 檔案頂端加入以下程式碼片段。
<!DOCTYPE html>
這個文件類型宣告會告訴瀏覽器，您是為新式瀏覽器設計網頁，因此不應使用相容模式轉譯網頁。即使您不打算使用新式 HTML5 元素或 JavaScript API，這麼做也有助於確保網頁正確顯示。
最後載入 JavaScript
許多網頁開發人員建議在網頁底部載入 JavaScript 程式碼，以提高回應速度，這點在 HTML 服務中更是重要。將 <script> 標記移至網頁結尾，即可在處理 JavaScript 之前轉譯 HTML 內容，讓您向使用者顯示旋轉圖示或其他訊息。
善用 jQuery
jQuery 是熱門的 JavaScript 程式庫，可簡化許多網頁開發的常見工作。