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.