La creazione di interfacce utente con il servizio HTML è simile allo sviluppo web standard. Tuttavia, alcuni aspetti sono specifici dell'ambiente Apps Script. Questa guida evidenzia le best practice per lo sviluppo di UI del servizio HTML reattive e sicure.
Separare HTML, CSS e JavaScript
La combinazione di tutti i file HTML, CSS e JavaScript in un unico file può rendere difficile la manutenzione dei progetti. Sebbene Apps Script richieda che il codice lato client sia in file .html, devi comunque separare CSS e JavaScript lato client nei rispettivi file e includerli nella pagina HTML principale con una funzione personalizzata.
L'esempio seguente utilizza una funzione include lato server in Code.gs per importare Stylesheet.html e JavaScript.html in Page.html. Quando viene chiamata con
gli scriptlet di stampa,
questa funzione inserisce direttamente il contenuto del file. Poiché si tratta di snippet HTML
anziché di file .css o .js autonomi, devono includere <style>
e <script> tag.
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 con modelli può essere utilizzato per creare rapidamente interfacce, ma il suo utilizzo deve essere limitato per garantire la reattività dell'UI. Il codice nei modelli viene eseguito una sola volta al caricamento della pagina e nessun contenuto viene inviato al client finché l'elaborazione non è completata. L'esecuzione di attività a lunga esecuzione nel codice dello scriptlet può rallentare l'UI.
Utilizza i tag scriptlet per attività rapide e una tantum, come l'inclusione di altri contenuti o l'impostazione di valori statici. Tutti gli altri dati devono essere caricati utilizzando
google.script.run chiamate.
La codifica in questo modo asincrono è più difficile, ma consente all'UI di caricarsi più rapidamente e di presentare all'utente una rotellina o un altro messaggio di caricamento.
Non caricare nei modelli
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>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
Nella modalità IFRAME sandbox,
tutti i file JavaScript e CSS devono essere pubblicati tramite HTTPS. La pubblicazione non sicura di questi file genera errori come i seguenti:
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 in genere è sufficiente inserire una "s" aggiuntiva nell'URL.
Utilizzare la dichiarazione del tipo di documento HTML5
Se la pagina viene pubblicata utilizzando la modalità sandbox IFRAME
più recente, assicurati
di includere il seguente snippet di codice nella parte superiore del file HTML.
<!DOCTYPE html>
Questa dichiarazione del tipo di documento indica al browser che hai progettato la pagina per i browser moderni e che non deve eseguire il rendering della pagina utilizzando la modalità non standard. Anche se non prevedi di sfruttare gli elementi HTML5 moderni o le API JavaScript, questo passaggio ti aiuta a garantire che la pagina venga visualizzata correttamente.
Caricare 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, i contenuti HTML
vengono sottoposti a rendering prima dell'elaborazione di JavaScript, il che ti consente di presentare all'utente uno
spinner o un altro messaggio.
Sfruttare jQuery
jQuery è una libreria JavaScript molto diffusa che semplifica molte attività comuni nello sviluppo web.