generateSW prompt: successfully refresh and reload on user input

[lafleurdeboum]

Hey, I've been experimenting with vite-plugin-pwa, and I found out that one can easily get stuck at the user input step - more precisely, at the new service worker activated and waiting. Indeed, the old worker will wait until all opened connections close before handing the control. It took me hours to find out who was the culprit, and in my case it was a Server-Sent Events connection still waiting for input at that point, but that could be any other long-lasting connection. I found out after reading this issue on workbox-routing.

I'm currently using vite-plugin-pwa with React, and I solved this with this node :

import { ReactNode } from 'react';

export function Upgrader({ children }: { children?: ReactNode }) {
    const [hasRefreshed, setHasRefreshed] = useState(false);
    const {
        offlineReady: [offlineReady, setOfflineReady],
        needRefresh: [needRefresh, setNeedRefresh],
        updateServiceWorker,
    } = useRegisterSW({
        onRegisteredSW(scriptUrl) {
            console.info(`service worker "${scriptUrl}" registered`);
        },
        onRegisterError(error) {
            console.warn('SW registration error:', error)
        },
    });
    const onUpgrade = () => {
        console.info('upgrading');
        setHasRefreshed(true);
        setNeedRefresh(false);
        setOfflineReady(false);
        updateServiceWorker(true);
    };
    return (<>
        { needRefresh ?
            <span>A new update is available. <button onClick={ onUpgrade }>Upgrade</button></span>
        : null }
        { offlineReady ? <OfflineReadyInfo /> : null }
        { hasRefreshed ? null : children }
    </>);
}

and then use it like

const App = () => <>
    <Upgrader>
        <NodeWithLongLastingConnection />
        ...
    </Upgrader>
    ...
</>;

so that NodeWithLongLastingConnection gets suspended when the app has refreshed and the old Service Worker needs a network-down instant to hand the control to the new one.

I think there's hours worth of my work here, wanted to contribute it in thanks for the great plugin. Perhaps would it deserve an explanation in the docs ? What do you think ?