How to use service_worker_register when using Vite workbox integration

[esomore]

I am currently unable to use the library with service worker functionality because it is breaking my service worker update prompts (https://github.com/vite-pwa/vite-plugin-pwa/blob/main/docs/frameworks/react.md#prompt-for-update). I think using service_worker_register might be the solution. Still, I'm unsure how to implement it.

This is my current working SW.tsx:

import Button from '@mui/material/Button';
import { useCallback, useEffect, useRef } from 'react';
import { useRegisterSW } from 'virtual:pwa-register/react';
import type { SnackbarKey } from 'notistack';
import useNotifications from '@/store/notifications';

function SW() {
  const [, notificationsActions] = useNotifications();
  const notificationKey = useRef<SnackbarKey | null>(null);
  const {
    offlineReady: [offlineReady, setOfflineReady],
    needRefresh: [needRefresh, setNeedRefresh],
    updateServiceWorker,
  } = useRegisterSW();

  const close = useCallback(() => {
    setOfflineReady(false);
    setNeedRefresh(false);

    if (notificationKey.current !== null && notificationKey.current !== undefined) {
      notificationsActions.close(notificationKey.current);
    }
  }, [setOfflineReady, setNeedRefresh, notificationsActions]);

  useEffect(() => {
    if (offlineReady) {
      notificationsActions.push({
        options: {
          autoHideDuration: 4500,
          content: <Alert severity="success">App is ready to work offline.</Alert>,
        },
      });
    } else if (needRefresh) {
      notificationKey.current = notificationsActions.push({
        message: 'New content is available, click on reload button to update.',
        options: {
          variant: 'warning',
          persist: true,
          action: (
            <>
              <Button onClick={async () => updateServiceWorker()}>Reload</Button>
              <Button onClick={close}>Close</Button>
            </>
          ),
        },
      });
    }
  }, [close, needRefresh, offlineReady, notificationsActions, updateServiceWorker]);

  return null;
}

export default SW;

[rjhoffmann]

@esomore, did you get any resolution to this, I'm currently running into the same issue.

[esomore]

@esomore, did you get any resolution to this, I'm currently running into the same issue.

Not yet :(