Old vuepress service worker cached

Describe the bug

Hi👋

Amazing work with vitepress! Thanks for that!

I have a small issue with my docs site. I used to have a vuepress app running my old docs and switched to vitepress. Some users are still seeing the same old site (vuepress) when they navigate to a URL instead of the new one (vitepress).

My question is: How can I bust the client cache from the server?

The website is https://docs.avohq.io/ and it’s hosted on netlify.

Thank you,

Reproduction

I can’t offer a reproduction unless you’ve previously visited the old site.

Expected behavior

The new site (vitepress) should be visible, not the old one (vuepress).

System Info

System:
    OS: macOS 12.6
    CPU: (10) x64 Apple M1 Max
    Memory: 40.16 MB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.20.0 - ~/.nvm/versions/node/v14.20.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.20.0/bin/yarn
    npm: 6.14.17 - ~/.nvm/versions/node/v14.20.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 104.0
    Safari: 16.0
    Safari Technology Preview: 16.0
  npmPackages:
    vitepress: ^1.0.0-alpha.19 => 1.0.0-alpha.19

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.

[kiaking]

@adrianthedev Issues are for actual issues (bug reports) or feature requests. When you say “Some users are still seeing the same old site…” this is not a VitePress problem. VitePress has nothing to do with your old site. So it sounds very much like your hosting service settings issue.

For those questions would be better handled in Discord or in Discussions. You can join Vue.js Official Discord here (which has VitePress channel). https://discord.com/invite/HBherRA

[BasilaryGroup]

Sorry for adding to a closed issue.

I was able to track down the Discord discussion related to this problem and I thought it would help others who face the same problem.

• see discord

You have an existing VuePress site deployed on a host like netlify, gitlab pages, github, etc. You deploy your new VitePress site and the old site keeps displaying.

1. assumes you have defined a base: /yourbaseurl/ in docs/.vitepress/config.js
2. copy your old manifest.json into docs/public/manifest.json
3. in docs/.vitepress/config.js add a header: [] section containing

    head: [
        ['link', { rel: 'manifest', href: '/manifest.json' }],
        ['script', { id: "unregister-sw" },
            "if('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('/yourbaseurl/service-worker.js', { scope: '/yourbaseurl/' }))",
        ]
    ]

1. add docs/public/service-worker.js with the following,

// force an unregister
// see https://discord.com/channels/325477692906536972/790509637598314527/1032614068164493402
self.addEventListener('install', function (e) {
    self.skipWaiting();
});
self.addEventListener('activate', function (e) {
    self.registration.unregister()
        .then(function () {
            return self.clients.matchAll();
        })
        .then(function (clients) {
            clients.forEach(client => client.navigate(client.url))
        });
});

1. build and deploy
2. when you display the new VitePress site, the old service worker will start and then unregister itself. Voilà, your new VitePress site appears.

The one downside I see is each time the service worker is run you get another Application entry. Maybe later you remove this code and assume all of your users have unregistered the old VuePress site?