Diese Seite wurde von der Cloud Translation API übersetzt.

HTML-Service: Best Practices

Beim Erstellen von Benutzeroberflächen mit dem HTML-Dienst gehen viele der Muster und Praktiken wie bei anderen Arten der Webentwicklung nach. Es gibt jedoch einige Aspekte, die nur in der Apps Script-Umgebung zu finden sind oder anderweitig besonders hervorgehoben werden sollten. Im Folgenden finden Sie einige Best Practices, die Sie bei der Entwicklung Ihrer eigenen UI für HTML-Dienste berücksichtigen sollten.

Zur Veranschaulichung dieser Best Practices haben wir mit dem HTML-Dienst Simple Tasks eine Beispiel-Webanwendung erstellt. Der vollständige Quellcode und die Einrichtungsanleitung sind in unserem GitHub-Repository verfügbar.

HTML, CSS und JavaScript trennen

Das Speichern des gesamten HTML-, CSS- und JavaScript-Codes in einer Datei kann das Lesen und Entwickeln Ihres Projekts erschweren. Bei Apps Script muss clientseitiger Code in HTML-Dateien platziert werden .Sie können den CSS-Code und den clientseitigen JavaScript-Code aber in verschiedene Dateien aufteilen und diese dann mit einer benutzerdefinierten Funktion in die Haupt-HTML-Seite einfügen.

Im folgenden Beispiel wird eine benutzerdefinierte serverseitige include()-Funktion in der Code.gs-Datei definiert, um den Inhalt der Dateien "Stylesheet.html" und "JavaScript.html" in die Datei "Page.html" zu importieren. Beim Aufruf mithilfe von Druckskriptlets importiert diese Funktion den angegebenen Dateiinhalt in die aktuelle Datei. 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 HTML-Vorlagen können Sie schnell einfache Schnittstellen erstellen. Ihre Verwendung sollte jedoch eingeschränkt werden, damit Ihre UI reagiert. Der Code in den Vorlagen wird einmal beim Laden der Seite ausgeführt. Bis die Verarbeitung abgeschlossen ist, werden keine Inhalte an den Client gesendet. Wenn im Scriptlet-Code lang andauernde Aufgaben verwendet werden, erscheint die UI möglicherweise langsam.

Verwenden Sie Scriptlet-Tags für schnelle, einmalige Aufgaben wie das Einbeziehen anderer Inhalte oder das Festlegen statischer Werte. Alle anderen Daten sollten mithilfe von google.script.run-Aufrufen geladen werden. Eine solche asynchrone Codierung ist schwieriger, ermöglicht jedoch ein schnelleres Laden der Benutzeroberfläche und die Möglichkeit, dem Nutzer ein rotierendes Ladesymbol oder eine andere Ladenachricht 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>

Richtig – 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>

In der Beispielanwendung für einfache Aufgaben werden Daten von der HTML-Dienstseite Page.html auf diese Weise geladen. Es werden nur Vorlagen verwendet, um anderen Quellcode in die Seite aufzunehmen.

Ressourcen über HTTPS laden

Wenn deine Seite im neueren Sandbox-Modus IFRAME bereitgestellt wird, führen JavaScript- oder CSS-Dateien, die nicht über HTTPS bereitgestellt werden, zu Fehlern wie dem folgenden.

Gemischte Inhalte: Die Seite unter "https://..." wurde über HTTPS geladen, hat jedoch das unsichere Skript "http://..." angefordert. Diese Anfrage wurde blockiert. Der Inhalt muss über HTTPS bereitgestellt werden.

Die meisten gängigen Bibliotheken unterstützen sowohl HTTP als auch HTTPS, sodass der Wechsel normalerweise nur durch Einfügen eines „s“ in die URL erfolgt.

Deklaration des HTML5-Dokumenttyps verwenden

Wird deine Seite im neueren Sandbox-Modus IFRAME bereitgestellt, musst du das folgende Code-Snippet oben in der HTML-Datei einfügen.

<!DOCTYPE html>

Durch diese Deklination des Dokumenttyps wird dem Browser mitgeteilt, dass Sie die Seite für moderne Browser entworfen haben und dass Ihre Seite nicht im Quirks-Modus gerendert werden soll. Auch wenn Sie weder moderne HTML5-Elemente noch JavaScript APIs verwenden möchten, können Sie so dafür sorgen, dass Ihre Seite korrekt angezeigt wird.

JavaScript zuletzt laden

Viele Webentwickler empfehlen, unten auf der Seite JavaScript-Code zu laden, um die Reaktionsfähigkeit zu verbessern. Dies ist beim HTML-Dienst umso wichtiger. Wenn Sie die <script>-Tags an das Ende der Seite verschieben, werden HTML-Inhalte vor der Verarbeitung des JavaScript-Codes gerendert. So können Sie dem Nutzer ein Kreiselsymbol oder eine andere Nachricht einblenden.

Die Vorteile von jQuery nutzen

jQuery ist eine beliebte JavaScript-Bibliothek, die viele gängige Aufgaben in der Webentwicklung vereinfacht.