vite-plugin-pwa: Error when trying to update the ServiceWorker

Describe the bug

I’m using this plugin and it does works nicely.

But my Sentry report is getting spammed with a lot of errors that comes as Unhandled.

Failed to update a ServiceWorker for scope (‘https://app…’) with script (‘https://app…/sw.js’): An unknown error occurred when fetching the script.

I can’t manage to find the root cause. I’ve already set the base, scope urls but still the same.

export const pwaConfig: Partial<VitePWAOptions> = {
    registerType: 'prompt',
    minify: true,
    scope: '/',
    base: '/',
    manifest: {
        scope: '/',

This is my configuration:

<script lang="ts" setup>
    import { useRegisterSW } from 'virtual:pwa-register/vue';
    import { ref } from 'vue';

    const isLoading = ref(false);
    const intervalMS = 45 * 1000;
    const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
        onRegistered(r) {
            r &&
                setInterval(() => {
                    r.update();
                }, intervalMS);
        },
    });

    const handleUpdate = () => {
        isLoading.value = true;
        updateServiceWorker();
    };

    const close = async () => {
        offlineReady.value = false;
        needRefresh.value = false;
    };
</script>

Also noticed that when the website is being updates and the SW tried to reach the sw.js and it fails (404) it also generated a exception and that I can’t handle properly on my app.

Any help is more than welcome since the amount of errors is pilling up and I may have to consider stop using the plugin or look into another solution.

Thanks!

Reproduction

https://app.gelato.network

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 394.00 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Chrome Canary: 107.0.5275.0
    Firefox: 103.0.2
    Safari: 15.6.1

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 50 (27 by maintainers)

Most upvoted comments

I think that edge-case should be rare enough for me not to worry about right now - but I’ll observe the situation after this update. The code I’ve landed on is this, making more heavy use of guards compared to your original code:

        if (!(!r.installing && navigator)) { return; }
        if (('connection' in navigator) && !navigator.onLine) { return; }

        const resp = await fetch('/sw.js', {
          cache: 'no-store',
          'cache-control': 'no-cache',
        });

        if (resp?.status === 200) { await r.update(); }

P.S. TIL 'connection' in navigator, never used this syntax before. Here’s the documentation for anyone else trying to read the code above

doutatsu on Sep 16, 2022

Axios just for compatibility and some extra nice configurations.

re2005 on Sep 10, 2022

That looks to be exactly the same issue as the one I am having - I’ll try this solution out and curious to hear if @re2005 would have it fixed applying this solution

doutatsu on Sep 2, 2022

Maybe you can send a PR to add this to the docs: if you can’t, don’t worry, I’ll do it.

Sure, I’ll take a look, happy to contribute. Going to first see if it’s going to remove all the remaining errors. I’d like to get it bulletproof before suggesting the final version

doutatsu on Sep 16, 2022

forgot it: ~~is this ok if (!(!r.installing && navigator)) { return; }?~~

userquin on Sep 16, 2022

Testing with disabling network properly, obviously it doesn’t pull the new worker - so all is good in that instance. Coming back online, provides the prompt and update works as expected. I’ll proceed with that then and see how it goes

doutatsu on Sep 16, 2022

@doutatsu you’re simulation tools, ok, don’t worry, but then the call should be ok: the browser is offline. Test I made result also on your results, it seems dev tools is bypassing the offline check, I’ve found when testing offline, restarting the https-localhost and refreshing the page sometimes works (the sw is updated and the event fired).

userquin on Sep 16, 2022

For me it reduced the amount of errors pretty much.

I’m doing something like this:


onRegistered(r) {
            r &&
                setInterval(async () => {
                    const resp = await axios.get('/sw.js', {
                        headers: {
                            'Cache-Control': 'no-cache',
                            Pragma: 'no-cache',
                            Expires: '0',
                        },
                    });
                    if (resp && resp?.status === 200) {
                        await r.update();
                    }
                }, intervalMS);

re2005 on Sep 10, 2022

Not yet, but I’ll give it a go this weekend

doutatsu on Sep 8, 2022

Hi @userquin. I see a a small improvement on the errors related to the sw.js But still see some unknown errors.

I think we can close this issue for now. Thank you very much for your time!

Cheers

re2005 on Sep 8, 2022

You may can also check using window.navigator.onLine

re2005 on Sep 2, 2022

Thanks @userquin I’ll give it a try to see if it will stop bleeding logs to Sentry. 🚀

Will post some update soon. @doutatsu

re2005 on Sep 2, 2022