add notification

src/register-service-worker.js

@@ -1,7 +1,7 @@
 import store from '~/src/store'
 
 export default () => {
-  if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
+  if ('serviceWorker' in navigator) {
     navigator.serviceWorker
       .register(new URL('~/src/service-worker.js', import.meta.url), { type: 'module' })
       .then(registration => {

src/service-worker.js

@@ -16,3 +16,17 @@ async function activate () {
 }
 
 addEventListener('activate', e => e.waitUntil(activate()))
+
+addEventListener('notificationclick', event => {
+  event.notification.close()
+
+  event.waitUntil(
+    clients
+      .matchAll({ type: 'window' })
+      .then(clientList => {
+        for (const client of clientList) {
+          return client.focus()
+        }
+      })
+  )
+})

src/views/screens/download.vue

@@ -96,16 +96,12 @@ export default {
           this.downloadReady = true
 
           if (document.hidden && ('Notification' in window) && Notification.permission === 'granted') {
-            const notification = new Notification('You can now download your souvenir', {
+            navigator.serviceWorker.ready.then((registration) => {
-              body: 'Thank you for your patience.',
+              registration.showNotification('You can now download your souvenir', {
-              icon: appLogo
+                body: 'Thank you for your patience.',
-            })
+                icon: appLogo
-
+              })
-            notification.addEventListener('click', () => {
+            }).catch(console.error)
-              parent.focus()
-            }, {
-              once: true
-            })
           }
         }
       })

src/views/screens/encoding.vue

@@ -85,12 +85,8 @@ export default {
 }
 
 function showNotificationButton () {
-  return false
+  return ('Notification' in window) &&
-
+    Notification.permission !== 'granted' &&
-  // TODO: fuuuuuuuuuuuuu android, I don't want to spawn notifications from a fucking service worker :<
+    Notification.permission !== 'denied'
-
-  // return ('Notification' in window) &&
-  //   Notification.permission !== 'granted' &&
-  //   Notification.permission !== 'denied'
 }
 </script>