create-react-app PWA에 "새 버전 사용 가능"알림 표시

...
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

...
if (process.env.NODE_ENV === 'production') {
 serviceWorker.register()
}
... 

function registerValidSW(swUrl, config) {
...
            if (navigator.serviceWorker.controller) {
              // At this point, the updated precached content has been fetched,
              // but the previous service worker will still serve the older
              // content until all client tabs are closed.
              console.log(
                'New content is available and will be used when all ' +
                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
              );

              // Execute callback
              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } else {
              ...
              }

    })
    ...
}

onServiceWorkerUpdate = registration => {
        this.setState({
            waitingWorker: registration && registration.waiting,
            newVersionAvailable: true
        })
    }

updateServiceWorker = () => {
        const { waitingWorker } = this.state
        waitingWorker && waitingWorker.postMessage({ type: 'SKIP_WAITING' })
        this.setState({ newVersionAvailable: false })
        window.location.reload()
    }

componentDidMount = () => {
    const { enqueueSnackbar } = this.props;
    const { newVersionAvailable } = this.state;

if (process.env.NODE_ENV === 'production') {
    serviceWorker.register({ onUpdate: this.onServiceWorkerUpdate });
}

    if (newVersionAvailable) //show snackbar with refresh button
      enqueueSnackbar("A new version was released", {
        persist: true,
        variant: "success",
        action: this.refreshAction(),
      });
  };

refreshAction = (key) => { //render the snackbar button
    return (
      <Fragment>
        <Button
          className="snackbar-button"
          size="small"
          onClick={this.updateServiceWorker}
        >
          {"refresh"}
        </Button>
      </Fragment>
    );
  };

import React, { Component, Fragment } from "react";
//default imports...
import { withSnackbar } from "notistack";
import * as serviceWorker from "./serviceWorker";
import { Button } from "@material-ui/core";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newVersionAvailable: false,
      waitingWorker: {},
    };
  }

onServiceWorkerUpdate = (registration) => {
    this.setState({
      waitingWorker: registration && registration.waiting,
      newVersionAvailable: true,
    });
  };

  updateServiceWorker = () => {
    const { waitingWorker } = this.state;
    waitingWorker && waitingWorker.postMessage({ type: "SKIP_WAITING" });
    this.setState({ newVersionAvailable: false });
    window.location.reload();
  };

  refreshAction = (key) => { //render the snackbar button
    return (
      <Fragment>
        <Button
          className="snackbar-button"
          size="small"
          onClick={this.updateServiceWorker}
        >
          {"refresh"}
        </Button>
      </Fragment>
    );
  };


  componentDidMount = () => {
    const { enqueueSnackbar } = this.props;
    const { newVersionAvailable } = this.state;
if (process.env.NODE_ENV === 'production') {
    serviceWorker.register({ onUpdate: this.onServiceWorkerUpdate });
}

    if (newVersionAvailable) //show snackbar with refresh button
      enqueueSnackbar("A new version was released", {
        persist: true,
        variant: "success",
        action: this.refreshAction(),
      });
  };

  render() {
       //render components
   }
}
export default withSnackbar(App); //uses the snackbar context

//default imports
import { SnackbarProvider } from "notistack";

ReactDOM.render(
  <React.StrictMode>
      <SnackbarProvider>
          <App/>
      </SnackbarProvider>
  </React.StrictMode>,
  document.getElementById("root")
);