Este artigo foi traduzido por máquina.

HTML5

HTML5 Aplicativos off-line: 'Brecha de rosca' cache

Craig Shoemaker

 

Aplicativos off-line de HTML permitem que você crie aplicativos que funcionam sem uma conexão com a Internet usando tecnologias nativas no navegador da Web. Páginas incluídas em um aplicativo offline estão listadas no manifesto do aplicativo e, portanto, são servidas do cache de aplicativo se houver uma conexão à Internet ou não. Às vezes, no entanto, se a conexão com a Internet estiver disponível, você poderá exibir alguns dados do servidor sem exigir que o usuário alterar as páginas.

Scott Guthrie introduziu o conceito de "buraco de rosca" cache no ASP.NET, onde uma página em cache pode incluir pequenas janelas de conteúdo que são atualizadas independentemente da página em cache. Este tutorial demonstra como implementar uma página offline que faz uma chamada de AJAX quando conectado à Web para exibir dados em tempo real para o usuário. Quando estiver offline, a página processa simplesmente dados padrão na página.

Há inúmeras razões práticas para implementar um aplicativo off-line. Enquanto a maioria dos desenvolvedores pensar primeiro o contexto móvel ao considerar que usam um aplicativo off-line, quase qualquer site da Web pode se beneficiar de alguns disponibilidade independentemente do status da conexão. Páginas do site de Home e entre em contato conosco são excelentes candidatos para disponibilidade offline para que os usuários podem obter algumas informações básicas sobre a organização, mesmo quando desconectados.

Construção do aplicativo

O exemplo neste tutorial demonstra como armazenar em cache uma página "Fale conosco" que exibe as notificações de eventos futuros para os usuários. Quando um usuário estiver conectado à Web, listagens de eventos ao vivo serão exibidas; caso contrário, um número de telefone solicitará que o usuário faça uma ligação para obter informações sobre o evento. Essa abordagem mantém o usuário informado e conectado com ou sem acesso à Web pública.

Figura 1 mostra como a página é processada para exibição offline, enquanto a Figura 2 mostra como a página aparece quando servidas do cache de aplicativo, mas o computador está conectado à Web.

When the User Is Working Offline, the Application Prompts Him to Call for Event Information
Figura 1 quando o usuário estiver trabalhando off-line, o aplicativo solicita-lhe a chamada para obter informações de evento

 

When the User Is Connected to the Internet, the Application Shows Event Information from the Server
Figura 2 quando o usuário está conectado à Internet, o aplicativo mostra informações de eventos do servidor

O manifesto

O manifesto do aplicativo atua como lista mestra de recursos incluídos no aplicativo off-line. Figura 3 mostra o arquivo de manifesto completo para esse exemplo.

Arquivo de manifesto da Figura 3 (manifest.aspx)

CACHE MANIFEST
# version 1
CACHE:
contact.htm
style.css
jquery-1.6.3.min.js
map.png
NETWORK:
events.htm
<%@Page
    ContentType="text/cache-manifest"
    ResponseEncoding = "utf-8"
    Language="C#" AutoEventWireup="true"
    CodeBehind="manifest.aspx.cs"
    Inherits="ConditionalCaching.manifest" %>
<script language="CS" runat="server">
  void Page_Load(object sender, System.EventArgs e)
    {
      Response.Cache.SetCacheability(HttpCacheability.NoCache);
    }
</script>

O arquivo começa com o requisito de cabeçalho do MANIFESTO de CACHE e inclui um comentário de versionamento para permitir que as alterações nos arquivos listados para propagar para o cliente.

Em seguida, a seção CACHE faz referência a página de contato que se destina a estar disponível aos usuários independentemente do status da conexão. A página de contato faz referência a uma folha de estilos, jQuery e uma imagem do mapa indicando o local físico do escritório.

Finalmente, a seção de rede é necessária nesta instância para garantir o acesso à página eWineSales (mostrado na a Figura 4). O motivo que desta página não está incluída na seção CACHE é no mundo real a página eventos deve ser elaborada dinamicamente como uma página gerados pelo servidor. Armazenamento em cache uma página como essa acabaria com o objetivo de tornar os dados de evento disponíveis para o usuário quando conectado à Web dinâmicos. Com a página de eventos listada na seção de rede, em vez da seção CACHE, a API de Cache do aplicativo não tentar cancelar a solicitação para a página. Em última análise, a inclusão da página na seção rede informa ao navegador para sempre tentar buscar a página da Web, independentemente do estado da conexão.

