ReactPwa light e simple
- v2 Minor released now!
- build using rollup
install
npm install react-pwa-appor
yarn add react-pwa-appreact.js example
- add in root index.html this line
<head>
<link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
</head>next.js example _app.js
import Head from 'next/head'
<Head>
<meta name="description" content="Generated by create next app" />
<meta name="keywords" content="Keywords" />
<link rel="icon" href="/favicon.ico" />
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
{/* dont forget */}
<link rel="manifest" href="/manifest.webmanifest" />
</Head>manifest
- put all your icons inside /public/icons and enter them with their respective sizes in public/manifest.webmanifest
usage:
import React from "react";
import ReactDOM from "react-dom";
import ReactPwa from "react-pwa-app";
ReactDOM.render(
<ReactPwa
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')
}
},
}}
>
<App />
</ReactPwa>,
document.getElementById("root")
);in your component
import { usePwa } from "react-pwa-app";
const App = () => {
const pwa = usePwa();
console.log(pwa.registration); // ServiceWorkerRegistration
return (
<>
<p>
pwa.isInstalled: <b>{pwa.isInstalled}</b>
</p>
<p>
pwa.supportsPWA: <b>{pwa.supports ? "Sim" : "Não"}</b>
</p>
<button onClick={pwa.install}>install app</button>
</>
);
};Some tips
-
service worker will be generated in the public folder
-
manifest.webmanifest will be generated in the public folder
-
service-worker.js needs at least 3 simple configurations. addEventListener('install' | 'activate' | 'fetch' )
-
you can add pushnotifications support using addEventListener('push' )
-
to get started use my service-worker.js inside /public
-
post-install.js will be generated on root folder, you can use on create-react-app
postbuild
add script postbuild,
"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.
yarn add -D globyou need to install glob to auto generate or customize this file
