Páginas HTML5 são sensíveis às condições de rede, o que prejudica a experiência do usuário. Os pacotes offline resolvem esse problema ao agrupar recursos estáticos para entrega local. Assim, as páginas carregam instantaneamente e você publica atualizações sem precisar da revisão da loja de aplicativos.
Um pacote offline é um arquivo compactado que agrupa recursos estáticos, como arquivos HTML, JavaScript e CSS. O cliente baixa o arquivo antecipadamente e carrega os recursos diretamente do dispositivo local, eliminando a latência de rede nas páginas HTML5.
Os pacotes offline oferecem duas vantagens principais:
Primeiro carregamento mais rápido: Recursos estáticos ficam incorporados ao aplicativo no momento da publicação. Os usuários começam a usar o app imediatamente, sem esperar pelo baixe via rede.
Atualizações over-the-air: Ao lançar uma nova versão ou correção emergencial, atualize a configuração do pacote offline. O aplicativo baixa a atualização automaticamente, ignorando o processo de revisão da loja de aplicativos.
Como funcionam os pacotes offline
Estrutura do pacote offline
O pacote offline é um arquivo compactado no formato .amr. Renomeie a extensão .amr para .zip e descompacte-o para acessar os recursos HTML e o código JavaScript. O contêiner HTML5 carrega esses recursos e os renderiza em uma WebView.
A figura a seguir mostra a estrutura de pastas de um plano de recursos típico em um sistema iOS:
Pasta de primeiro nível: ID de um plano de recursos geral, como
20150901.-
Pasta de segundo nível e subdiretórios: Arquivos de recursos personalizados. Armazene todos os arquivos de frontend em uma única pasta com nome personalizado, como
/www. Defina o arquivo de entrada padrão para o pacote offline, por exemplo,/www/index.html.
Tipos de pacote offline
Na WebView de um aplicativo, o cache não é confiável. Em alguns dispositivos, o sistema o limpa automaticamente ao fechar o app. Para gerenciar bibliotecas comuns, como Zepto e FastClick, de forma consistente, utilize um pacote offline global em vez de depender do cache.
Existem dois tipos:
Pacote offline global: Contém recursos públicos compartilhados entre vários aplicativos. O sistema verifica primeiro o pacote offline global sempre que uma página HTML5 é acessada. Se o pacote contiver o recurso solicitado, ele será servido localmente, sem necessidade de busca na rede. Esses pacotes geralmente recebem atualizações pelo menos uma vez por mês e têm tamanho rigorosamente controlado para garantir ampla cobertura nos clientes.
Pacote offline privado: Destinado ao uso exclusivo de um único aplicativo.
Processo de renderização
O contêiner HTML5 utiliza a mesma URL para solicitar recursos locais e de rede. Ele intercepta cada requisição e decide a origem da resposta:
Se houver um recurso local correspondente, o contêiner HTML5 o fornecerá a partir do pacote offline.
Caso não exista um recurso local equivalente, o contêiner HTML5 buscará o conteúdo na rede.
A WebView não identifica se um recurso veio do armazenamento local ou da rede.
O comportamento de baixe do pacote varia conforme sua configuração:
Se Download Timing estiver definido como Wi-Fi only, o baixe do pacote ocorre automaticamente em segundo plano, restrito a redes Wi-Fi.
Caso Download Timing esteja configurado como Download over all networks, o baixe prossegue em redes não Wi-Fi e consome dados do usuário. Utilize essa opção com cautela.
Se o usuário abrir o aplicativo antes da conclusão do baixe do pacote offline, o app redirecionará para um endereço de fallback e exibirá a página online. Durante a publicação de um pacote offline, uma versão online correspondente também é publicada em uma CDN com a mesma estrutura de pastas. O endereço de fallback chega ao cliente junto com as informações do pacote, permitindo alternância transparente entre páginas online e offline a qualquer momento.
Modo de execução do pacote offline
A abertura de um pacote offline envolve três etapas:
Solicite as informações do pacote. O cliente requisita os dados do pacote offline ao servidor e os armazena em um banco de dados local. Essas informações incluem o endereço de baixe e o número da versão.
Baixe o pacote offline. O cliente transfere o pacote do servidor para o dispositivo.
Instale o pacote offline. O cliente copia o pacote da pasta de baixe para a pasta de instalação.
Nomes de domínio virtuais
Os nomes de domínio virtuais são um mecanismo de contêiner específico para aplicativos offline. Sem eles, a WebView usa o esquema file para acessar páginas armazenadas localmente e expõe o caminho do arquivo na barra de endereços. Isso gera dois problemas:
Experiência do usuário: Um endereço
file://parece estranho e inseguro para os usuários.Segurança: O protocolo de arquivo expõe o caminho local, que qualquer usuário pode inspecionar.
Utilize nomes de domínio virtuais em vez de caminhos de arquivo. Um nome de domínio virtual é um endereço HTTPS compatível com a especificação de esquema de URL, como https://xxxxxxx.HTML5app.example.com. O domínio pai — por exemplo, example.com — deve ser um nome de domínio registrado por você.
O formato padrão para um nome de domínio virtual é:
https://{appid}.HTML5app.example.com.