Página off-line básica para apps da Web no Chrome para Android

É possível iniciar apps de plataforma instalados mesmo off-line. Nessa situação, eles geralmente incluem uma página informando ao usuário que o acesso à Internet não está disponível. Alguns desenvolvedores até criam um conjunto completo de recursos que podem ser usados off-line.

Com aplicativos da Web, a capacidade de trabalhar off-line é mais recente. Isso se tornou possível com o lançamento da API Service Worker. Além disso, quando os sites se tornaram instaláveis, o PWA adicionou um requisito de registrar um service worker e implementar o método fetch() para que um app da Web possa ser instalado. A ideia era incentivar os desenvolvedores a dar aos usuários pelo menos um aviso informando que o app não estava disponível para uso.

Agora, os desenvolvedores não precisam fazer nada para ter uma página off-line padrão. A partir do Chrome 109 no Android, o navegador gera automaticamente uma página que permite que o usuário saiba quando está off-line.

Se o app não implementar uma experiência off-line personalizada, quando o usuário estiver off-line, a página off-line padrão vai usar o ícone do app e a mensagem Você está off-line. Como no exemplo abaixo.

A página off-line padrão de um app da Web de exemplo, em que o logotipo é um círculo rosa e dois sinais de mais e inclui a mensagem "você está off-line".

Acesse esta falha para ver o exemplo anterior em ação.

A opção de criar sua própria página off-line personalizada ainda está disponível. O vídeo a seguir demonstra como exibir sua página personalizada usando o Workbox com uma única linha de código.

Esse recurso está disponível no Android (Chrome 109) e em computadores (Chrome 110). Se você tiver algum feedback, use este formulário.

Foto de Sten Ritterfeld no Unsplash