La création d'interfaces utilisateur avec le service HTML est semblable au développement Web standard. Toutefois, certains aspects sont spécifiques à l'environnement Apps Script. Ce guide présente les bonnes pratiques pour développer des interfaces utilisateur HTML Service responsives et sécurisées.
Séparer HTML, CSS et JavaScript
Combiner tous les fichiers HTML, CSS et JavaScript en 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 quand même séparer le CSS et le 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 les balises <style> et <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>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, 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 scriptlet pour les tâches ponctuelles 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
En mode bac à sable de IFRAME, tous les fichiers JavaScript et CSS doivent être diffusés via HTTPS. Si ces fichiers ne sont pas diffusés de manière sécurisée, des erreurs telles que les suivantes se produiront :
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. 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 permet de s'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.