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. При вызове с использованием скриптлетов печати эта функция импортирует указанное содержимое файла в текущий файл. Обратите внимание, что включаемые файлы содержат теги <style> и <script> , поскольку они представляют собой фрагменты HTML, а не файлы .css или .js.

Код.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>

Таблица стилей.html 

<style>
p {
  color: green;
}
</style>

JavaScript.html 

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

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

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

Используйте теги скриптлетов для быстрых разовых задач, таких как добавление другого контента или установка статических значений. Все остальные данные следует загружать с помощью вызовов 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>

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

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

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

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

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