DEV Community

Deric Parra
Deric Parra

Posted on

Como transformar seu React APP em um PWA em poucos minutos

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"
}
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Após o import, adicione no final do seu index.js o seguinte código para optar por um aplicativo "offline-first"

serviceWorkerRegistration.register();
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

Collapse
rafaelmb profile image
Rafael Mena Barreto

boa!

Collapse
deko profile image
Deric Parra Author

Vlw mano !