more user-friendly service worker update message

gatsby-browser.js

@@ -11,11 +11,9 @@ export const wrapPageElement = wrapPageElementWithLayout
 // Display a message when a service worker updates
 // https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/#displaying-a-message-when-a-service-worker-updates
 export const onServiceWorkerUpdateReady = () => {
-  const answer = window.confirm(
-    `This application has been updated. ` +
-      `Reload to display the latest version?`
-  )
-  if (answer === true) {
-    window.location.reload()
-  }
+  const div = document.createElement('div')
+  div.id = 'toast'
+  div.classList.add('alert', 'alert-info')
+  div.innerHTML = `<button onClick="window.location.reload()">This application has been updated. <span>Click to Reload</span>.</button>`
+  document.body.append(div)
 }

src/styles/_toast.scss

@@ -0,0 +1,34 @@
+@import 'variables';
+
+#toast {
+  position: sticky;
+  z-index: 10;
+  bottom: $spacer / 2;
+  right: $spacer / 2;
+  left: $spacer / 2;
+  width: fit-content;
+  margin: 0 auto;
+  font-size: $font-size-small;
+  padding: $spacer / 3 $spacer;
+  animation: animation 0.2s ease-out backwards;
+
+  button {
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    color: inherit;
+
+    span {
+      color: $link-color;
+    }
+  }
+}
+
+@keyframes animation {
+  0% {
+    transform: translateY(3rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

src/styles/global.scss

@@ -31,6 +31,7 @@ body {
   min-height: 100vh;
   transition: background 0.4s $easing;
   background: $body-background-color;
+  position: relative;
 
   // handling long text, like URLs
   overflow-wrap: break-word;
@@ -409,6 +410,7 @@ table {
 @import 'code';
 @import 'buttons';
 @import 'alerts';
+@import 'toast';
 
 .dark .medium-zoom-overlay {
   background-color: $body-background-color--dark !important;