service worker update notification

content/projects.yml

@@ -27,6 +27,9 @@
     - React
     - Ethereum
     - Web3
+    - 3Box
+    - Polygon
+    - Binance Smart Chain
 
 - title: 'Ocean Protocol - IPFS Integration'
   slug: '/oceanprotocol-ipfs/'

gatsby-browser.js

@@ -2,6 +2,7 @@ import wrapPageElementWithLayout from './src/helpers/wrapPageElement'
 
 // Global styles
 import './src/styles/global.css'
+import './src/styles/_toast.css'
 
 // IntersectionObserver polyfill for gatsby-image (Safari, IE)
 if (typeof window !== 'undefined' && !window.IntersectionObserver) {
@@ -27,11 +28,9 @@ export const shouldUpdateScroll = ({
 // 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(
+  const div = document.createElement('div')
-    'This application has been updated. ' +
+  div.id = 'toast'
-      'Reload to display the latest version?'
+  div.classList.add('alert', 'alert-info')
-  )
+  div.innerHTML = `<button onClick="window.location.reload()">Updates are available. <span>Click to Reload</span>.</button>`
-  if (answer === true) {
+  document.body.append(div)
-    window.location.reload()
-  }
 }

src/styles/_toast.css

@@ -0,0 +1,41 @@
+#toast {
+  position: sticky;
+  z-index: 10;
+  bottom: var(--spacer);
+  left: calc(var(--spacer) / 2);
+  right: calc(var(--spacer) / 2);
+  margin: 0 auto;
+  width: fit-content;
+  font-size: var(--font-size-small);
+  padding: 0;
+  animation: animation 0.2s ease-out backwards;
+  background: var(--body-background-color);
+  border-radius: var(--border-radius);
+  border: var(--stroke-width) solid transparent;
+  box-shadow: var(--box-shadow);
+}
+
+#toast button {
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: inherit;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: calc(var(--spacer) / 3) var(--spacer);
+}
+
+#toast button span {
+  color: var(--link-color);
+}
+
+@keyframes animation {
+  0% {
+    transform: translateY(-3rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}