🐛 (notification) fix notification

src/components/DreamMaker.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dream-maker">
-    <h2>code {{ position }}</h2>
+    <h2>dev {{ position }}</h2>
     <h4 v-show="isTurn">{{ session }}</h4>
   </div>
 </template>

src/registerServiceWorker.ts

@@ -1,14 +1,13 @@
 /* eslint-disable no-console */
 
 import { register } from 'register-service-worker'
+import { setNotificationInstance } from './utils/notification'
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
     ready(sw) {
       console.log('App is being served from cache by a service worker')
-      sw.showNotification('Session started!', {
-        vibrate: [300, 100, 400]
-      })
+      setNotificationInstance(sw.showNotification)
     },
     registered() {
       console.log('Service worker has been registered.')
@@ -21,6 +20,7 @@ if (process.env.NODE_ENV === 'production') {
     },
     updated() {
       console.log('New content is available; please refresh.')
+      location.reload(true)
     },
     offline() {
       console.log(

src/utils/notification.ts

@@ -1,19 +1,46 @@
 declare const Notification: any
 
-export const notify = (message: string) => {
+let showNotification:
+  | ((
+      title: string,
+      options?: NotificationOptions | undefined
+    ) => Promise<void>)
+  | null = null
+
+export const setNotificationInstance = (
+  sn: (
+    title: string,
+    options?: NotificationOptions | undefined
+  ) => Promise<void>
+) => {
+  showNotification = sn
+}
+
+export const notify = (
+  title: string,
+  options?: NotificationOptions | undefined
+) => {
   try {
+    console.log(showNotification)
+
+    if (!showNotification) {
+      return
+    }
     if (!('Notification' in window)) {
       return
     } else if (Notification.permission === 'granted') {
-      new Notification(message)
+      showNotification(title, options)
     } else if (Notification.permission !== 'denied') {
       Notification.requestPermission((permission: any) => {
+        if (!showNotification) {
+          return
+        }
         if (!('permission' in Notification)) {
           Notification.permission = permission
         }
 
         if (permission === 'granted') {
-          new Notification(message)
+          showNotification(title, options)
         }
       })
     }

src/views/Home.vue

@@ -79,7 +79,7 @@ export default defineComponent({
             ? 'Programmer 1'
             : 'Programmer 2'
 
-          notify(`Time to change, ${programmer}, your turn!`)
+          notify('Time to change', { body: `${programmer}, your turn!` })
         }
       }, 1000)
       stopWatchSessionId = setInterval(() => {