The introduction

This is the prompt that Chrome pops up in the address bar 👇 when you first enter Facebook

When you click “Allow”, even if you minimize tabs or cut to other tabs, chat messages sent to you by friends will be notified via desktop-level notifications. FB also uses FCM, even if you close the browser, you will still be able to set up notifications for later research.

Then again, if we’re not using it, how do we notify our users? 👇

By dynamically changing the document.title alert, however, the thing becomes meaningless when the user has already minimized to watch the show.

What is the Notification API

It is explained in the MCN 👇

The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.

The Notifications API allows the Web side to display Notifications on the user’s desktop. This notification is desktop-level, so it will appear even if the user switches tabs or moves to another application. The API is designed to be compatible with existing notification systems on different platforms.

After a brief test, it works fine on Chrome, FF, and Safari, except for different styles. As of now compatibility 👇

How to use

If the browser supports it, there is a Notification constructor under the window that expands to 👇

requestPermission()

Desktop notification is just like watching a movie and suddenly pops out an advertisement, which may cause a nuisance to people. Therefore, it is necessary to ask users for the permission of notification 👇 in advance

Notification. RequestPermission () / / returns a Promise object, So that we can in the process of actual 👇 Notification. RequestPermission (). Then (permission = > {the console. The log (permission) / / granted, denied, Or default.})Copy the code

Granted indicates a permission notification, denied indicates a denial, and default indicates the same effect as the denial.

Permission Static attributes

The meaning of notification. permission value is the same as above.

Instance attributes

New Notification(title, {dir: '', // direction of text; Its value can be auto (automatic), LTR (left to right), or RTL (right to left) lang: ", // specifies the language used in the notification. This string must be valid in the BCP 47 Language Tag document as body: ", // notification content tag: ", // give the notification an ID so that it can be refreshed, replaced, or removed if necessary. Icon: ", // The URL of an image that will be used to display the notification icon. Data: ", // Whatever data you want to put in. })Copy the code

Event

Notification.onclick handles the handling of the click event. Triggered whenever the user clicks on a notification.

Notification.onshow Processing Processing of the show event. Triggered when a notification is displayed.

Notification.onerror Handles error events. Emitted whenever the notification encounters an error.

Notification.onclose Handles the processing of close events. Triggered when the user turns off notifications.

Complete sample

Function notifyMe() {// Check if the browser supports if (! ("Notification" in window)) { alert("This browser does not support desktop notification"); Else if (notification. permission === "granted") {// If it's okay let's create a Notification var notification = new Notification("Hi there!" ); } else if (notification.permission! = = "denied") {Notification. RequestPermission (). Then (function (permission) {/ / if the user permissions, If (Permission === "granted") {var notification = new notification ("Hi there!" ); }}); } // Finally, the user has refused to authorize the notification. // Out of respect, we should not bother them anymore.Copy the code

Used in Vue

The main idea is to mount the required method to the Vue prototype, encapsulation method to make it more in line with Chinese habits, and compatible with ⭐Vue3⭐!

NPM

Has been pushed to NPM 👉 www.npmjs.com/package/nat… Welcome to Issue Star!