ReactPwa light e simple

- v2 Minor released now!
- build using rollup
-

install

``bash
npm install react-pwa-app
`
or

`bash
yarn add react-pwa-app
`

$3

- add in root index.html this line

`html



`


$3

`js
import Head from 'next/head'








name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>

{/ dont forget /}


`

manifest

- put all your icons inside /public/icons and enter them with their respective sizes in public/manifest.webmanifest

$3

`js
import React from "react";
import ReactDOM from "react-dom";
import ReactPwa from "react-pwa-app";

ReactDOM.render(
test //is to install in localhost, not required
suspense={<>
a preloader to load the service worker in the application
is the best way to not overload with component calls.
this ensures that the rest of the application only loads after the sw is checked
default is children
}
config={{
swUrl: "/service-worker.js", // sw file in public default is service-worker.js
onUpdate: (reg) => {
alert("sw cache was updated");
console.log(reg);
},
onSuccess: (reg) => {
alert("sw success installed");
console.log(reg);
},
onError: (reg) => {
alert("sw error to install");
console.log(reg);
},
onPrompt:(e) => {
if(e.outcome === 'accepted'){
console.log('user click on install and accept')
}
if(e.outcome === 'dismissed'){
console.log('user click on install and refuse')
}
},
}}
>

,
document.getElementById("root")
);
`

in your component

`js
import { usePwa } from "react-pwa-app";

const App = () => {
const pwa = usePwa();

console.log(pwa.registration); // ServiceWorkerRegistration

return (
<>



pwa.isInstalled: {pwa.isInstalled}


pwa.supportsPWA: {pwa.supports ? "Sim" : "Não"}

install app

);
};
`

Some tips

1. service worker will be generated in the public folder

2. manifest.webmanifest will be generated in the public folder

3. service-worker.js needs at least 3 simple configurations. addEventListener('install' | 'activate' | 'fetch' )

4. you can add pushnotifications support using addEventListener('push' )

5. to get started use my service-worker.js inside /public

6. post-install.js will be generated on root folder, you can use on create-react-app

postbuild

add script postbuild,

`json
"scripts": {
"postbuild": "node post-build.js"
}
`

this will help you auto-generate the application build routes, and also a new cachename to update the front whenever you update the app to a new version.

`bash
yarn add -D glob
``

you need to install glob to auto generate or customize this file