Tworzenie interfejsów użytkownika za pomocą usługi HTML jest podobne do standardowego tworzenia stron internetowych. Niektóre aspekty są jednak specyficzne dla środowiska Apps Script. Ten przewodnik zawiera sprawdzone metody tworzenia responsywnych i bezpiecznych interfejsów HTML Service.
Osobne pliki HTML, CSS i JavaScript
Łączenie całego kodu HTML, CSS i JavaScript w jednym pliku może utrudniać utrzymanie projektów. Chociaż Apps Script wymaga, aby kod po stronie klienta znajdował się w plikach .html, nadal należy oddzielić CSS i JavaScript po stronie klienta do osobnych plików i dołączyć je do głównej strony HTML za pomocą funkcji niestandardowej.
W tym przykładzie użyto funkcji include po stronie serwera w Code.gs, aby zaimportować Stylesheet.html i JavaScript.html do Page.html. Gdy ta funkcja jest wywoływana za pomocą skryptów drukowania, wstawia bezpośrednio zawartość pliku. Ponieważ są to fragmenty kodu HTML, a nie osobne pliki .css lub .js, muszą zawierać tagi <style> i <script>.
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>Niesynchroniczne wczytywanie danych, nie w szablonach
Szablonowy HTML może być używany do szybkiego tworzenia interfejsów, ale jego użycie powinno być ograniczone, aby zapewnić responsywność interfejsu. Kod w szablonach jest wykonywany raz, gdy strona jest wczytywana, a do klienta nie są wysyłane żadne treści, dopóki przetwarzanie nie zostanie zakończone. Długotrwałe zadania w kodzie skryptu mogą powodować spowolnienie interfejsu.
Używaj tagów skryptów do szybkich, jednorazowych zadań, takich jak wstawianie innych treści lub ustawianie wartości statycznych. Wszystkie inne dane należy wczytywać za pomocą wywołań google.script.run.
Kodowanie w ten asynchroniczny sposób jest trudniejsze, ale pozwala interfejsowi użytkownika szybciej się ładować i wyświetlać wskaźnik postępu lub inny komunikat o ładowaniu.
Nie – wczytywanie w szablonach
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Do – ł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>Ładowanie zasobów za pomocą protokołu HTTPS
W IFRAME trybie piaskownicy wszystkie pliki JavaScript i CSS muszą być udostępniane przez HTTPS. Udostępnianie tych plików w niebezpieczny sposób powoduje błędy takie jak ten:
Treści mieszane: strona pod adresem „https://...” została załadowana przez HTTPS, ale zażądała niezabezpieczonego skryptu „http://...”. To żądanie zostało zablokowane. Treści muszą być udostępniane przez protokół HTTPS.
Większość popularnych bibliotek obsługuje zarówno HTTP, jak i HTTPS, więc przełączenie zwykle polega na dodaniu litery „s” do adresu URL.
Używaj deklaracji typu dokumentu HTML5
Jeśli strona jest wyświetlana w nowszym IFRAME
trybie piaskownicy, upewnij się, że na początku pliku HTML znajduje się ten fragment kodu:
<!DOCTYPE html>
Ta deklaracja typu dokumentu informuje przeglądarkę, że strona została zaprojektowana z myślą o nowoczesnych przeglądarkach i nie powinna być renderowana w trybie osobliwości. Nawet jeśli nie planujesz korzystać z nowoczesnych elementów HTML5 ani interfejsów JavaScript API, pomoże to zapewnić prawidłowe wyświetlanie strony.
Wczytywanie JavaScriptu na końcu
Wielu programistów stron internetowych zaleca wczytywanie kodu JavaScript na dole strony, aby zwiększyć szybkość reakcji. Jest to jeszcze ważniejsze w przypadku usługi HTML. Przeniesienie tagów <script> na koniec strony umożliwia renderowanie treści HTML przed przetworzeniem JavaScriptu, dzięki czemu możesz wyświetlać użytkownikowi spinner lub inny komunikat.
Korzystanie z jQuery
jQuery to popularna biblioteka JavaScript, która upraszcza wiele typowych zadań związanych z tworzeniem stron internetowych.