Shulou(Shulou.com)06/03 Report--

This article shows you what the Push.js-Javascript desktop notification library is like, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Push.js is a Javascript desktop notification library that can run and receive quickly. It supports IE9+, and modern browsers such as Chrome, Safari, Firefox. It can be used in web message push, and it is easy to use.

Installation

We can use npm to quickly install.

Npm install push.js-save

Use

Running push to receive notifications is simple, and the following code creates a new notification:

Push.create ('Hello Worldwide')

We can also pass in parameter objects to customize the notification effect.

Push.create ("Hello world!", {body: "Welcome to Helloweba.net", icon:'/ icon.png', timeout: 4000, onClick: function () {window.focus (); this.close ();}})

We can also use the Push.close () method to manually close the notification interface.

Push.create ('Hello Worldwaters, {tag:' foo'}); / / Somewhere later in your code...Push.close ('foo')

Options and configuration

The following are common option configurations:

Body: the body content of the notification.

Data: data is passed to the ServiceWorker notification.

RequireInteraction: if set to true, notifications will not be automatically turned off unless manually clicked close.

Icon: you can set small icons on the notification interface that are 16x16 or 32x32 pixels.

Link: when a user clicks on a notification on a mobile device, it navigates to the corresponding page.

Tag: Mark the notification, which can be used to identify which notification is to be closed.

Timeout: notify the time of automatic shutdown in milliseconds.

OnClick (): callback, which is triggered when the notification interface is clicked.

OnClose (): callback, which is triggered when the notification is to be turned off.

OnError (): callback, which is triggered when the notification throws an error.

OnShow (): callback, triggered when a notification is displayed.

Push.js also provides a .config () method for global configuration.

Push.config ({serviceWorker:'. / customServiceWorker.js', / / Sets a custom service worker script fallback: function (payload) {/ / Code that executes on browsers with no notification support / / "payload" is an object containing the / / title, body, tag, and icon of the notification})

Authority

Browser-based notification requires permission granted by the browser. Just like the browser turning on the camera, the current browser will pop up the query window, and the notification library will not be officially called until you pass the permission, as shown in the following figure.

The above is what the Push.js-Javascript desktop notification library is like. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.