ServiceWorker script at https://app.***.com/sw.js for scope https://app.***.com/ encountered an error during installation.

[szatpig]

VitePWA({
      registerType:
        process.env.VITE_PWA_REGISTERTYPE === 'autoUpdate'
          ? 'autoUpdate'
          : 'prompt',
      //process.env.VITE_PWA_REGISTERTYPE !== 'autoUpdate' ? 'autoUpdate' : 'prompt',
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
      },
    }),

Usage:

import { useEffect, useRef } from 'react'
import { useRegisterSW } from 'virtual:pwa-register/react'

import useToast from 'components/DLToast/useToast'

const useReload = () => {
  const swRef = useRef(true)
  const { toast, closeAllToast } = useToast()
  const toastRef = useRef(false)
  const {
    needRefresh: [needRefresh],
    updateServiceWorker,
  } = useRegisterSW({
    immediate: true,
    onRegisteredSW(swUrl, r) {
      r &&
        setInterval(async () => {
          try {
            if (!(!r.installing && navigator)) return
            if ('connection' in navigator && !navigator.onLine) return

            if (!swRef.current) {
              r.update()
              return
            }
            const resp = await fetch(swUrl, {
              method: 'HEAD',
              cache: 'no-store',
              headers: {
                cache: 'no-store',
                'cache-control': 'no-cache',
              },
            })
            if (resp?.ok) {
              swRef.current = false
              await r.update()
            } else {
              console.log('SW error: Promise resolved but HTTP status failed')
            }
          } catch (_) {
            console.log('SW error: ' + r)
          }
        }, 60000 /* 60s for testing purposes */)
    },
    onRegisterError(error) {
      console.log('SW registration error', error)
    },
  })

  const onReload = async () => {
    try {
      toastRef.current = false
      closeAllToast()
      updateServiceWorker(true)
    } catch (error) {
      closeAllToast()
      window.location.reload()
    }
  }

  useEffect(() => {
    const template = (
      <div>
        New content available, click{' '}
        <b className="reload-btn" onClick={onReload}>
          reload
        </b>{' '}
        to update.
      </div>
    )
    if (needRefresh) {
      if (import.meta.env.VITE_PWA_REGISTERTYPE === 'autoUpdate') {
        updateServiceWorker(true)
      } else if (!toastRef.current) {
        toastRef.current = true
        toast.info(template, {
          open: true,
          anchorOrigin: { vertical: 'top', horizontal: 'right' },
          persist: true,
          action: null,
        })
      }
    }
  }, [needRefresh])
}

export default useReload