Compilar interfaces de usuario con el servicio HTML es similar al desarrollo web estándar. Sin embargo, algunos aspectos son específicos del entorno de Apps Script. En esta guía, se destacan las prácticas recomendadas para desarrollar IU de servicios HTML seguras y responsivas.
HTML, CSS y JavaScript separados
Combinar todo el código HTML, CSS y JavaScript en un solo archivo puede dificultar el mantenimiento de los proyectos. Aunque Apps Script requiere que el código del cliente esté en archivos .html, debes separar el CSS y el JavaScript del cliente en sus propios archivos, y luego incluirlos en la página HTML principal con una función personalizada.
En el siguiente ejemplo, se usa una función include del servidor en Code.gs para importar Stylesheet.html y JavaScript.html en Page.html. Cuando se llama con fragmentos de impresión, esta función inyecta el contenido del archivo directamente. Dado que se trata de fragmentos de HTML y no de archivos .css o .js independientes, deben incluir etiquetas <style> y <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>Carga datos de forma asíncrona, no en plantillas
El HTML basado en plantillas se puede usar para compilar interfaces rápidamente, pero su uso debe limitarse para garantizar que tu IU sea responsiva. El código de las plantillas se ejecuta una vez cuando se carga la página, y no se envía contenido al cliente hasta que se completa el procesamiento. Si tienes tareas de larga duración en el código de tu scriptlet, es posible que la IU parezca lenta.
Usa etiquetas de scriptlet para tareas rápidas y únicas, como incluir otro contenido o establecer valores estáticos. Todos los demás datos se deben cargar con llamadas a google.script.run.
Codificar de esta manera asíncrona es más difícil, pero permite que la IU se cargue más rápido y le da la oportunidad de presentar un spinner o algún otro mensaje de carga 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>Sugerencia: 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
En el modo de zona de pruebas de IFRAME, todos los archivos JavaScript y CSS deben publicarse a través de HTTPS. Si se publican estos archivos de forma no segura, se producen errores como los siguientes:
Contenido mixto: La página en "https://…" se cargó a través de HTTPS, pero solicitó una secuencia de comandos no segura "http://…". Se bloqueó esta solicitud. El contenido se debe entregar a través de HTTPS.
La mayoría de las bibliotecas populares admiten HTTP y HTTPS, por lo que el cambio suele ser solo cuestión de insertar una "s" adicional en la URL.
Usa la declaración del tipo de documento HTML5
Si tu página se publica con el modo de zona de pruebas IFRAME más reciente, asegúrate de incluir el siguiente fragmento de código en la parte superior de tu archivo HTML.
<!DOCTYPE html>
Esta declaración de tipo de documento le indica al navegador que diseñaste la página para navegadores modernos y que no debe renderizarla con el modo no estándar. Incluso si no planeas aprovechar los elementos HTML5 modernos o las APIs de JavaScript, esto ayuda a garantizar que tu página se muestre correctamente.
Carga JavaScript al final
Muchos desarrolladores web recomiendan cargar el código JavaScript en la parte inferior de la página para aumentar la capacidad de respuesta, y esto es aún más importante con el servicio HTML. Mover tus etiquetas de <script> al final de la página permite que el contenido HTML se renderice antes de que se procese JavaScript, lo que te permite mostrar un spinner o algún otro mensaje al usuario.
Aprovecha jQuery
jQuery es una biblioteca de JavaScript popular que simplifica muchas tareas comunes en el desarrollo web.