out of the box with Vue2.x and 🌟Vue3.x
🌟, wraps the HTML5 native Notification API
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.
npm install --save native-notification-of-vue
When debugging in the development environment,you should open the HTTPS
devServer: {
https: true,
// ...
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
})
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
})
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)
},
})
this.$nativeNotification.requestPermission().then(status => {
// ...
})