La création d'interfaces utilisateur avec le service HTML suit de nombreux modèles et pratiques identiques à ceux des autres types de développement Web. Toutefois, certains aspects sont propres à l'environnement Apps Script ou méritent d'être mis en évidence. Vous trouverez ci-dessous quelques bonnes pratiques à garder à l'esprit lorsque vous développez vos propres UI de service HTML.
Séparer HTML, CSS et JavaScript
Si vous conservez tout le code HTML, CSS et JavaScript dans un seul fichier, votre projet peut devenir difficile à lire et à développer. Bien qu'Apps Script exige que le code côté client soit placé dans des fichiers .html, vous pouvez toujours séparer votre code CSS et JavaScript côté client dans différents fichiers, puis les inclure dans la page HTML principale à l'aide d'une fonction personnalisée.
L'exemple ci-dessous définit une fonction include() personnalisée côté serveur dans le fichier Code.gs pour importer le contenu des fichiers Stylesheet.html et JavaScript.html dans le fichier Page.html. Lorsqu'elle est appelée à l'aide de scriptlets d'impression, cette fonction importe le contenu du fichier spécifié dans le fichier actuel. Notez que les fichiers inclus contiennent des balises <style> et <script>, car il s'agit d'extraits HTML et non de fichiers .css ou .js purs.
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>Charger les données de manière asynchrone, et non dans les modèles
Le HTML basé sur des modèles peut être utilisé pour créer rapidement des interfaces simples, mais son utilisation doit être limitée pour garantir la réactivité de votre UI. Le code des modèles est exécuté une fois lorsque la page est chargée, et aucun contenu n'est envoyé au client tant que le traitement n'est pas terminé. L'exécution de tâches de longue durée dans le code de votre scriptlet peut ralentir l'interface utilisateur.
Utilisez des tags de scriptlet pour les tâches ponctuelles et rapides, comme l'inclusion d'autres contenus ou la définition de valeurs statiques. Toutes les autres données doivent être chargées à l'aide des appels google.script.run.
Coder de manière asynchrone est plus difficile, mais permet à l'UI de se charger plus rapidement et lui donne la possibilité de présenter un indicateur de progression ou un autre message de chargement à l'utilisateur.
Ne pas charger dans les modèles
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>À faire : charger de manière asynchrone
<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>Charger des ressources à l'aide du protocole HTTPS
Si votre page est diffusée à l'aide du nouveau mode bac à sable IFRAME, l'inclusion de fichiers JavaScript ou CSS non diffusés à l'aide du protocole HTTPS entraînera des erreurs telles que celle ci-dessous.
Contenu mixte : la page "https://..." a été chargée via HTTPS, mais a demandé un script non sécurisé "http://...". Cette requête a été bloquée, car le contenu doit être diffusé via HTTPS.
La plupart des bibliothèques populaires sont compatibles avec HTTP et HTTPS. Pour passer de l'un à l'autre, il suffit généralement d'insérer un "s" supplémentaire dans l'URL.
Utiliser la déclaration de type de document HTML5
Si votre page est diffusée à l'aide du mode bac à sable IFRAME, assurez-vous d'inclure l'extrait de code suivant en haut de votre fichier HTML.
<!DOCTYPE html>
Cette déclaration de type de document indique au navigateur que vous avez conçu la page pour les navigateurs modernes et qu'il ne doit pas l'afficher en mode Quirks. Même si vous ne prévoyez pas d'utiliser les éléments HTML5 modernes ni les API JavaScript, cela vous aidera à vous assurer que votre page s'affiche correctement.
Charger JavaScript en dernier
De nombreux développeurs Web recommandent de charger le code JavaScript en bas de la page pour améliorer la réactivité. C'est d'autant plus important avec le service HTML. En déplaçant vos balises <script> à la fin de votre page, vous permettez au contenu HTML de s'afficher avant le traitement du code JavaScript. Vous pouvez ainsi présenter un indicateur de chargement ou un autre message à l'utilisateur.
Profiter de jQuery
jQuery est une bibliothèque JavaScript populaire qui simplifie de nombreuses tâches courantes dans le développement Web.