Improve UX for service worker updates (#6263)

* refactor: improve UX for service worker updates * refactor: move logic for window reload to core navigate function
gatsbyjs · Jul 3, 2018 · c110f32 · c110f32
1 parent 020ef8a
commit c110f32
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/packages/gatsby-link/src/index.js b/packages/gatsby-link/src/index.js
@@ -137,7 +137,9 @@ class GatsbyLink extends React.Component {
                 .split(`#`)
                 .slice(1)
                 .join(`#`)
-              const element = hashFragment ? document.getElementById(hashFragment) : null
+              const element = hashFragment
+                ? document.getElementById(hashFragment)
+                : null
               if (element !== null) {
                 element.scrollIntoView()
                 return true

diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js
@@ -64,6 +64,12 @@ apiRunnerAsync(`onClientEntry`).then(() => {
     if (redirect) {
       pathname = redirect.toPath
     }
+
+    // If we had a service worker update, no matter the path, reload window
+    if (window.GATSBY_SW_UPDATED) {
+      window.location = pathname
+    }
+
     const wl = window.location
 
     // If we're already at this location, do nothing.
@@ -79,15 +85,16 @@ apiRunnerAsync(`onClientEntry`).then(() => {
       ? window.___history.replace
       : window.___history.push
 
-    const historyNavigateAction = replace
-      ? `REPLACE`
-      : `PUSH`
+    const historyNavigateAction = replace ? `REPLACE` : `PUSH`
 
     // Start a timer to wait for a second before transitioning and showing a
     // loader in case resources aren't around yet.
     const timeoutId = setTimeout(() => {
       emitter.emit(`onDelayedLoadPageResources`, { pathname })
-      apiRunner(`onRouteUpdateDelayed`, { location, action: historyNavigateAction })
+      apiRunner(`onRouteUpdateDelayed`, {
+        location,
+        action: historyNavigateAction,
+      })
     }, 1000)
 
     lastNavigateToLocationString = `${location.pathname}${location.search}${
@@ -99,7 +106,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
     const loaderCallback = pageResources => {
       if (!pageResources) {
         // We fetch resources for 404 page in page-renderer.js. Calling it
-        // here is to ensure that we have needed resouces to render page 
+        // here is to ensure that we have needed resouces to render page
         // before navigating to it
         loader.getResourcesForPathname(`/404.html`, loaderCallback)
       } else {

diff --git a/packages/gatsby/cache-dir/register-service-worker.js b/packages/gatsby/cache-dir/register-service-worker.js
@@ -15,9 +15,8 @@ if (`serviceWorker` in navigator) {
               if (navigator.serviceWorker.controller) {
                 // At this point, the old content will have been purged and the fresh content will
                 // have been added to the cache.
-                // We reload immediately so the user sees the new content.
-                // This could/should be made configurable in the future.
-                window.location.reload()
+                // We set a flag so Gatsby Link knows to refresh the page on next navigation attempt
+                window.GATSBY_SW_UPDATED = true
               } else {
                 // At this point, everything has been precached.
                 // It's the perfect time to display a "Content is cached for offline use." message.