Gatsby: Programmatic navigation doesn't trigger service worker update

[ruben00001]

Programmatic navigation doesn't trigger a service worker update; new content isn't shown when I use navigate.

Further information
I'm using Strapi as my CMS to pull in data at build time, gatsby-plugin-offline and the onServiceWorkerUpdateReady method with a prompt to reload window.

When I enter my site and then click on a 'link' that uses navigate, new content isn't shown on the page I'm navigating to unless I manually refresh the page. I'm using programmatic navigation (with navigate) because I want to animate on leaving the page.

Using Gatsby's Link or the gatsby plugin transition link package, new content shows when I navigate to the page in question without a refresh.

I can just use gatsby plugin transition link for my purposes, but thought it's worth reporting this anyway.

The website: https://amyrodriguez.netlify.app

Expected result

I expect programmatic navigation using navigate to trigger a service worker update and show the new content.

Actual result

New content isn't shown (without a refresh).

Environment

System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
Browsers:
Chrome: 85.0.4183.102
Firefox: 81.0
npmPackages:
gatsby: ^2.24.76 => 2.24.76
gatsby-image: ^2.4.21 => 2.4.21
gatsby-plugin-client-side-redirect: ^1.1.0 => 1.1.0
gatsby-plugin-emotion: ^4.3.13 => 4.3.13
gatsby-plugin-google-analytics: ^2.3.18 => 2.3.18
gatsby-plugin-manifest: ^2.4.34 => 2.4.34
gatsby-plugin-netlify: ^2.3.17 => 2.3.17
gatsby-plugin-offline: ^3.2.31 => 3.2.31
gatsby-plugin-react-helmet: ^3.3.14 => 3.3.14
gatsby-plugin-remove-fingerprints: 0.0.2 => 0.0.2
gatsby-plugin-remove-trailing-slashes: ^2.3.13 => 2.3.13
gatsby-plugin-sharp: ^2.6.42 => 2.6.42
gatsby-source-shopify: ^3.2.36 => 3.2.36
gatsby-source-strapi: 0.0.12 => 0.0.12
gatsby-transformer-sharp: ^2.5.17 => 2.5.17
npmGlobalPackages:
gatsby-cli: 2.12.87

[ascorbic]

Thanks. This is surprising, because gatsby plugin transition link uses navigate under the hood. I'll tag @TylerBarnes who wrote that plugin to see if he has any insight

[TylerBarnes]

@ascorbic from the description it sounds like it's working when they use transition link, but not when using navigate directly. Is that right @ruben00001 ?

[ruben00001]

@TylerBarnes Yes that's correct.

[TylerBarnes]

👍 one thing to note is that transition-link actually uses both gatsby-link and navigate. Gatsby links are added to the page to enable prefetching, but there's an onClick that prevents it from navigating, then it sets up it's own state and calls navigate at the right time. So in this case it could be that the presence of gatsby-link is what's making it work, but just using navigate alone doesn't work.

[TylerBarnes]

I'm unassigning myself from this because I have no idea how to fix it. In the meantime @ruben00001 you might want to try including a gatsby-link on your page with the same path to see if it makes it work.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