Esta página foi traduzida pela API Cloud Translation.

Serviço HTML: práticas recomendadas

A criação de interfaces do usuário com o serviço HTML segue muitos dos mesmos padrões e práticas que outros tipos de desenvolvimento da Web. No entanto, há alguns aspectos que são exclusivos do ambiente do Apps Script ou que valem a pena destacar. A seguir, vamos abordar algumas práticas recomendadas que você precisa considerar ao desenvolver suas próprias interfaces de serviço HTML.

Separar HTML, CSS e JavaScript

Manter todo o código HTML, CSS e JavaScript em um arquivo pode dificultar a leitura e o desenvolvimento do projeto. Embora o Apps Script exija que o código do lado do cliente seja colocado em arquivos .html, você ainda pode separar o CSS e o JavaScript do lado do cliente em arquivos diferentes e incluí-los na página HTML principal com uma função personalizada.

O exemplo abaixo define uma função include() personalizada do lado do servidor no arquivo Code.gs para importar o conteúdo dos arquivos Stylesheet.html e JavaScript.html para o arquivo Page.html. Quando chamada usando scriptlets de impressão, essa função importa o conteúdo do arquivo especificado para o arquivo atual. Os arquivos incluídos contêm tags <style> e <script> porque são snippets HTML, e não arquivos .css ou .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>

Carregar dados de forma assíncrona, não em modelos

O HTML com modelo pode ser usado para criar rapidamente interfaces simples, mas o uso dele precisa ser limitado para garantir que a interface seja responsiva. O código nos modelos é executado uma vez quando a página é carregada, e nenhum conteúdo é enviado ao cliente até que o processamento seja concluído. Ter tarefas de longa duração no código do scriptlet pode fazer com que a interface pareça lenta.

Use tags de scriptlet para tarefas rápidas e únicas, como incluir outro conteúdo ou definir valores estáticos. Todos os outros dados precisam ser carregados usando chamadas google.script.run. A codificação dessa maneira assíncrona é mais difícil, mas permite que a interface seja carregada mais rapidamente e oferece a oportunidade de apresentar um ícone de carregamento ou outra mensagem de carregamento ao usuário.

Não: carregar em modelos

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

Faça: carregue de forma assí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>

Carregar recursos usando HTTPS

Se a página for exibida usando o novo IFRAME modo sandbox, a inclusão de arquivos JavaScript ou CSS que não são exibidos usando HTTPS vai resultar em erros como o abaixo.

Conteúdo misto: a página em "https://..." foi carregada por HTTPS, mas solicitou um script não seguro "http://...". Esta solicitação foi bloqueada. O conteúdo precisa ser veiculado por HTTPS.

A maioria das bibliotecas mais conhecidas oferece suporte a HTTP e HTTPS. Portanto, a troca geralmente é uma questão de inserir um "s" adicional no URL.

Usar a declaração de tipo de documento HTML5

Se a página for veiculada usando o novo IFRAME modo sandbox, inclua o snippet de código abaixo na parte de cima do arquivo HTML.

<!DOCTYPE html>

Essas declarações de tipo de documento informam ao navegador que você projetou a página para navegadores modernos e que ele não deve renderizar a página usando o modo quirks. Mesmo que você não planeje usar elementos modernos de HTML5 ou APIs JavaScript, isso vai ajudar a garantir que sua página seja exibida corretamente.

Carregar o JavaScript por último

Muitos desenvolvedores da Web recomendam carregar o código JavaScript na parte de baixo da página para aumentar a capacidade de resposta, e isso é ainda mais importante com o serviço HTML. Mover as tags <script> para o final da página vai permitir que o conteúdo HTML seja renderizado antes que o JavaScript seja processado, permitindo que você apresente uma roda de carregamento ou outra mensagem ao usuário.

Aproveitar o jQuery

O jQuery é uma biblioteca JavaScript conhecida que simplifica muitas tarefas comuns no desenvolvimento da Web.