1.0.8 โข Published 3 years ago
native-notification-of-vue v1.0.8
native-notification-of-vue
Description
out of the box with Vue2.x and ๐Vue3.x
๐, wraps the HTML5 native Notification API
Introduction
MDN say:
The Notification interface of the Notifications API is used to configure and display desktop notifications to the user. These notifications' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously provide information to the user.
Installation
npm install --save native-notification-of-vue
When debugging in the development environment,you should open the HTTPS
devServer: {
https: true,
// ...
Add
Vue2.x
import Vue from 'vue'
import NativeNotificationOfVue from 'native-notification-of-vue'
Vue.use(NativeNotificationOfVue, {
requestOnLoad: true // Whether to ask the user for notification right after the site loads, or ask again when you use it
})
Vue3.x
import { createApp } from 'vue'
import NativeNotificationOfVue from 'native-notification-of-vue'
const app = createApp(App)
app.use(NativeNotificationOfVue, {
requestOnLoad: true, // Whether to ask the user for notification right after the site loads, or ask again when you use it
})
Usage
push
this.$nativeNotification.push({
title: '๐ฎ๐บ',
body: 'this is awesome!',
tag: 'message', // Give the notification an ID, and in the case of the same ID, the latter overrides the former
icon: 'https://www.baidu.com/img/flexible/logo/pc/result.png', // A URL for an image that will be used to display the notification icon
data: {x: 1} // Custom data
}, {
onerror: (e) => {
console.log(e)
},
onclick: (e) => {
console.log(e)
},
onclose: (e) => {
console.log(e)
},
onshow: (e) => {
console.log(e)
},
})
offered to request notification permission
this.$nativeNotification.requestPermission().then(status => {
// ...
})