Como as conexões de Internet podem ser instáveis ou inexistentes, é preciso considerar o modo off-line primeiro: programe seu app como se ele não tivesse uma conexão de Internet. Quando seu app funcionar off-line, adicione qualquer funcionalidade de rede necessária para que ele faça mais quando estiver on-line. Continue lendo para ver dicas sobre como implementar seu app off-line.
Visão geral
Os apps do Chrome recebem os seguintes sem custo financeiro:
- Os arquivos do app (JavaScript, CSS e fontes, além de outros recursos necessários, como imagens), já foram transferidos por download.
- Seu app pode salvar e sincronizar pequenas quantidades de dados usando a API Chrome Storage.
- Seu app pode detectar mudanças na conectividade ouvindo eventos on-line e off-line.
No entanto, esses recursos não são suficientes para garantir que o app funcione off-line. O app compatível com o modo off-line precisa seguir estas regras:
- Use dados locais sempre que possível.
- Ao usar recursos da Internet, use
XMLHttpRequestpara consegui-los e salve os dados localmente. Você pode usar a API Chrome Storage, o IndexedDB ou a API Filesystem para salvar dados localmente. - Separe a interface do seu app dos dados.
- Separar a interface dos dados não apenas melhora o design do app e facilita a tarefa de ativar o uso off-line, mas também permite que você ofereça outras visualizações dos dados do usuário. Um framework MVC pode ajudar você a manter a IU e os dados separados.
- Suponha que o app possa ser fechado a qualquer momento.
- Salve o estado do aplicativo (local e remotamente, quando possível) para que os usuários possam continuar de onde 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 são limitados quanto aos locais em que podem 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 confidenciais precisam permanecer no servidor. Por exemplo, não armazene senhas ou números de cartão de crédito localmente.
- Todo JavaScript que o app executa precisa estar no pacote do app. Ele não pode estar inline.
Todos os estilos CSS, imagens e fontes podem ser 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 os dados usando
XMLHttpRequest. Consulte Como referenciar recursos externos. Em seguida, consulte os dados com um URL de blob ou (melhor ainda) salve e carregue os dados usando a API Filesystem.
No entanto, você pode carregar recursos de mídia grandes, como vídeos e sons de sites externos. Um
motivo para essa exceção à regra é que os elementos <video> e <audio> têm um bom comportamento
substituto quando um app tem conectividade limitada ou nenhuma conectividade. Outro motivo é que, no momento, a busca e a exibição de
mídia com XMLHttpRequest e URLs de blob não permite streaming ou armazenamento em buffer parcial.
Para oferecer um iframe no modo sandbox, você pode criar uma tag <webview>. O conteúdo pode ser remoto, mas não tem acesso direto às APIs do app 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 a seguinte e não pode ser alterada para apps do 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
Ele presume que seu app se comporta bem off-line. Caso contrário, anuncie esse fato para que
o ícone de inicialização fique esmaecido quando o usuário estiver off-line. Para 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).
| API | Melhor uso | Observações |
|---|---|---|
| API Chrome Storage | Pequenas 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 grandes quantidades de dados, devido às cotas. |
| API IndexedDB | Dados estruturados | Permite pesquisas rápidas de dados. Use com a permissão unlimitedStorage. |
| API Filesystem | Qualquer outra coisa | Oferece uma área em 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 bibliotecas e APIs podem ajudar. Consulte Arquitetura MVC. Se você usa a API Chrome Storage, todos os dados sincronizáveis serão sincronizados automaticamente sempre que o app estiver on-line e o usuário fizer login no Chrome. Se não estiver, o usuário vai receber uma solicitação para fazer login. No entanto, os dados sincronizados do usuário serão excluídos se o usuário desinstalar seu app. {QUESTION: true?}
Considere salvar os dados dos usuários por pelo menos 30 dias após a desinstalação do app para que eles tenham uma boa experiência caso o reinstalem.
Como separar a IU dos dados
Usar uma estrutura MVC pode ajudar você a projetar e implementar seu aplicativo para que os dados sejam completamente separados da visão do aplicativo sobre os dados. Consulte Arquitetura MVC para ver uma lista de estruturas MVC.
Se o seu aplicativo se comunica com um servidor personalizado, o servidor deve fornecer dados, não pedaços de HTML. Pense em termos de APIs RESTful.
Quando os dados estão separados do app, é muito mais fácil oferecer visualizações alternativas dos dados. Por exemplo, é possível fornecer uma visualização de site de quaisquer dados públicos. A visualização de um site pode ser útil quando o usuário está longe do Chrome e também pode permitir que mecanismos de pesquisa encontrem os dados.
testes
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 aplicativo é off-line.
- O app é instalado em um computador e sincronizado com outro.
- O app é desinstalado e instalado de novo imediatamente.
- O app está sendo executado em dois computadores ao mesmo tempo com o mesmo perfil. O app precisa se comportar razoavelmente quando um computador fica off-line, o usuário faz várias coisas nele e o computador fica on-line novamente.
- O aplicativo tem conectividade intermitente, alternando frequentemente entre on-line e off-line.
Verifique também se o app não salva dados confidenciais do usuário (como senhas) na máquina do usuário.