Cette page a été traduite par l'API Cloud Translation.

Service HTML: bonnes pratiques

La création d'interfaces utilisateur avec le service HTML suit de nombreux modèles et pratiques semblables à ceux des autres types de développement Web. Toutefois, certains aspects sont propres à l'environnement Apps Script ou méritent d'être mis en avant. Vous trouverez ci-dessous quelques bonnes pratiques à garder à l'esprit lorsque vous développez vos propres interfaces utilisateur de services HTML.

Séparer le code HTML, CSS et JavaScript

Conserver tout le code HTML, CSS et JavaScript dans un seul fichier peut rendre la lecture et le développement de votre projet difficiles. Bien qu'Apps Script exige l'insertion du code côté client dans des fichiers .html, vous pouvez toujours séparer le code CSS et le code JavaScript côté client dans des fichiers différents, 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 des données de manière asynchrone, et non dans des modèles

Le HTML avec modèle permet de créer rapidement des interfaces simples, mais son utilisation doit être limitée pour vous assurer que votre UI est responsive. Le code des modèles n'est exécuté qu'une seule fois lors du chargement de la page, et aucun contenu n'est envoyé au client tant que le traitement n'est pas terminé. La présence de tâches de longue durée dans le code de votre scriptlet peut ralentir l'UI.

Utilisez des balises de scriptlet pour des tâches rapides et ponctuelles, telles que l'inclusion d'autres contenus ou la définition de valeurs statiques. Toutes les autres données doivent être chargées à l'aide d'appels google.script.run. Le codage de cette manière asynchrone est plus difficile, mais permet à l'interface utilisateur de se charger plus rapidement et lui donne la possibilité de présenter une icône de chargement ou un autre message de chargement à l'utilisateur.

Ne pas : charger des 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 de HTTPS

Si votre page est diffusée à l'aide du nouveau mode sandbox IFRAME, y compris des fichiers JavaScript ou CSS non diffusés via HTTPS, des erreurs telles que celles présentées ci-dessous se produisent.

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 d'ajouter un "s" à l'URL pour passer d'un protocole à l'autre.

Utiliser la déclaration de type de document HTML5

Si votre page est diffusée à l'aide du nouveau mode bac à sable IFRAME, veillez à inclure l'extrait de code suivant en haut de votre fichier HTML.

<!DOCTYPE html>

Ces déclarations de type de document indiquent au navigateur que vous avez conçu la page pour les navigateurs récents et qu'il ne doit pas l'afficher en mode quirks. Même si vous ne prévoyez pas d'utiliser des éléments HTML5 modernes ou des 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é. Cela est encore plus important avec le service HTML. Si vous déplacez vos balises <script> à la fin de votre page, le contenu HTML s'affichera avant que le code JavaScript ne soit traité. Vous pourrez ainsi présenter un outil de chargement ou un autre message à l'utilisateur.

Exploiter les fonctionnalités de jQuery

jQuery est une bibliothèque JavaScript populaire qui simplifie de nombreuses tâches courantes du développement Web.