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 Benutzeroberflächen mit dem HTML-Dienst vorgestellt.
HTML, CSS und JavaScript trennen
Wenn Sie alle HTML-, CSS- und JavaScript-Elemente in einer einzigen Datei kombinieren, kann die Wartung von Projekten erschwert werden. Obwohl in Apps Script clientseitiger Code in .html-Dateien enthalten sein muss, 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 <style>
und <script> Tags 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 und nicht in Vorlagen laden
Vorlagen-HTML kann verwendet werden, um schnell Benutzeroberflächen zu erstellen. Die Verwendung sollte jedoch begrenzt sein, damit Ihre Benutzeroberfläche responsiv ist. Der Code in Vorlagen wird einmal ausgeführt, wenn die Seite geladen wird. Erst wenn die Verarbeitung abgeschlossen ist, werden Inhalte an den Client gesendet. Wenn Ihr Scriptlet-Code Aufgaben mit langer Ausführungszeit 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.
Diese asynchrone Programmierung ist schwieriger, ermöglicht aber ein schnelleres Laden der Benutzeroberfläche und bietet die Möglichkeit, dem Nutzer einen Spinner oder eine andere Ladebenachrichtigung 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>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 Skript „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 in der Regel nur eine Frage des Einfügens eines zusätzlichen „s“ in die URL.
HTML5-Dokumenttypdeklaration verwenden
Wenn Ihre Seite im neueren IFRAME
Sandbox-Modus bereitgestellt wird, fügen Sie oben in Ihrer HTML-Datei das folgende Code-Snippet ein.
<!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 keine modernen HTML5-Elemente oder JavaScript-APIs verwenden möchten, 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. Dies ist beim HTML-Dienst noch wichtiger. Wenn Sie Ihre <script> Tags an das Ende der Seite verschieben, können HTML
Inhalte gerendert werden, bevor das JavaScript verarbeitet wird. So können Sie dem Nutzer einen
Spinner oder eine andere Nachricht präsentieren.
jQuery nutzen
jQuery ist eine beliebte JavaScript-Bibliothek, die viele gängige Aufgaben in der Webentwicklung vereinfacht.