Se usó la API de Cloud Translation para traducir esta página.

Servicio HTML: recomendaciones

La creación de interfaces de usuario con el servicio HTML sigue muchos de los mismos patrones y prácticas como otros tipos de desarrollo web. Sin embargo, hay algunos aspectos que son exclusivas del entorno de Apps Script o que vale la pena destacando. A continuación, veremos algunas prácticas recomendadas que debes tener en cuenta al desarrollar tus propias IU de servicios HTML.

HTML, CSS y JavaScript separados

Mantener todo el código HTML, CSS y JavaScript en un solo archivo puede hacer que tu proyecto difíciles de leer y desarrollar. Mientras que Apps Script requiere código del cliente para colocarlos en archivos .html, también puedes separar la CSS del cliente JavaScript en diferentes archivos y, luego, incluirlos en la página HTML principal con una función personalizada.

En el siguiente ejemplo, se define una función include() personalizada del servidor en el Archivo Code.gs para importar el contenido de los archivos Stylesheet.html y JavaScript.html en el archivo Page.html. Cuando se llama con imprimir scriptlets, esta función importa el contenido del archivo especificado al archivo actual. Aviso que los archivos incluidos contienen las etiquetas <style> y <script> porque son fragmentos HTML, no archivos .css o .js puros.

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>

Carga datos de forma asíncrona, no en plantillas

El HTML basado en plantillas se puede usar para compilar interfaces simples, pero su uso debe estar limitado para garantizar que tu IU sea adaptables. El código de las plantillas se ejecuta una vez que se carga la página. no se envía ningún contenido al cliente hasta que se completa el procesamiento. Tener las tareas de larga duración en tu código scriptlet pueden hacer que tu IU parezca lenta.

Usa etiquetas de scriptlet para realizar tareas rápidas y únicas, como incluir otro contenido. o establecer valores estáticos. Todos los demás datos se deben cargar usando Llamadas a google.script.run Programar de esta manera asíncrona es más difícil, pero permite que se cargue la IU más rápido y le da la oportunidad de presentar un ícono giratorio u otro cargando el mensaje al usuario.

No: Carga en plantillas.

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Qué debes hacer: Carga de forma asíncrona.

<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>

Carga recursos con HTTPS

Si tu página se publica con la IFRAME más reciente modo de zona de pruebas, que incluye Los archivos JavaScript o CSS que no se publiquen con HTTPS generarán errores como el siguiente: una a continuación.

Contenido mixto: la página en "https://..." se cargó en HTTPS, pero solicitó una secuencia de comandos no segura "http://...". Se bloqueó esta solicitud. el contenido debe entregarse a través de HTTPS.

Las bibliotecas más populares admiten HTTP y HTTPS, por lo que el cambio suele ser solo basta con insertar una “s” de suma en la URL.

Usa la declaración de tipo de documento HTML5

Si tu página se publica con la IFRAME más reciente modo de zona de pruebas, asegúrate para incluir el siguiente fragmento de código en la parte superior de tu archivo HTML.

<!DOCTYPE html>

Las declasiones de este tipo de documento le indican al navegador que diseñaste la página para navegadores actualizados, y que no se debería renderizar tu página con modo no estándar. Incluso si no planeas para aprovechar los elementos HTML5 modernos o las APIs de JavaScript, asegurarte de que tu página se muestre correctamente.

Cargar JavaScript en último lugar

Muchos desarrolladores web recomiendan cargar el código JavaScript en la parte inferior de la página. para aumentar la capacidad de respuesta, lo cual es aún más importante con el código HTML servicio. Si mueves las etiquetas <script> al final de la página, permitirás que el código HTML el contenido se renderiza antes de que se procese JavaScript, lo que te permite presentar un ícono giratorio u otro mensaje al usuario.

Aprovecha jQuery

jQuery es una biblioteca de JavaScript popular que simplifica muchas tareas comunes en el desarrollo web.