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 mette in evidenza le best practice per lo sviluppo di interfacce utente del servizio HTML reattive e sicure.
HTML, CSS e JavaScript separati
La combinazione di tutti i file HTML, CSS e JavaScript in un unico file può rendere i progetti difficili da gestire. Sebbene Apps Script richieda che il codice lato client si trovi in file .html, devi comunque separare CSS e JavaScript lato client in file propri e includerli nella pagina HTML principale con una funzione personalizzata.
Il seguente esempio utilizza una funzione include lato server in Code.gs per importare Stylesheet.html e JavaScript.html in Page.html. Se chiamata con
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 i tag <style> e <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>Caricare i dati in modo asincrono, non nei modelli
L'HTML basato su modelli può essere utilizzato per creare rapidamente interfacce, 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 le dà l'opportunità di presentare un indicatore di caricamento o un altro
messaggio di caricamento all'utente.
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
Nella modalità sandbox di IFRAME,
tutti i file JavaScript e CSS devono essere pubblicati tramite HTTPS. La pubblicazione di questi file
in modo non sicuro genera errori come il seguente:
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>
Questa dichiarazione del tipo di documento indica 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 aiuta 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.