HTML-сервис: лучшие практики

Создание пользовательских интерфейсов с использованием HTML-сервисов аналогично стандартной веб-разработке. Однако некоторые аспекты специфичны для среды Apps Script. В этом руководстве рассматриваются лучшие практики разработки адаптивных и безопасных пользовательских интерфейсов на основе HTML-сервисов.

Раздельное использование HTML, CSS и JavaScript

Объединение всего HTML, CSS и JavaScript в один файл может затруднить поддержку проекта. Хотя Apps Script требует, чтобы клиентский код находился в файлах .html, всё же следует разделять CSS и клиентский JavaScript на отдельные файлы и включать их в основную HTML-страницу с помощью пользовательской функции.

В следующем примере используется серверная функция include из Code.gs для импорта файлов Stylesheet.html и JavaScript.html в Page.html . При вызове с параметром print scriptlets эта функция внедряет содержимое файлов напрямую. Поскольку это фрагменты HTML-кода, а не отдельные файлы .css или .js, они должны содержать теги <style> и <script> .

Code.gs 

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Страница.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>

Загружайте данные асинхронно, а не в шаблонах.

Использование шаблонного HTML позволяет быстро создавать интерфейсы, но его применение следует ограничить, чтобы обеспечить адаптивность пользовательского интерфейса. Код в шаблонах выполняется один раз при загрузке страницы, и контент не отправляется клиенту до завершения обработки. Наличие длительно выполняющихся задач в коде скриптлета может привести к замедлению работы пользовательского интерфейса.

Используйте теги scriptlet для быстрых, разовых задач, таких как добавление другого контента или установка статических значений. Все остальные данные следует загружать с помощью вызовов google.script.run . Кодирование в таком асинхронном режиме сложнее, но позволяет интерфейсу загружаться быстрее и дает возможность отображать индикатор загрузки или другое сообщение о загрузке для пользователя.

Не загружайте шаблоны.

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

Выполнять — загружать асинхронно

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

Загрузка ресурсов с использованием HTTPS

В режиме песочницы IFRAME все файлы JavaScript и CSS должны передаваться по протоколу HTTPS. Небезопасная передача этих файлов приводит к ошибкам, подобным следующим:

Смешанный контент: страница по адресу 'https://...' была загружена по протоколу HTTPS, но запросила небезопасный скрипт 'http://...'. Этот запрос был заблокирован; контент должен передаваться по протоколу HTTPS.

Большинство популярных библиотек поддерживают как HTTP, так и HTTPS, поэтому переключение обычно сводится к добавлению буквы «s» в URL-адрес.

Используйте объявление типа документа HTML5.

Если ваша страница отображается в новом режиме песочницы IFRAME , обязательно добавьте следующий фрагмент кода в начало вашего HTML-файла.

<!DOCTYPE html>

Это объявление типа документа сообщает браузеру, что вы разработали страницу для современных браузеров и что он не должен отображать вашу страницу в режиме совместимости (quirks mode) . Даже если вы не планируете использовать современные элементы HTML5 или API JavaScript, это помогает гарантировать корректное отображение вашей страницы.

Загрузить последний JavaScript

Многие веб-разработчики рекомендуют размещать JavaScript-код в конце страницы для повышения отзывчивости, и это особенно важно для HTML-сервисов. Перемещение тегов <script> в конец страницы позволяет HTML-контенту отображаться до обработки JavaScript, что дает возможность показать пользователю индикатор загрузки или другое сообщение.

Воспользуйтесь преимуществами jQuery.

jQuery — популярная библиотека JavaScript, упрощающая многие распространенные задачи в веб-разработке.