La création d'interfaces utilisateur avec le service HTML est semblable au développement Web standard. Cependant, certains aspects sont spécifiques à l'environnement Apps Script. Ce guide présente les bonnes pratiques pour développer des interfaces utilisateur réactives et sécurisées avec le service HTML.
Séparer le code HTML, CSS et JavaScript
Combiner tous les codes HTML, CSS et JavaScript dans un seul fichier peut rendre les projets difficiles à gérer. Bien qu'Apps Script exige que le code côté client se trouve dans des fichiers .html, vous devez toujours séparer le code CSS et le code JavaScript côté client dans leurs propres fichiers et les inclure dans la page HTML principale à l'aide d'une fonction personnalisée.
L'exemple suivant utilise une fonction include côté serveur dans Code.gs pour importer Stylesheet.html et JavaScript.html dans Page.html. Lorsqu'elle est appelée avec
des scriptlets d'impression,
cette fonction injecte directement le contenu du fichier. Comme il s'agit d'extraits HTML
plutôt que de fichiers .css ou .js autonomes, ils doivent inclure <style>
et <script> balises.
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, pas dans les modèles
Le code HTML basé sur des modèles peut être utilisé pour créer rapidement des interfaces, mais son utilisation doit être limitée pour garantir la réactivité de votre interface utilisateur. Le code des modèles est exécuté une seule fois lorsque la page est chargée, et aucun contenu n'est envoyé au client tant que le traitement n'est pas terminé. Si votre code de scriptlet comporte des tâches de longue durée, votre interface utilisateur peut sembler lente.
Utilisez des balises de scriptlet pour les tâches rapides et ponctuelles, comme l'inclusion d'un autre contenu ou la définition de valeurs statiques. Toutes les autres données doivent être chargées à l'aide d'
google.script.run appels.
Coder de manière asynchrone est plus difficile, mais cela permet à l'interface utilisateur de se charger plus rapidement et de présenter un indicateur 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>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 les ressources à l'aide du protocole HTTPS
En mode bac à sable IFRAME ,
tous les fichiers JavaScript et CSS doivent être diffusés via HTTPS. La diffusion non sécurisée de ces fichiers entraîne des erreurs telles que les suivantes :
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. Le contenu doit être diffusé via HTTPS.
La plupart des bibliothèques populaires sont compatibles avec HTTP et HTTPS. Il suffit donc 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
plus récent, veillez
à 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 utilisant le mode quirks. Même si vous ne prévoyez pas de profiter des éléments HTML5 modernes ni des API JavaScript, cela permet de 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é, ce qui est encore plus important avec le service HTML. Le fait de déplacer vos balises <script> à la fin de votre page permet au contenu HTML
de s'afficher avant le traitement du code JavaScript, ce qui vous permet de présenter un
indicateur 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.