Programmatic navigation doesn't trigger service worker update

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® Core™ 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

[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.

[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