This content originally appeared on DEV Community and was authored by Deric Parra
Progressive Web Apps ou somente PWAs, nos dão novos recursos com características nativas para os sites, consumindo menos dados e sem a necessidade de instalação.
Os React Apps precisam de apenas 2 características para serem PWAs, um servicerWorker, que é um script que o navegador executa em segundo plano, separado da WebPage o que possibilita alguns recursos, como uso offline.
E também um arquivo na pasta publica, como nome do aplicativo, pagina inicial e ícones, sendo esse arquivo o manifest.json.
1 manifest.json
o manifest.json vai na pasta public.
A maioria das informações são auto explicativas, e voce pode gerar automaticamente em alguns sites como o App Manifest Generator.
Segue um exemplo
{
"short_name": "WebPage",
"name": "Minha WebPage",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "imagem/icone-x"
},
{
"src": "logoPequeno.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logoGrande.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
2 servicerWorker.js
Para ter uma base vá para Modelo de Service Worker.
Copie os arquivos service-worker.js e o serviceWorkerRegistration.js e cole na pasta src.
Então no topo seu index.js, importe o service worker resgistration, assim:
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
Após o import, adicione no final do seu index.js o seguinte código para optar por um aplicativo "offline-first"
serviceWorkerRegistration.register();
E pronto, seu CRA agora é uma PWA.
Caso voce esteja começando um projeto novo, voce pode cria-lo ja com o template usando o comando npx create-react-app app-name --template cra-template-pwa, ou se voce for usar o typescript npx create-react-app app-name --template cra-template-pwa-typescript.
Para se aprofundar mais em PWAs
This content originally appeared on DEV Community and was authored by Deric Parra
Deric Parra | Sciencx (2021-11-22T14:05:54+00:00) Como transformar seu React APP em um PWA em poucos minutos. Retrieved from https://www.scien.cx/2021/11/22/como-transformar-seu-react-app-em-um-pwa-em-poucos-minutos/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.