Página de eventos da Figura 4 (eWineSales)

<table border="1" cellpadding="2" cellspacing="0">
  <tr>
    <td>Aug 15</td>
    <td><a href="/events/anaheim">Anahiem Convention Center</a></td>
  </tr>
  <tr>
    <td>Sept 5</td>
    <td><a href="/events/los-angeles">Los Angeles Convention Center</a></td>
  </tr>
  <tr>
    <td>Oct 3</td>
    <td><a href="/events/las-vegas">Las Vegas Convention Center</a></td>
  </tr>
  <tr>
    <td>Nov 14</td>
    <td><a href="/events/denver">Colorado Convention Center</a></td>
  </tr>
</table>

Observe que o manifesto é implementado como um arquivo ASPX para desativar o cache do navegador do arquivo. Talvez você prefira desativar o cache no servidor Web através de definições de configuração, mas essa abordagem é usada aqui para tornar o código de amostra mais portátil para fins de demonstração.

O contato que conosco de página

Contato página HTML, mostrado na a Figura 5, é implementado como você pode esperar, independentemente da página está sendo otimizada para acesso off-line. O detalhe mais importante a observar no código HTML da página é o conteúdo do parágrafo com a identificação do localMessage. Este contêiner mantém o conteúdo que é exibido quando o usuário estiver trabalhando off-line; Esse conteúdo é substituída em interrupções quando uma conexão com a Internet estiver disponível.

Figura 5 página de contato (contact.htm)

<!DOCTYPE html>
<html manifest="manifest.aspx">
<head>
  <title></title>
  <link rel="Stylesheet" href="style.css" type="text/css" />
  <script src="jquery-1.6.3.min.js" type="text/javascript"></script>
  <script>
    $(function () {
      window.applicationCache.onupdateready = function (e) {
        applicationCache.swapCache();
        window.location.reload();
      }
      function isOnLine() {
        //return false;
        return navigator.onLine;
      }
      function showEventInfo() {
        if (isOnLine()) {
            $("#localMessage").hide();
            $.get("/events.htm", function (data) {
                $("#eventList").html(data);
                $("#eventList table tr:odd").addClass("alt");
            });
        }
        else {
          $("#localMessage").show();
        }
      }
      showEventInfo();
    });
  </script>
</head>
<body>
  <div id="container">
    <h1>Awesome Company</h1>
    <h2>Contact Us</h2>
    <p>
      Awesome Company<br />
      1800 Main Street<br />
      Anytown, CA 90210<br />
      (800) 555-5555<br />
      <a href="mailto:awesome@company.com">awesome@company.com</a>
    </p>
    <img src="map.png" />
    <div id="events">
      <h2>Events</h2>
      <p>We are coming to a city near you!</p>
      <p id="localMessage">Give us a call at (800) 555-5555
        to hear about our upcoming conference dates.</p>
      <div id="eventList"></div>
    </div>
    <div id="version">Version 1</div>
  </div>
</body>
</html>

Observe que, na seção script da página, todas as funções são definidas e executar aninhadas no manipulador de documento preparado para jQuery:

$(function () {
    ...
});

A primeira coisa é processar todas as atualizações para a página carregada no cache do aplicativo, manipulando os eventos updateready. Se o aplicativo manifesto alterações, todos os arquivos listados na sua seção CACHE são copiados para o cliente. Quando novas versões dos arquivos estão disponíveis, o evento aciona de updateready e a página podem carregar a versão mais recente da página contato do cache, chamada applicationCache.swapCache. Finalmente, depois que a versão mais recente é carregada na memória, a página é recarregada para exibir as alterações para o usuário:

window.applicationCache.onupdateready = function (e) {
  applicationCache.swapCache();
  window.location.reload();
}

Em seguida, a página precisa de um mecanismo para detectar se o computador está funcionando em um estado conectado ou desconectado. A função isOnLine apenas encapsula uma chamada para a propriedade booleana de navigator.onLine somente leitura. Esse encapsulamento é útil porque você deseja substituir o valor para fins de teste, você pode un-comentário a linha falsa de retorno e testar o comportamento da página off-line sem ter que desconectar, na verdade, da Web:

