Transformar uma aplicação web em uma PWA offline instalável

Já temos uma aplicação web funcional e queremos que ela se comporte como um aplicativo móvel completo, mas sem reescrever tudo do zero. A tarefa é transformar o frontend atual em um Progressive Web App para que visitantes de smartphones e tablets possam instalá-lo na tela inicial, lançá-lo em uma janela separada sem a barra de endereço do navegador e continuar usando telas principais mesmo quando offline. O backend e a lógica de negócios permanecem como estão; o trabalho é focado no lado do cliente e na camada de acesso offline ao redor disso.

Especificamente, é necessário um service worker que armazene em cache a estrutura da aplicação e recursos críticos, bem como uma estratégia razoável de cache de resposta da API para que os dados carregados anteriormente permaneçam disponíveis offline e se sincronizem quando a rede for restaurada. Um manifesto de aplicativo web correto com ícones, cores de tema e URL de inicialização apropriada deve tornar a aplicação instalável no Android e iOS, e quero que o prompt de instalação seja tratado de forma organizada, em vez de deixá-lo por conta própria. Além disso, você precisa configurar completamente as notificações push: solicitar permissão, armazenar a assinatura e uma maneira simples de enviar um push de teste.

Desempenho e confiabilidade são parte do resultado: o aplicativo deve passar na auditoria de instalabilidade, degradar corretamente com uma página stub offline e não quebrar o comportamento existente para usuários de desktop.

— Service worker com cache da estrutura e recursos
— Página stub offline e cache de leitura da API
— Manifesto de aplicativo web, ícones e manuseio de instalação
— Notificações push: permissão, assinatura, envio de teste
— Passando na auditoria de instalabilidade/Lighthouse PWA
— Documentação para implantação e versionamento de cache