Categorias
PWA - Progressive web apps

Perguntas do curso de PWA: PWA e Frameworks JS

Como transformar a minha aplicação Vue.js em uma progressive web app?

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 transformar aplicações que utilizam bibliotecas e frameworks JavaScript em uma Progressive Web App. 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á te auxiliar 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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *