La creación de interfaces de usuario con el servicio HTML es similar al desarrollo web estándar. Sin embargo, ciertos aspectos son específicos del entorno de Apps Script. En esta guía, se destacan las prácticas recomendadas para desarrollar UIs de servicio HTML seguras y responsivas.
Separa HTML, CSS y JavaScript
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 CSS y 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 a Page.html. Cuando se llama con
fragmentos de código de impresión,
esta función inserta el contenido del archivo directamente. Como se trata de fragmentos de código HTML
en lugar de archivos .css o .js independientes, deben incluir <style>
y <script> etiquetas.
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 con plantillas se puede usar para compilar interfaces rápidamente, pero su uso debe limitarse para garantizar que la 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 fragmento de código, la IU puede parecer lenta.
Usa etiquetas de fragmentos de código para tareas rápidas y únicas, como incluir otro contenido o establecer valores estáticos. Todos los demás datos deben cargarse con
google.script.run llamadas.
La codificación 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 indicador o algún otro mensaje de carga al usuario.
No lo hagas: 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>Hazlo: 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 IFRAME ,
todos los archivos JavaScript y CSS deben entregarse a través de HTTPS. Si entregas estos archivos de forma insegura, se producirán errores como el siguiente:
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure script 'http://...'. This request has been blocked; the content must be served over 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 de tipo de documento HTML5
Si tu página se entrega 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 la 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. Si mueves las etiquetas <script> al final de la página, el contenido HTML
se renderizará antes de que se procese JavaScript, lo que te permitirá presentar un
indicador 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.