Priorização off-line

Como as conexões de Internet podem ser instáveis ou inexistentes, considere usar o modo off-line primeiro: crie seu app como se ele não tivesse conexão de Internet. Quando seu app funcionar off-line, adicione o que funcionalidade de rede necessária para que o app faça mais quando estiver on-line. Continue lendo para dicas sobre implementar seu app habilitado para uso off-line.

Visão geral

Os Aplicativos do Google Chrome recebem o seguinte sem custo financeiro:

  • Os arquivos do app, como JavaScript, CSS e fontes, além dos outros recursos necessários, como imagens), já são transferidas por download.
  • Seu app pode salvar e, opcionalmente, sincronizar pequenas quantidades de dados usando a API Chrome Storage.
  • Seu app pode detectar mudanças na conectividade detectando eventos on-line e off-line.

No entanto, esses recursos não são suficientes para garantir que o aplicativo funcionará off-line. Seu modo off-line app devem seguir estas regras:

Use dados locais sempre que possível.
Ao usar recursos da Internet, usar XMLHttpRequest para consegui-los e depois salvar os dados localmente. Use a API Chrome Storage, o IndexedDB ou a API Filesystem para salvar dados localmente.
Separe a interface do app dos dados.
Separar a IU e os dados não apenas melhora o design do app e facilita a ativação uso off-line, mas também permite que você forneça outras visualizações dos dados do usuário. Uma estrutura MVC pode ajudar você mantém a interface e os dados separados.
Suponha que seu app possa ser fechado a qualquer momento.
Salvar o estado do aplicativo (local e remotamente, quando possível) para que os usuários possam continuar eles pararam.
Teste o app completamente.
Verifique se o app funciona bem em cenários comuns e complicados.

Restrições de segurança

Os apps do Chrome têm um limite de lugares para colocar os recursos:

  • Como os dados locais ficam visíveis na máquina do usuário e não podem ser criptografados com segurança, os dados sensíveis os dados precisam permanecer no servidor. Por exemplo, não armazene senhas ou números de cartão de crédito localmente.
  • Todo o JavaScript que o app executa precisa estar no pacote do app. Ela não pode ser inline.
  • Todos os estilos, imagens e fontes CSS podem estar inicialmente localizados no pacote do app. ou em um URL remoto. Se o recurso for remoto, não será possível especificá-lo no HTML. Em vez disso, receba usando XMLHttpRequest (consulte Como mencionar recursos externos). Em seguida, consulte o dados com um URL de blob ou, melhor ainda, salvar e carregar os dados usando a API Filesystem.

No entanto, é possível carregar recursos de mídia grandes, como vídeos e sons de sites externos. Um o motivo dessa exceção à regra é que os elementos <video> e <audio> têm um bom substituto comportamento quando um aplicativo tem conectividade limitada ou nenhuma conectividade. Outra razão é que a busca e a veiculação Mídias com XMLHttpRequest e URLs de blob não permitem streaming ou armazenamento em buffer parcial no momento.

Para fornecer um iframe em sandbox, crie uma tag <webview>. Seu conteúdo pode ser remoto, mas não tem acesso direto às APIs de aplicativos do Google Chrome. Consulte Incorporar páginas da Web externas.

Algumas das restrições aos apps do Chrome são aplicadas pela Política de Segurança de Conteúdo (CSP), que é sempre o seguinte e não pode ser alterado para Aplicativos do Google Chrome:

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;

Especificar offline_enabled

Supõe-se que seu app se comporte bem off-line. Se não estiver, você deve anunciar esse fato, para que que o ícone de inicialização fique esmaecido quando o usuário estiver off-line. Para fazer isso, defina offline_enabled como false. No arquivo de manifesto do app:

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

Como salvar dados localmente

A tabela a seguir mostra as opções para salvar dados localmente. Consulte também Gerenciar dados.

APIMelhor usoObservações
API Chrome StoragePequenas quantidades de dados de stringÓtimo para configurações e estado. Fácil de sincronizar remotamente (mas você não precisa fazer isso). Não é bom para volumes maiores de dados devido às cotas.
API IndexedDBDados estruturadosPermite pesquisas rápidas de dados. Use com a permissão unlimitedStorage.
API FilesystemMais alguma coisaOferece uma área de sandbox onde é possível armazenar arquivos. Use com a permissão unlimitedStorage.

Como salvar dados remotamente

Em geral, você decide como salvar dados remotamente, mas algumas estruturas e APIs podem ajudar (consulte MVC) Arquitetura). Se você usar a API Chrome Storage, todos os dados sincronizáveis serão automaticamente sincronizados sempre que o aplicativo está on-line e o usuário está conectado ao Google Chrome. Se o usuário não estiver conectado, será solicitado que ele faça login. No entanto, os dados sincronizados do usuário serão excluídos se ele desinstala o app. {QUESTION: true?}

Considere salvar as dados por pelo menos 30 dias após a desinstalação do app, para que os usuários tenham uma boa experiência caso reinstalem seu app.

Como separar a interface dos dados

Usar uma estrutura MVC pode ajudar você a projetar e implementar seu aplicativo para que os dados sejam totalmente separado da visualização do aplicativo sobre os dados. Consulte Arquitetura MVC para ver uma lista de estruturas MVC.

Se seu aplicativo se comunicar com um servidor personalizado, o servidor deve fornecer dados, não blocos de HTML. Pense no em relação às APIs RESTful.

Quando os dados estão separados do app, é muito mais fácil oferecer visualizações alternativas dos dados. Por exemplo, você pode fornecer uma visualização de site de quaisquer dados públicos. Uma visualização de site não só pode ser é útil quando o usuário não usa o Chrome, mas pode permitir que os mecanismos de pesquisa encontrem os dados.

Teste

Confira se o app funciona bem nas seguintes circunstâncias:

  • O app é instalado e fica off-line imediatamente. Em outras palavras, o primeiro uso do app está off-line.
  • O app é instalado em um computador e sincronizado com outro.
  • O app é desinstalado e instalado imediatamente outra vez.
  • O aplicativo está sendo executado em dois computadores ao mesmo tempo, com o mesmo perfil. O app precisa se comportar quando um computador fica off-line, o usuário realiza várias ações nele, o computador fica on-line novamente.
  • O app tem conectividade intermitente, alternando frequentemente entre on-line e off-line.

Além disso, verifique se o app não salva os dados confidenciais do usuário (como senhas) na conta do usuário. máquina virtual.