react-pwa-app
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    ReactPwa light e simple

    install

    npm install react-pwa-app

    or

    yarn add react-pwa-app
    • add in root index.html this line
        <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />

    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
        config={{
          swUrl: "/service-worker.js", // sw file in public
          onUpdate: (reg) => {
            alert("sw updated");
            console.log(reg);
          },
          onSuccess: (reg) => {
            alert("sw success installed");
            console.log(reg);
          },
        }}
      >
        <App />
      </ReactPwa>,
      document.getElementById("root")
    );

    in your component

    import { usePwa } from "react-pwa-app";
    
    const App = () => {
      const pwa = usePwa();
    
      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

    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,

    "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 glob

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

    Install

    npm i react-pwa-app

    DownloadsWeekly Downloads

    14

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    55.6 kB

    Total Files

    30

    Last publish

    Collaborators

    • mathec-x