Ta strona została przetłumaczona przez Cloud Translation API.

Usługa HTML: sprawdzone metody

Tworzenie interfejsów użytkownika za pomocą usługi HTML jest podobne do wzorców i metod tworzenia innych witryn. Są jednak aspekty, które są charakterystyczne dla środowiska Apps Script lub w inny sposób warto zwrócić uwagę na pewne kwestie. Poniżej omawiamy kilka sprawdzonych metod, o których warto pamiętać podczas tworzenia własnych interfejsów użytkownika usług HTML.

Aby zademonstrować te sprawdzone metody, utworzyliśmy przykładową aplikację internetową przy użyciu usługi HTML o nazwie Simple Tasks. Pełny kod źródłowy i instrukcje konfiguracji są dostępne w naszym repozytorium GitHub.

Osobne kody HTML, CSS i JavaScript

Przechowywanie całego kodu HTML, CSS i JavaScript w jednym pliku może utrudniać odczytywanie i tworzenie projektu. Chociaż Apps Script wymaga umieszczania kodu po stronie klienta w plikach .html, nadal możesz rozdzielić kod CSS i JavaScript po stronie klienta na różne pliki, a następnie uwzględnić je na głównej stronie HTML za pomocą funkcji niestandardowej.

W przykładzie poniżej zdefiniowano niestandardową funkcję include() po stronie serwera w pliku Code.gs, aby zaimportować zawartość plików Stylesheet.html i JavaScript.html do pliku Page.html. Wywołanie tej funkcji za pomocą printing scriptlets importuje określoną zawartość pliku do bieżącego pliku. Zwróć uwagę, że uwzględnione pliki zawierają tagi <style> i <script>, ponieważ są to fragmenty kodu HTML, a nie czyste pliki .css ani .js.

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>

Ładuj dane asynchronicznie, nie w szablonach

Szablonu HTML można używać do szybkiego tworzenia prostych interfejsów, ale należy go używać w ograniczonym zakresie, aby interfejs był elastyczny. Kod z szablonów jest uruchamiany raz podczas wczytywania strony, a treści nie są wysyłane do klienta do czasu zakończenia przetwarzania. Długotrwałe zadania w kodzie scriptletu mogą spowolnić interfejs.

Tagi Scriptlet służą do wykonywania szybkich, jednorazowych zadań, takich jak dodawanie innych treści lub ustawianie wartości statycznych. Pozostałe dane należy ładować za pomocą wywołań google.script.run. Kodowanie w ten sposób asynchroniczny jest trudniejsze, ale umożliwia szybsze wczytanie interfejsu i wyświetlanie użytkownikowi wskaźnika wczytywania lub innego komunikatu.

Nie – wczytuj w szablonach.

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Działanie – ładowanie asynchroniczne.

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

W przykładowej aplikacji Prostej zadania strona usługi HTML Page.html wczytuje dane w ten sposób, korzystając z szablonów wyłącznie do umieszczania na stronie innego kodu źródłowego.

Wczytywanie zasobów przy użyciu HTTPS

Jeśli Twoja strona jest wyświetlana w nowszym IFRAME trybie piaskownicy, uwzględnienie JavaScriptu lub plików CSS, które nie są wyświetlane przy użyciu protokołu HTTPS, spowoduje błędy podobne do pokazanego poniżej.

Treści mieszane: strona „https://...” została wczytana przez protokół HTTPS, ale zażądała niezabezpieczonego skryptu „http://...”. To żądanie zostało zablokowane. Treść musi być wyświetlana przez HTTPS.

Większość popularnych bibliotek obsługuje zarówno protokół HTTP, jak i HTTPS, więc przełączenie się polega zwykle na wstawieniu do adresu URL ciągu znaków „s”.

Korzystanie z deklaracji typu dokumentu HTML5

Jeśli Twoja strona jest wyświetlana w nowszym IFRAME trybie piaskownicy, pamiętaj, aby na początku pliku HTML umieścić ten fragment kodu.

<!DOCTYPE html>

Wykluczenia tego typu dokumentu informują przeglądarkę, że strona została zaprojektowana pod kątem nowoczesnych przeglądarek i nie powinna renderować się w trybie osobliwości. Dzięki temu możesz zadbać o prawidłowe wyświetlanie strony, nawet jeśli nie zamierzasz korzystać z nowoczesnych elementów HTML5 ani interfejsów API JavaScript.

Wczytaj JavaScript jako ostatni

Wielu programistów internetowych zaleca wczytywanie kodu JavaScript u dołu strony, ponieważ zwiększa to jej szybkość reagowania, a w przypadku usługi HTML jest to jeszcze ważniejsze. Przeniesienie tagów <script> na koniec strony umożliwi wyrenderowanie treści HTML przed przetworzeniem kodu JavaScript, co umożliwi wyświetlenie użytkownikowi wskaźnika postępu lub innego komunikatu.

Wykorzystaj bibliotekę jQuery

jQuery to popularna biblioteka JavaScript, która upraszcza wiele typowych zadań związanych z tworzeniem stron internetowych.