Создание пользовательских интерфейсов с помощью службы HTML следует многим из тех же шаблонов и практик, что и другие типы веб-разработки. Однако есть некоторые аспекты, которые являются уникальными для среды Apps Script или заслуживают внимания иным образом. Ниже мы рассмотрим некоторые рекомендации, которые следует учитывать при разработке собственных пользовательских интерфейсов HTML-сервисов.
Чтобы продемонстрировать эти лучшие практики, мы создали пример веб-приложения с использованием службы HTML под названием Simple Tasks . Полный исходный код и инструкции по настройке доступны в нашем репозитории GitHub .
Разделите 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>Do — загружать асинхронно
<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>В примере приложения Simple Tasks страница службы HTML Page.html загружает данные таким образом и использует шаблоны только для включения в страницу другого исходного кода.
Загрузка ресурсов с использованием HTTPS
Если ваша страница обслуживается с использованием нового режима песочницы IFRAME , включение файлов JavaScript или CSS, не обслуживаемых с использованием HTTPS, приведет к ошибкам, подобным приведенной ниже.
Смешанное содержимое: страница https://... была загружена через HTTPS, но запросила небезопасный скрипт http://.... Этот запрос заблокирован; контент должен передаваться через HTTPS.
Большинство популярных библиотек поддерживают как HTTP, так и HTTPS, поэтому переключение обычно сводится к вставке дополнения в URL-адрес.
Используйте объявление типа документа HTML5.
Если ваша страница обслуживается с использованием нового режима изолированной программной среды IFRAME , обязательно включите следующий фрагмент кода в верхнюю часть HTML-файла.
<!DOCTYPE html>
Это объявление типа документа сообщает браузеру, что вы разработали страницу для современных браузеров и что он не должен отображать вашу страницу в режиме совместимости . Даже если вы не планируете использовать преимущества современных элементов HTML5 или API JavaScript, это поможет обеспечить правильное отображение вашей страницы.
Загружать JavaScript последним
Многие веб-разработчики рекомендуют загружать код JavaScript внизу страницы, чтобы повысить скорость реагирования, и это еще более важно для службы HTML. Перемещение тегов <script> в конец страницы позволит отображать HTML-контент до обработки JavaScript, что позволит вам представить пользователю счетчик или другое сообщение.
Воспользуйтесь преимуществами jQuery
jQuery — популярная библиотека JavaScript, которая упрощает многие распространенные задачи веб-разработки.