Perguntas do curso de PWA: PWA e Frameworks JavaScript

Olá pessoal nesse post irei responder algumas perguntas comuns sobre PWA e frameworks JavaScript, Essas perguntas foram tiradas do meu canal do YouTube onde eu tenho um curso sobre PWA, onde você pode conferir aqui:

O curso que rodo no YouTube é focado em vanilla JavaScript e tem uma configuração específica utilizando webpack em um certo momento. E uma pergunta recorrente é como trabalhar com PWA e frameworks JavaScript.

Como funcionam PWA e frameworks JavaScript?

Para aplicações Vue.js, React ou Angular. Cada uma possui caminhos específicos que podem facilitar a implementação da sua PWA.

Vue

Para transformar a sua aplicação vue.js em uma PWA o caminho mais fácil é através do Vue CLI(command line interface) ele irá auxiliar-te com a configuração e criação dos arquivos necessários para você criar uma progressive web app.

Após criar sua aplicação vue com o comando “vue create nome-do-seu-app” você irá executar o seguinte comando:

vue add pwa

Você precisará executar esse comando em seu terminal de linha de comando. Assim será instalado o pacote @vue/cli-plugin-pwa, ele irá adicionar um service worker que será habilitado somente em produção ou seja quando você roda os comando “npm run build” ou “yarn build”. A configuração de sua pwa será feito ou pelo arquivo vue.config.js ou em seu package.json dependendo se sua instalação.

Exemplo:

// Dentro vue.config.js
module.exports = {
  // ...outras opções do vue-cli plugin...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configuração do workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc é necessário para o modo injectManifest.
      swSrc: 'dev/sw.js',
      // ...outras opções do WorkBox...
    }
  }
}
Code language: JavaScript (javascript)

Como podemos ver o plugin do vue-cli utiliza workbox para fazer a configuração de sua PWA.

Angular

Para transformar a sua aplicação Angular em uma Progressive Web Apps você irar executar no seu terminal o seguinte comando:

ng add @angular/pwaCode language: CSS (css)

Esse comando irá:

• Adicionar uma Service Worker com uma configuração padrão de cache.
• Criar um arquivo manifest json para a sua aplicação
• Adicionar um link para o arquivo manifest no seu index.html
• Criar os ícones para a sua aplicação no diretório “src/assets”

React

Existem templates específicos quando você utilizar create-react-app para criar um projeto. Por exemplo:

npx create-react-app my-app --template cra-template-pwa

Para templates TypeScript:

npx create-react-app my-app --template cra-template-pwa-typescript

Rodando esse comando no seu terminal, você irá ter uma estrutura básica com service worker rodando uma versão offline.

Para mais posts sobre PWA acesse a página da categoria Progressive web app.