function isOnLine() {
  //return false;
  return navigator.onLine;
}

Aliás, é um pouco rudimentar usando navigator.onLine como o único mecanismo para detectar o status on-line. Para uma maneira mais eficiente detectar o status on-line, por favor, leia o tutorial, "trabalham com a grade com off-line do HTML5," por Paul Kinlan.

A função de ShowEvent (MostrarEvento) é responsável por implementar a funcionalidade de "buraco de rosca cache" para o aplicativo off-line de HTML. A função primeiro detecta o status da conexão do computador e, em seguida, ambos buscas e processa os dados de evento ao vivo ou apenas mostra as informações de evento já existente na página.

Se a função de isOnLine retornar true, a mensagem local está oculto do usuário e uma chamada para a página eventos de AJAX é iniciada. Quando uma resposta da chamada assíncrona for reconhecida, o HTML resultante é alimentado para o recipiente de /eventlist e a tabela é formatada com o striping zebra.

Se, por outro lado, o computador está trabalhando offline, a mensagem local é exibida para o usuário da seguinte forma:

function showEventInfo() {
  if (isOnLine()) {
      $("#localMessage").hide();
      $.get("/events.htm", function (data) {
        $("#eventList").html(data);
        $("#eventList table tr:odd").addClass("alt");
      });
  }
  else {
    $("#localMessage").show();
  }
}

Finalmente, o arquivo de manifesto é referenciado na parte superior da página HTML, preenchendo o atributo de manifesto do elemento html apontando para o arquivo de manifesto:

<html manifest="manifest.aspx">

Figura 6 mostra o arquivo Style. CSS listados no manifesto e referenciado pela página de contato.

Figura 6 folha de estilo (Style. CSS)

body
{
  font-family:Segoe UI, Arial, Helvetica, Sans-Serif;
  background-color:#eee;
}
h1
{
  text-transform:uppercase;
  letter-spacing:-2px;
  width:400px;
  margin-top:0px;
}
#container
{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  padding:20px;
  width:700px;
  -webkit-box-shadow: 3px 3px 7px #999;
  box-shadow: 6px 6px 24px #999;
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top:20px;
  background-color:#fff;
}
#events
{
  position:absolute;
  width:210px;
  right:20px;
  top:255px;
  border:1px solid #ccc;
  padding:10px;
  font-size:.7em;
  background-color:#eee;
}
#events h2
{
  margin:0px;
}
#version
{
  font-size:.7em;
  color:#ccc;
}
table
{
  border-collapse:collapse;
}
table, tr, td
{
  border:1px solid #999;
}
.alt
{
  background-color:#ccc;
}

Conclusão

Mesmo que as páginas são carregadas no cache do aplicativo servidas do cache se o computador está conectado à Internet ou não, você pode construir suas páginas para tirar proveito dos recursos on-line, quando estiverem disponíveis. "Cache de rosca buraco" funciona fazendo uma chamada de AJAX para o servidor quando uma conexão estiver disponível e, em seguida, os resultados de processamento para o usuário. Se a página estiver em um estado desconectado, o aplicativo silenciosamente processa dados já disponíveis na página — é o melhor dos dois mundos!

Recursos

Craig Shoemaker é um desenvolvedor de software, podcaster, blogger e produto Gerenciador de orientação para Infragistics. Como host da Podcast polimórfico e Pixel8, Shoemaker oferece o que ele adora mais — tornando contribuições para a comunidade e o melhor de eruditos do setor de desenho. Shoemaker é um aplicativo Microsoft ASP.NET, ASP Insider e convidado faz palestras em vários grupos de usuários do desenvolvedor e feiras de negócios. Ele é co-autor de "início ASP.NET 2.0 AJAX"(Wrox, 2007) e"Iniciando o ASP.NET AJAX"(Wrox, 2006) e o autor colaborador Pluralsight, TekPub e CODE Magazine*.*Em seu tempo livre Shoemaker gosta procurando um palheiro na qual ocultar sua coleção de agulha prêmio. Você pode contatá-no Twitter @ craigshoemaker ou pelo email CShoemaker@infragistics.com.