Como transformar seu React APP em um PWA em poucos minutos

Deric Parra — Mon, 22 Nov 2021 14:05:54 +0000

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

DEV Community: Deric Parra

Como transformar seu React APP em um PWA em poucos minutos

1 manifest.json

2 servicerWorker.js

1 `manifest.json`

2 `servicerWorker.js`