Das Erstellen von Benutzeroberflächen mit dem HTML-Dienst ähnelt der Standard-Webentwicklung. Bestimmte Aspekte sind jedoch spezifisch für die Apps Script-Umgebung. In diesem Leitfaden werden Best Practices für die Entwicklung responsiver und sicherer HTML-Dienst-UIs beschrieben.
HTML, CSS und JavaScript trennen
Wenn Sie den gesamten HTML-, CSS- und JavaScript-Code in einer einzigen Datei zusammenfassen, kann das die Wartung von Projekten erschweren. Obwohl für clientseitigen Code in Apps Script .html-Dateien erforderlich sind, sollten Sie CSS und clientseitiges JavaScript in separate Dateien aufteilen und sie mit einer benutzerdefinierten Funktion in die Haupt-HTML-Seite einfügen.
Im folgenden Beispiel wird eine serverseitige include-Funktion in Code.gs verwendet, um Stylesheet.html und JavaScript.html in Page.html zu importieren. Wenn diese Funktion mit Druck-Scriptlets aufgerufen wird, wird der Dateiinhalt direkt eingefügt. Da es sich um HTML-Snippets und nicht um eigenständige CSS- oder JS-Dateien handelt, müssen sie die Tags <style> und <script> enthalten.
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 Benutzeroberflächen erstellen. Die Verwendung sollte jedoch begrenzt werden, damit die Benutzeroberfläche reaktionsschnell bleibt. 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 ein schnelleres Laden der Benutzeroberfläche und bietet die Möglichkeit, dem Nutzer einen Spinner oder eine andere Lademeldung anzuzeigen.
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
Im IFRAME Sandbox-Modus müssen alle JavaScript- und CSS-Dateien über HTTPS bereitgestellt werden. Wenn diese Dateien nicht sicher bereitgestellt werden, treten Fehler wie die folgenden auf:
Gemischte Inhalte: Die Seite unter „https://...“ wurde über HTTPS geladen, hat aber ein unsicheres Script „http://...“ 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>
Diese Dokumenttypdeklaration teilt 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 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 die <script>-Tags ans Ende der Seite verschieben, wird der HTML-Inhalt gerendert, 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.