Utilizando aplicativos offline

  • Revision slug: Apps/Using_apps_offline
  • Revision title: Utilizando aplicativos offline
  • Revision id: 292868
  • Criado:
  • Criador: mateus.m.luna
  • É a revisão atual? Sim
  • Comentar

Conteúdo da revisão

A capacidade de utilizar aplicativos quando não se está conectado à internet é especialmente importante para dispositicos móveis, que podem estar fora da área de cobertura. Mas também é importante para sistemas desktop, um exemplo comum é o uso em um avião que não possui Wifi.

Várias estratégias e tecnologias podem ajudar a garantir uma boa experiência offline:

Cache da aplicação

O modo básico de fazer uma aplicação trabalhar offline é com o cache da aplicação, que armazena recursos para o aplicativo no sistema cliente para que eles estejam disponíveis mesmo quando a Internet não está.

Verificando a conectividade

Um fator importante para se trabalhar bem offline é verificar se o dispositivo possui conectividade e se responde apropriadamente quando não. Mesmo uma mensagem para o usuário de que o aplicativo não trabalha offline é melhor do que ficar travado ou receber uma mensagem de tempo limite excedido.

A maneira mais simples de se fazer isso é verificar e escutar mudanças na propriedade window.navigator.onLine. Entretanto, aquele valor não é garantidamente preciso.

Se você está utilizando XMLHttpRequest para atualizar dados dinamicamente, você pode verificar sua resposta para determinar se a conexão caiu durante o uso do seu aplicativo.

Referências

Fonte da revisão

<p>A capacidade de utilizar aplicativos quando não se está conectado à internet é especialmente importante para dispositicos móveis, que podem estar fora da área de cobertura. Mas também é importante para sistemas desktop, um exemplo comum é o uso em um avião que não possui Wifi.</p>
<p>Várias estratégias e tecnologias podem ajudar a garantir uma boa experiência offline:</p>
<ul>
  <li><a href="#Application_cache" title="#Application_cache">Application cache</a></li>
  <li><a href="#Checking_connectivity" title="#Checking_connectivity">Checking connectivity</a></li>
  <li><a href="/en/DOM/Storage" title="en/DOM/Storage">Local storage</a></li>
  <li><a href="/en/IndexedDB" title="IndexedDB">IndexedDB</a></li>
</ul>
<h2 id="Cache_da_aplica.C3.A7.C3.A3o">Cache da aplicação</h2>
<p>O modo básico de fazer uma aplicação trabalhar offline é com o cache da aplicação, que armazena recursos para o aplicativo no sistema cliente para que eles estejam disponíveis mesmo quando a Internet não está.</p>
<ul>
  <li><a href="/en/HTML/Using_the_application_cache" title="/en/Using_the_Application_Cache">Using the application cache</a></li>
  <li><a class="external" href="http://dev.w3.org/html5/spec/offline.html" title="http://dev.w3.org/html5/spec/offline.html">W3C specification for offline Web applications</a></li>
</ul>
<h2 id="Verificando_a_conectividade">Verificando a conectividade</h2>
<p>Um fator importante para se trabalhar bem offline é verificar se o dispositivo possui conectividade e se responde apropriadamente quando não. Mesmo uma mensagem para o usuário de que o aplicativo não trabalha offline é melhor do que ficar travado ou receber uma mensagem de tempo limite excedido.</p>
<p>A maneira mais simples de se fazer isso é verificar e escutar mudanças na propriedade <code>window.navigator.onLine</code>. Entretanto, aquele valor não é garantidamente preciso.</p>
<p>Se você está utilizando <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest ">XMLHttpRequest </a>para atualizar dados dinamicamente, você pode verificar sua resposta para determinar se a conexão caiu durante o uso do seu aplicativo.</p>
<h2 id="Refer.C3.AAncias">Referências</h2>
<ul>
  <li><a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html" title="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">Working off the grid with HTML5 offline</a></li>
  <li><a class="external" href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/" title="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">"Offline": What does it mean and why do I care?</a></li>
  <li><a class="external" href="http://diveintohtml5.info/offline.html" title="http://diveintohtml5.info/offline.html">Dive into HTML5: Let's take this offline</a></li>
</ul>
Reverter para esta revisão