Das Erstellen von Benutzeroberflächen mit dem HTML-Dienst folgt vielen derselben Muster und Praktiken wie andere Arten der Webentwicklung. Es gibt jedoch einige Aspekte, die nur für die Apps Script-Umgebung gelten oder anderweitig hervorgehoben werden sollten. Im Folgenden werden einige Best Practices beschrieben, die Sie beim Entwickeln eigener HTML-Dienst-UIs beachten sollten.
HTML, CSS und JavaScript trennen
Wenn Sie den gesamten HTML-, CSS- und JavaScript-Code in einer Datei speichern, kann Ihr 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 in verschiedene Dateien aufteilen und sie dann mit einer benutzerdefinierten Funktion in die Haupt-HTML-Seite einbinden.
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 mithilfe von Druck-Scriptlets aufgerufen wird, wird der angegebene Dateiinhalt 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 und nicht in Vorlagen laden
Mit vordefiniertem HTML können Sie schnell einfache Benutzeroberflächen erstellen. Die Verwendung sollte jedoch begrenzt werden, damit Ihre Benutzeroberfläche responsiv ist. Der Code in Vorlagen wird beim Laden der Seite einmal ausgeführt. Bis die Verarbeitung abgeschlossen ist, werden keine Inhalte an den Client gesendet. Wenn Ihr Scriptlet-Code lange ausgeführte Aufgaben enthält, kann die Benutzeroberfläche langsam erscheinen.
Verwenden Sie Scriptlet-Tags für schnelle, einmalige Aufgaben wie das Einfügen anderer Inhalte oder das Festlegen statischer Werte. Alle anderen Daten sollten mit google.script.run-Aufrufen geladen werden.
Das asynchrone Codieren ist zwar schwieriger, ermöglicht aber ein schnelleres Laden der Benutzeroberfläche und bietet die Möglichkeit, dem Nutzer einen Ladebalken oder eine andere Lademeldung anzuzeigen.
Nicht: Vorlagen laden
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Empfohlen: 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 mit dem neueren IFRAME
Sandbox-Modus ausgeliefert wird, führt das Einfügen von JavaScript- oder CSS-Dateien, die nicht über HTTPS ausgeliefert werden, zu Fehlern wie dem unten gezeigten.
Gemischte Inhalte: Die Seite „https://…“ wurde über HTTPS geladen, aber ein unsicheres Script „http://…“ angefordert. Diese Anfrage wurde blockiert. Der Inhalt muss über HTTPS bereitgestellt werden.
Die gängigsten Bibliotheken unterstützen sowohl HTTP als auch HTTPS, sodass für den Wechsel in der Regel nur ein zusätzlicher „s“ in die URL eingefügt wird.
Deklaration des HTML5-Dokumententyps verwenden
Wenn Ihre Seite im neueren IFRAME
Sandbox-Modus ausgeliefert wird, fügen Sie das folgende Code-Snippet oben in Ihre HTML-Datei ein.
<!DOCTYPE html>
Diese Dokumenttypdeklarationen teilen dem Browser mit, dass Sie die Seite für moderne Browser entwickelt haben und dass sie nicht im Quirks-Modus gerendert werden soll. Auch wenn Sie nicht vorhaben, moderne HTML5-Elemente oder JavaScript APIs zu verwenden, 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, werden HTML-Inhalte gerendert, bevor das JavaScript verarbeitet wird. So können Sie dem Nutzer einen Ladebalken oder eine andere Meldung anzeigen.
Vorteile von jQuery nutzen
jQuery ist eine beliebte JavaScript-Bibliothek, die viele gängige Aufgaben bei der Webentwicklung vereinfacht.