La creazione di interfacce utente con il servizio HTML segue molti degli stessi pattern e pratiche di altri tipi di sviluppo web. Tuttavia, ci sono alcuni aspetti che sono unici per l'ambiente Apps Script o che altrimenti meritano di essere evidenziati. Di seguito, esamineremo alcune best practice da tenere a mente quando sviluppi le tue UI del servizio HTML.
HTML, CSS e JavaScript separati
Se mantieni tutto il codice HTML, CSS e JavaScript in un unico file, il progetto potrebbe risultare difficile da leggere e sviluppare. Sebbene Apps Script richieda che il codice lato client venga inserito nei file .html, puoi comunque separare CSS e JavaScript lato client in file diversi e poi includerli nella pagina HTML principale con una funzione personalizzata.
L'esempio seguente definisce una funzione include() lato server personalizzata nel file
Code.gs per importare i contenuti dei file Stylesheet.html e JavaScript.html
nel file Page.html. Se chiamata utilizzando
scriptlet di stampa,
questa funzione importa i contenuti del file specificato nel file corrente. Tieni presente
che i file inclusi contengono i tag <style> e <script> perché
sono snippet HTML e non file .css o .js puri.
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>Caricare i dati in modo asincrono, non nei modelli
L'HTML basato su modelli può essere utilizzato per creare rapidamente interfacce semplici, ma il suo utilizzo deve essere limitato per garantire che la UI sia reattiva. Il codice nei modelli viene eseguito una volta quando la pagina viene caricata e nessun contenuto viene inviato al client fino al completamento dell'elaborazione. La presenza di attività di lunga durata nel codice dello scriptlet può rallentare l'interfaccia utente.
Utilizza i tag scriptlet per attività rapide e una tantum, ad esempio l'inclusione di altri contenuti
o l'impostazione di valori statici. Tutti gli altri dati devono essere caricati utilizzando le chiamate
google.script.run.
La codifica in questo modo asincrono è più difficile, ma consente all'interfaccia utente di caricarsi
più rapidamente e di presentare all'utente un indicatore di caricamento o un altro
messaggio di caricamento.
Non caricare i modelli
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Cosa fare: caricare in modo asincrono
<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>Caricare le risorse utilizzando HTTPS
Se la tua pagina viene pubblicata utilizzando la nuova IFRAME
modalità sandbox, l'inclusione di file JavaScript o CSS non pubblicati utilizzando HTTPS genererà errori come quello riportato di seguito.
Contenuti misti: la pagina all'indirizzo "https://..." è stata caricata tramite HTTPS, ma ha richiesto uno script non sicuro "http://...". Questa richiesta è stata bloccata; i contenuti devono essere pubblicati tramite HTTPS.
La maggior parte delle librerie più diffuse supporta sia HTTP che HTTPS, quindi il passaggio è in genere solo una questione di inserire una "s" aggiuntiva nell'URL.
Utilizza la dichiarazione del tipo di documento HTML5
Se la tua pagina viene pubblicata utilizzando la IFRAME
modalità sandbox più recente, assicurati
di includere il seguente snippet di codice nella parte superiore del file HTML.
<!DOCTYPE html>
Queste dichiarazioni del tipo di documento indicano al browser che hai progettato la pagina per i browser moderni e che non deve visualizzarla utilizzando la modalità non standard. Anche se non prevedi di sfruttare gli elementi HTML5 moderni o le API JavaScript, questo ti aiuterà a garantire che la pagina venga visualizzata correttamente.
Carica JavaScript per ultimo
Molti sviluppatori web consigliano di caricare il codice JavaScript nella parte inferiore della pagina
per aumentare la reattività, e questo è ancora più importante con il servizio
HTML. Se sposti i tag <script> alla fine della pagina, il rendering dei contenuti HTML
viene eseguito prima dell'elaborazione del codice JavaScript, il che ti consente di mostrare
all'utente un indicatore di caricamento o un altro messaggio.
Sfruttare jQuery
jQuery è una libreria JavaScript molto usata che semplifica molte attività comuni nello sviluppo web.