Publicado em: 2 de dezembro de 2020
Desde que a Atividade Confiável na Web foi lançada, a equipe do Chrome facilitou o uso dela com o Bubblewrap. Adicionamos outros recursos, como a integração do Google Play Faturamento, e permitimos que ele funcione em mais plataformas, como o ChromeOS.
Recursos do Bubblewrap e da Atividade Confiável na Web
O Bubblewrap ajuda a criar apps que iniciam seus PWAs em uma Atividade Confiável na Web, sem exigir conhecimento de ferramentas específicas da plataforma.
Fluxo de configuração simplificado
Anteriormente, para usar o Bubblewrap, era necessário configurar manualmente o Java Development Kit e o SDK do Android, o que é propenso a erros. A ferramenta agora oferece o download automático das dependências externas quando executada pela primeira vez.
Se preferir, você ainda pode usar uma instalação atual das dependências,
e o novo comando doctor ajuda a encontrar problemas e recomenda correções para a configuração, que agora
pode ser atualizada na linha de comando usando o comando updateConfig.
Assistente melhorado
Ao criar um projeto com init, o Bubblewrap precisa de informações para gerar o app Android. A
ferramenta extrai valores do manifesto do app da Web e fornece padrões sempre que possível.
É possível mudar esses valores ao criar um novo projeto, mas antes o significado de cada campo não era claro. As caixas de diálogo de inicialização foram recriadas com descrições e validações melhores para cada campo de entrada.
Suporte para tela cheia e orientação
Em alguns casos, talvez você queira que o aplicativo use o máximo possível da tela. Ao
criar PWAs, isso é implementado definindo o campo display do manifesto do app da Web como
fullscreen.
Quando o Bubblewrap detecta a opção de tela cheia no manifesto do app da Web, ele configura o aplicativo Android para também ser iniciado em tela cheia ou no modo imersivo, em termos específicos do Android.
O campo orientation do manifesto do app da Web define se o aplicativo deve ser iniciado no
modo retrato, no modo paisagem ou na orientação que o dispositivo está usando no momento. O Bubblewrap agora
lê o campo do manifesto do app da Web e o usa como padrão ao criar o app Android.
É possível personalizar as duas configurações como parte do fluxo bubblewrap init.
Saída de AppBundles
Os pacotes de apps são um formato de publicação para apps que delega a geração e a assinatura final do APK ao Google Play. Na prática, isso permite que arquivos menores sejam disponibilizados aos usuários ao fazer o download do app na loja.
O Bubblewrap agora empacota o aplicativo como um pacote de apps, em um arquivo chamado
app-release-bundle.aab. Dê preferência a esse formato ao publicar apps na Google Play Store, já que ele é exigido pela loja desde 2021.
Delegação de geolocalização
Os usuários esperam que os aplicativos instalados nos dispositivos se comportem de maneira consistente, independentemente da tecnologia. Quando usada em uma Atividade Confiável na Web, a permissão GeoLocation agora pode ser delegada ao sistema operacional. Quando ativada, os usuários veem as mesmas caixas de diálogo que os apps criados com Kotlin ou Java e encontram controles para gerenciar a permissão no mesmo lugar.
O recurso pode ser adicionado pelo Bubblewrap e, como ele adiciona outras dependências ao projeto do Android, você só deve ativá-lo quando o app da Web estiver usando a permissão de geolocalização.
Binários otimizados
Dispositivos com armazenamento limitado são comuns em certas áreas do mundo, e os proprietários desses dispositivos costumam preferir aplicativos menores. Os aplicativos que usam a Atividade Confiável na Web produzem binários pequenos, o que reduz um pouco a ansiedade desses usuários.
O Bubblewrap foi otimizado com a redução da lista de bibliotecas do Android necessárias, o que resultou em binários gerados 800 mil vezes menores. Na prática, isso é menos da metade do tamanho médio gerado pelas versões anteriores. Para aproveitar os binários menores, basta atualizar seu app usando a versão mais recente do Bubblewrap.
Como atualizar um app
Um aplicativo gerado pelo Bubblewrap é composto por um aplicativo da Web e um wrapper leve do Android que abre o PWA. Embora o PWA aberto em uma Atividade Confiável na Web siga os mesmos ciclos de atualização de qualquer app da Web, o wrapper nativo pode e deve ser atualizado.
Atualize o app para garantir que ele use a versão mais recente do wrapper, com as correções de bugs e os recursos mais recentes. Com a versão mais recente do Bubblewrap instalada, o
comando update aplica a versão mais recente do wrapper a um projeto:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Outro motivo para atualizar esses aplicativos é garantir que as mudanças no manifesto da Web sejam
aplicadas ao aplicativo. Use o novo comando merge para isso:
bubblewrap merge
bubblewrap update
bubblewrap build
Atualizações nos critérios de qualidade
O Chrome 86 introduziu mudanças nos critérios de qualidade da Atividade Confiável na Web, que são explicadas em detalhes em Mudanças nos critérios de qualidade para PWAs que usam a Atividade Confiável na Web.
Em resumo, você precisa garantir que seus aplicativos lidem com os seguintes cenários para evitar falhas:
- Falha ao verificar os Digital Asset Links no lançamento do aplicativo
- Falha ao retornar HTTP 200 para uma solicitação de recurso de rede off-line
- Retorno de um erro HTTP 404 ou 5xx no aplicativo.
Além de garantir que o aplicativo passe na validação do Digital Asset Links, os cenários restantes podem ser processados por um service worker:
self.addEventListener('fetch', event => {
event.respondWith((async () => {
try {
return await fetchAndHandleError(event.request);
} catch {
// Failed to load from the network. User is offline or the response
// has a status code that triggers the Quality Criteria.
// Try loading from cache.
const cachedResponse = await caches.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
// Response was not found on the cache. Send the error / offline
// page. OFFLINE_PAGE should be pre-cached when the service worker
// is activated.
return await caches.match(OFFLINE_PAGE);
}
})());
});
async function fetchAndHandleError(request) {
const cache = await caches.open(RUNTIME_CACHE);
const response = await fetch(request);
// Throw an error if the response returns one of the status
// that trigger the Quality Criteria.
if (response.status === 404 ||
response.status >= 500 && response.status < 600) {
throw new Error(`Server responded with status: ${response.status}`);
}
// Cache the response if the request is successful.
cache.put(request, response.clone());
return response;
}
O Workbox incorpora as práticas recomendadas e remove o código boilerplate ao usar service workers. Como alternativa, use um plug-in do Workbox para lidar com esses cenários:
export class FallbackOnErrorPlugin {
constructor(offlineFallbackUrl, notFoundFallbackUrl, serverErrorFallbackUrl) {
this.notFoundFallbackUrl = notFoundFallbackUrl;
this.offlineFallbackUrl = offlineFallbackUrl;
this.serverErrorFallbackUrl = serverErrorFallbackUrl;
}
checkTrustedWebActivityCrash(response) {
if (response.status === 404 || response.status >= 500 && response.status <= 600) {
const type = response.status === 404 ? 'E_NOT_FOUND' : 'E_SERVER_ERROR';
const error = new Error(`Invalid response status (${response.status})`);
error.type = type;
throw error;
}
}
// This is called whenever there's a network response,
// but we want special behavior for 404 and 5**.
fetchDidSucceed({response}) {
// Cause a crash if this is a Trusted Web Activity crash.
this.checkTrustedWebActivityCrash(response);
// If it's a good response, it can be used as-is.
return response;
}
// This callback is new in Workbox v6, and is triggered whenever
// an error (including a NetworkError) is thrown when a handler runs.
handlerDidError(details) {
let fallbackURL;
switch (details.error.details.error.type) {
case 'E_NOT_FOUND': fallbackURL = this.notFoundFallbackUrl; break;
case 'E_SERVER_ERROR': fallbackURL = this.serverErrorFallbackUrl; break;
default: fallbackURL = this.offlineFallbackUrl;
}
return caches.match(fallbackURL, {
// Use ignoreSearch as a shortcut to work with precached URLs
// that have _WB_REVISION parameters.
ignoreSearch: true,
});
}
}