Tworzenie interfejsów użytkownika za pomocą usługi HTML przebiega w podobny sposób jak w przypadku innych rodzajów tworzenia stron internetowych. Istnieją jednak pewne aspekty, które są charakterystyczne dla środowiska Apps Script lub które warto podkreślić. Poniżej omówimy sprawdzone metody, o których warto pamiętać podczas tworzenia interfejsów usług HTML.
Oddzielne pliki HTML, CSS i JavaScript
Przechowywanie całego kodu HTML, CSS i JavaScript w jednym pliku może utrudniać odczytywanie i rozwijanie projektu. Apps Script wymaga umieszczenia kodu po stronie klienta w plikach .html, ale możesz oddzielić CSS i JavaScript po stronie klienta do różnych plików, a następnie dołączyć je do głównej strony HTML za pomocą funkcji niestandardowej.
Poniższy przykład definiuje niestandardową funkcję po stronie serwera include() w pliku Code.gs, która importuje zawartość plików Stylesheet.html i JavaScript.html do pliku Page.html. Gdy ta funkcja jest wywoływana za pomocą skryptów drukowania, importuje zawartość określonego pliku do bieżącego pliku. Zwróć uwagę, że dołączone pliki zawierają tagi <style> i <script>, ponieważ są fragmentami kodu HTML, a nie czystymi plikami .css lub .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>Wczytywanie danych asynchronicznie, a nie w szablonach
Szablonowy HTML umożliwia szybkie tworzenie prostych interfejsów, ale jego użycie powinno być ograniczone, aby zapewnić elastyczność 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 ładować się szybciej i wyświetlać użytkownikowi spinner 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
Jeśli strona jest wyświetlana w nowszym IFRAME
trybie piaskownicy, dołączanie plików JavaScript lub CSS, które nie są wyświetlane przy użyciu protokołu HTTPS, spowoduje błędy takie jak ten poniżej.
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żliwi 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.