⇒ Next-PWA

Serve para tornar uma aplicação em Next.js em PWA, para utilização em forma de "aplicativo reduzido".

shadowwalker/next-pwa

→ Passo a Passo

  1. Instalar o Next-PWA

  2. No next.config.js colocar:

    const withPWA = require('next-pwa');
    
    module.exports = withPWA({
      pwa: {
        dest: 'public'
      },
    })
    
  3. Adicionar o Webpack ao Package.json nas devDependencies e rodar o yarn: "webpack": "^5.19.0"

  4. Criar um manifest.json e colocar na Pasta /public. É bom usar um gerador de Manifest.

PWA Manifest Generator | SimiCart

  1. Gerar os Favicon que serão usados de Icone e SplashScreen e colocar dentro da pasta /public

Favicon & App Icon Generator

  1. Definir as Meta Tags e Link Tags dentro do Component <Head> do next/head do _document.tsx, exemplos e boas Meta Tags para se adicionar podem ser encontradas nesse repositório:

gokulkrishh/awesome-meta-and-manifest


References // Tutorial