Beim Erstellen von Benutzeroberflächen mit dem HTML-Dienst werden viele der gleichen Muster und Methoden wie bei anderen Arten der Webentwicklung verwendet. Es gibt jedoch einige Aspekte, die für die Apps Script-Umgebung einzigartig sind oder die es wert sind, hervorgehoben zu werden. Im Folgenden finden Sie einige Best Practices, die Sie bei der Entwicklung eigener HTML-Service-Benutzeroberflächen beachten sollten.
HTML, CSS und JavaScript trennen
Wenn Sie den gesamten HTML-, CSS- und JavaScript-Code in einer Datei speichern, kann das Projekt schwer zu lesen und zu entwickeln sein. In Apps Script muss clientseitiger Code zwar in .html-Dateien platziert werden, Sie können CSS und clientseitiges JavaScript aber trotzdem in separate Dateien aufteilen und sie dann mit einer benutzerdefinierten Funktion in die Haupt-HTML-Seite einfügen.
Im folgenden Beispiel wird in der Datei „Code.gs“ eine benutzerdefinierte serverseitige include()-Funktion definiert, um den Inhalt der Dateien „Stylesheet.html“ und „JavaScript.html“ in die Datei „Page.html“ zu importieren. Wenn diese Funktion über Druck-Scriptlets aufgerufen wird, wird der angegebene Dateiinhalte in die aktuelle Datei importiert. Die enthaltenen Dateien enthalten <style>- und <script>-Tags, da es sich um HTML-Snippets und nicht um reine .css- oder .js-Dateien handelt.
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>Daten asynchron laden, nicht in Vorlagen
Mit Templated HTML lassen sich schnell einfache Benutzeroberflächen erstellen. Die Verwendung sollte jedoch eingeschränkt werden, damit die Benutzeroberfläche responsiv ist. Der Code in Vorlagen wird einmal beim Laden der Seite ausgeführt. Es werden keine Inhalte an den Client gesendet, bis die Verarbeitung abgeschlossen ist. Lang andauernde Aufgaben in Ihrem Scriptlet-Code können dazu führen, dass die Benutzeroberfläche langsam reagiert.
Verwenden Sie Scriptlet-Tags für schnelle, einmalige Aufgaben wie das Einbinden anderer Inhalte oder das Festlegen statischer Werte. Alle anderen Daten sollten mit google.script.run-Aufrufen geladen werden.
Die asynchrone Programmierung ist zwar schwieriger, ermöglicht aber, dass die Benutzeroberfläche schneller geladen wird. Außerdem kann dem Nutzer ein Spinner oder eine andere Lademeldung angezeigt werden.
Nicht in Vorlagen laden
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Do: Asynchron laden
<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>Ressourcen über HTTPS laden
Wenn Ihre Seite im neueren IFRAME-Sandbox-Modus ausgeliefert wird, führt das Einbinden von JavaScript- oder CSS-Dateien, die nicht über HTTPS ausgeliefert werden, zu Fehlern wie dem unten stehenden.
Gemischte Inhalte: Die Seite unter „https://...“ wurde über HTTPS geladen, aber ein unsicheres Script „http://...“ wurde angefordert. Diese Anfrage wurde blockiert. Die Inhalte müssen über HTTPS bereitgestellt werden.
Die meisten gängigen Bibliotheken unterstützen sowohl HTTP als auch HTTPS. Die Umstellung ist daher in der Regel ganz einfach: Sie müssen nur ein zusätzliches „s“ in die URL einfügen.
HTML5-Dokumenttypdeklaration verwenden
Wenn Ihre Seite im neueren IFRAME-Sandbox-Modus bereitgestellt wird, müssen Sie das folgende Code-Snippet oben in Ihre HTML-Datei einfügen.
<!DOCTYPE html>
Mit dieser Dokumenttypdeklaration wird dem Browser mitgeteilt, dass Sie die Seite für moderne Browser entwickelt haben und dass sie nicht im Quirks-Modus gerendert werden soll. Auch wenn Sie nicht planen, moderne HTML5-Elemente oder JavaScript-APIs zu nutzen, trägt dies dazu bei, dass Ihre Seite korrekt angezeigt wird.
JavaScript zuletzt laden
Viele Webentwickler empfehlen, JavaScript-Code am Ende der Seite zu laden, um die Reaktionsfähigkeit zu erhöhen. Das ist beim HTML-Dienst noch wichtiger. Wenn Sie Ihre <script>-Tags ans Ende der Seite verschieben, kann der HTML-Inhalt gerendert werden, bevor das JavaScript verarbeitet wird. So können Sie dem Nutzer einen Spinner oder eine andere Meldung anzeigen.
jQuery nutzen
jQuery ist eine beliebte JavaScript-Bibliothek, die viele gängige Aufgaben in der Webentwicklung vereinfacht.