Há anos que alguém diz: “Hey, podemos tornar este aplicativo instalável e trabalhar offline também?” Descubra a descida lenta e dolorosa para o buraco de coelho da PWA: configurações de funcionários de serviço flaky, caos de cache, roteador de aplicativos quebrando coisas, e os usuários ficaram presos com versões antigas, a menos que eles chamassem manualmente os Deuses do Cache. Então eu fiz o que qualquer desenvolvedor razoável com muito café e não paciência suficiente faria: eu construí meu próprio pacote maldito. Introducing: next-pwa-pack É um embrulhador drop-in para Next.js (yep, funciona bem com o App Router) que lhe dá suporte completo ao PWA simplesmente embrulhando seu layout com um provedor. import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } e Use seu aplicativo para instalar como um nativo, funcionando offline, cache páginas, guias de sincronização e até mesmo navios com um painel de desenvolvimento incorporado para que você não tenha que adivinhar se algo está funcionando. boom Basta deixá-lo entrar e seguir em frente com a sua vida. Por que eu construí isso Toda vez que um cliente pediu “offline-first” ou “features PWA”, eu morri um pouco dentro. , apenas para descobrir que não suporta o mais recente App Router, ou eu tentaria rolar meu próprio e acabar refrescar a página com raiva para ver se o funcionário de serviço realmente atualizou. next-pwa Eventualmente, percebi que o que eu queria era uma configuração sem cérebro. Algo que só me deu um funcionário de serviço de trabalho, pré-cache, lógica de atualização e controle de versão - e saiu do caminho. Algo que eu poderia conectar a qualquer projeto Next.js e confiar. Então eu construí isso. O que realmente está acontecendo Sob o capô, Navios com defeito , em e Que sw.js lida com HTML e cache de ativos estáticos com um padrão saudável - as respostas HTML recebem um TTL de 10 minutos, e ativos como JS, CSS e imagens são armazenados permanentemente. next-pwa-pack sw.js manifest.json offline.html Para manter todas as guias do navegador em sincronia, ele usa eventos para transmitir atualizações ao longo da sessão. Se você for offline, ele serve um Para que os usuários não enfrentem a temida tela branca. localStorage offline.html E como não se trata apenas de “estar offline”, eu também adicionei uma API minúscula para que você possa interagir com a camada de cache. Quer prefetch algumas páginas depois de publicar novos conteúdos? É um truque, também existe Se você precisar rastrear o estado da instalação ou ouvir novas versões. clearAllCache() updateSWCache(["/blog", "/dashboard"]) usePWAStatus() Dev Modo Goodies Se você permitir no provedor, você recebe um painel de depuração de PWA flutuante diretamente no seu aplicativo. Ele mostra seu status on-line / off-line, permite que você limpe ou atualize a cache, desmarque o funcionário do serviço e até mesmo desligue ou desligue a cache enquanto você está testando. devMode Poucas coisas a ter em mente Não é mágico, então você ainda precisará personalizar seu manifest.json e carregar ícones se você quiser instalar banners para parecer bom. Nós cache apenas solicitações GET - sem mutação ou dados POST sensíveis - e se você quiser alterar o HTML TTL ou outras regras de cache, você precisará ajustar o diretamente (por enquanto - um sistema de config está chegando). sw.js Mas do ponto de vista do desempenho, o impacto é mínimo e, se houver, os visitantes que retornarem verão um aumento de velocidade das respostas em cache. O que é o próximo O roteiro inclui suporte para regras TTL baseadas em configurações, notificações push, estratégias de cache mais inteligentes baseadas em padrões de URL, integração com ISR (Incremental Static Regeneration), e até mesmo um painel integrado para rastrear métricas de cache hit/miss em tempo real. Título: DR Eu construí porque eu estava fazendo trabalhadores de serviço de cablagem de mão e debugging cache em produção. Ele funciona fora da caixa, joga bem com o mais recente funcionalidades, e ajuda o seu aplicativo a permanecer rápido, instalável e resiliente – sem destruir a sua inteligência de desenvolvedor. next-pwa-pack Next.js É de código aberto, você pode experimentá-lo aqui: <https://github.com/dev-family/next-pwa-pack](https://github.com/dev-family/next-pwa-pack) Use-o, forje-o, quebre-o e diga-me o que você acha. Fique em segredo!
