A Notification,
- Notification is a new API for HTML5 for user configuration and real-world desktop Notification. The appearance and specific functionality of these notifications vary from platform to platform.
- Notification notifications are browser-free and even if the user does not stay on the current TAB or even minimizes the browser, they appear in the lower right corner of the home screen and then disappear after some time.
- Notification also listens for Notification display, click, close, etc.
Two, examples, you try
// Check whether the browser supports Notificationif (window.Notification) {
switch (Notification.permission) {
case 'default':
alert('User has not enabled message notification for this site');
defaultPermission();
break;
case 'granted':
alert('User has enabled message notification for this site');
showNotification();
break;
case 'denied':
alert('User rejects message notifications for this site');
break; }}else {
alert('Message notification is not supported yet');
}
function defaultPermission() {
Notification.requestPermission().then(permission => {
switch (permission) {
case 'default':
break;
case 'granted':
showNotification();
break;
case 'denied':
alert('The user still refused the notification.');
break; }}); }function showNotification() {
new Notification('I'm a message notification! ');
}
Copy the codeNote: The first time you execute the above code in the domain console, you will be prompted to enable notifications. If it has been turned on, notifications will be displayed automatically.
Note: If you have previously disabled Notification in the domain, you can manually enable Notification. Notification code cannot be designed to enable Notification in the disabled state.
User refuses to display notification:
Once the user disables the site from displaying notifications, the site can no longer request permission to display notifications, requiring the user to change the notification in Settings.
Take Google as an example. In your browser Settings, start adding or starting web site notifications. Different browsers have different notification Settings.
Iii. Notification Detection permission
// Check whether the browser supports Notificationif (window.Notification) {
switch (Notification.permission) {
case 'default':
alert('User has not enabled message notification for this site');
break;
case 'granted':
alert('User has enabled message notification for this site');
break;
case 'denied':
alert('User rejects message notifications for this site');
break; }}else {
alert('Message notification is not supported yet');
}
Copy the codeTo prevent sites from abusing notifications, users need to give their consent before displaying them.
Permission is used to indicate the authorization status of the current Notification display. It has three values:
- Default: the default value is not selected by the user
- Granted: User allows the site to send notifications
- Denied: The user refused to send a notification to the site
Notification Request permission
Notification.requestPermission().then(permission => {
switch (permission) {
case 'default':
alert('User has disabled authorization');
break;
case 'granted':
alert('User agrees to authorize')
break;
case 'denied':
alert('The user still refused the notification.');
break; }});Copy the code
Permission is default
V. Notification
When notification. permission is granted, notifications can be sent at any time, in any form, rather than immediately after the user’s permission is requested.
onst title = 'This is a custom message notification';
const options = {
body: 'body: string. The body content of the notification. ',
dir: 'auto',
icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
};
const notification = new Notification(title, options);
Copy the code
Parameters for Notification:
1. Title: indicates the title of the message notification
2. The options:
- Body reads only the body string of the notification specified in the options argument of the constructor.
- Data read-only returns a structured clone of notification data.
- Dir Text direction for read-only notifications, specified in the options argument of the constructor.
- Lang reads only the language code for the notification specified in the options parameter of the constructor.
- Tag reads only the ID (if any) of the notification specified in the options argument of the constructor.
- Icon reads only the URL of the image used as the notification icon specified in the options argument of the constructor.
- Image reads only the URL of the image to be displayed in the notification, as specified in the options argument of the constructor.
- Renotify Read-only Specifies whether the user should be notified after the new notification replaces the old one.
- RequireInteraction Read-only A Boolean indicates that the notification should remain valid until the user clicks or turns it off, rather than closing it automatically.
- Silent Read-only specifies whether the notification should remain silent – that is, no sound or vibration is emitted regardless of device Settings.
- Timestamp read-only specifies the time (past, present, or future) when the notification was created or applied.
- Title reads only the title of the notification specified in the first argument to the constructor.
- Vibrate Read-only Specifies the vibration mode for a device with vibration hardware.
Vi. Notification event processing
- Click: triggered when the user clicks on a notification
- Show: triggered when the notification is displayed
- Error: This notification is triggered when an error is encountered
- Close: Triggered when the notification is closed
const title = 'This is a custom message notification';
const options = {
body: 'body: string. The body content of the notification. ',
dir: 'auto',
icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
};
const notification = new Notification(title, options);
notification.onclick = e => {
alert(1);
}
notification.onclose = e => {
alert(2);
}
notification.onshow = e => {
alert(3);
}
notification.onerror = e => {
alert(4);
}
Copy the codeVii. Application scenarios of Notification
- Instant messaging software can be used, such as email notifications. Chat notifications.
- Notification of results, e.g. welfare lottery notification of results.
- News notifications, as on news websites.
- Website updates, such as iterative updates in the system, can be notified.
Eight, sample complete code
<template>
<div>
<button @click="grantedPermission"</button> </div> </template> <scripttype="text/javascript">
export default {
data() {
return{}},created() {// Check whether the browser supports Notificationif (window.Notification) {
switch (Notification.permission) {
case 'default':
this.defaultPermission();
break;
case 'granted':
this.grantedPermission();
break;
case 'denied':
alert('User rejects message notifications for this site');
break; }}else {
alert('Message notification is not supported yet'); }}, methods: {/** * [defaultPermission If a user rejects message notification, it can ask whether to enable message notification] * @version [1.0] */defaultPermission() {
Notification.requestPermission().then(permission => {
switch (permission) {
case 'default':
break;
case 'granted':
this.grantedPermission();
break;
case 'denied':
alert('The user still refused the notification.');
break; }}); }, /** * [grantedPermission runs the message notification state, which can notify the originating message] */grantedPermission() {
const title = 'This is a custom message notification';
const options = {
body: 'body: string. The body content of the notification. ',
dir: 'auto',
icon: 'http://cdn.duitang.com/uploads/item/201410/21/20141021130151_ndsC4.jpeg'
};
const notification = new Notification(title, options);
notification.onclick = e => {
alert(1);
}
notification.onclose = e => {
alert(2);
}
notification.onshow = e => {
alert(3);
}
notification.onerror = e => {
alert(4);
}
}
}
}
</script>
Copy the codeNine, the biggest problem
Currently, all browsers support desktop Notification except Internet Explorer. Mobile browsers do not support desktop Notification.
