完善通知api

src/helpers/notification.js

@@ -0,0 +1,78 @@
+import dayjs from 'dayjs'
+import NotificationWorker from 'worker-loader!../workers/notification.js'
+import { createRandom } from '@/helpers/uuidv4'
+
+const clickEvents = {}
+const showEvents = {}
+const errorEvents = {}
+const closeEvents = {}
+
+const noop = () => {}
+
+export const notificationWorker = new NotificationWorker()
+
+const notificationClicked = data => {
+  const activeFn = clickEvents[data.callback_key]
+  if (typeof activeFn === 'function') {
+    activeFn(data)
+  }
+  delete clickEvents[data.callback_key]
+}
+
+const notificationShowed = data => {
+  const activeFn = showEvents[data.callback_key]
+  if (typeof activeFn === 'function') {
+    activeFn(data)
+  }
+  delete showEvents[data.callback_key]
+}
+
+const notificationErrored = data => {
+  const activeFn = errorEvents[data.callback_key]
+  if (typeof activeFn === 'function') {
+    activeFn(data)
+  }
+  delete errorEvents[data.callback_key]
+}
+
+const notificationClosed = data => {
+  const activeFn = closeEvents[data.callback_key]
+  if (typeof activeFn === 'function') {
+    activeFn(data)
+  }
+  delete closeEvents[data.callback_key]
+}
+
+notificationWorker.addEventListener('message', evt => {
+  if (evt.data.type === 'NotificationClicked') {
+    notificationClicked(evt.data.data || {})
+  } else if (evt.data.type === 'NotificationShowed') {
+    notificationShowed(evt.data.data || {})
+  } else if (evt.data.type === 'NotificationErrored') {
+    notificationErrored(evt.data.data || {})
+  } else if (evt.data.type === 'NotificationClosed') {
+    notificationClosed(evt.data.data || {})
+  }
+})
+
+export const createNotification = data => {
+  /**
+   *
+   * @param { Object } 会原样在onClick返回
+   *
+   */
+
+  const { onClick = noop, onShow = noop, onError = noop, onClose = noop, ...rest } = data
+  const timemap = dayjs().valueOf()
+  const callback_key = `${timemap}_${createRandom()}`
+  clickEvents[callback_key] = onClick
+  clickEvents[callback_key] = onShow
+  clickEvents[callback_key] = onError
+  clickEvents[callback_key] = onClose
+  notificationWorker.postMessage({
+    ...rest,
+    timemap,
+    callback_key,
+    type: 'create'
+  })
+}

src/helpers/uuidv4.js

@@ -0,0 +1,16 @@
+// from: https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
+
+const replaceString = str => {
+  return str.replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  })
+}
+
+export default () => {
+  return replaceString('xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx')
+}
+
+export const createRandom = (length = 8) => {
+  return replaceString(''.padEnd(length, 'x'))
+}

src/main.js

@@ -5,20 +5,6 @@ import dayjs from 'dayjs'
 import numeral from 'numeral'
 import lodash from 'lodash'
 import qs from 'qs'
-import NotificationWorker from 'worker-loader!./workers/notification.js'
-
-if (typeof Worker === 'function') {
-  const notificationWorker = new NotificationWorker()
-  notificationWorker.postMessage({
-    type: 'create',
-    title: '测试标题信息',
-    body: '您有新的代办事项'
-  })
-}
-
-window.addEventListener('message', evt => {
-  console.log(evt)
-})
 
 import * as constant from '@/constant'
 

src/workers/notification.js

@@ -1,18 +1,35 @@
 const createMessage = async data => {
   if (self.Notification.permission === 'granted') {
     const {title, body, ...rest} = data
-     const n = new Notification(title, {
-       body,
-       data: rest
-     })
-     n.onclick = evt => {
-       n.close()
-       console.log(evt, self, self.postMessage)
+      const n = new Notification(title, {
+        body,
+        data: rest
+      })
+      n.addEventListener('click', () => {
+        n.close()
         self.postMessage({
           type: 'NotificationClicked',
-          data: evt.data
+          data: rest
         })
-     }
+      })
+      n.addEventListener('show', () => {
+        self.postMessage({
+          type: 'NotificationShowed',
+          data: rest
+        })
+      })
+      n.addEventListener('error', () => {
+        self.postMessage({
+          type: 'NotificationErrored',
+          data: rest
+        })
+      })
+      n.addEventListener('close', () => {
+        self.postMessage({
+          type: 'NotificationClosed',
+          data: rest
+        })
+      })
    }
 }