Perguntas do curso de PWA: PWA e Frameworks JavaScript

como utilizar frameworks javascript com PWA

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.

O que é uma PWA?

Progressive Web Apps – PWA (aplicações web progressivas) são desenvolvidas utilizando APIs modernas para fornecer novos recursos somente disponíveis em aplicações nativas. Recursos como confiabilidade e capacidade de instalação, ao mesmo tempo, estão totalmente disponíveis a qualquer usuário, em qualquer tipo dispositivo com uma única base de código.

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/pwa
Code 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.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.