Push.js-Javascript桌面通知庫是怎樣的

本篇文章為大家展示了Push.js-Javascript桌面通知庫是怎樣的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

Push.js是一個可以快速運行和接收的Javascript桌面通知庫，它支持IE9+，以及現代瀏覽器如：Chrome, Safari, Firefox。它可以應用在網頁消息推送方面，而且簡單易用。

安裝

我們可以使用npm快速安裝。

npm install push.js --save

使用

運行push接收通知非常簡單，以下代碼就可以創建一個新的通知：

Push.create('Hello World!');

我們還可以傳入參數對象，定制通知效果，

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

我們也可以使用Push.close()方法來手動關閉通知界面。

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

選項和配置

以下是常用的選項配置：

body：通知的主體內容。

data：數據傳遞給ServiceWorker通知。

requireInteraction：如果設置成true的話，通知不會自動關閉，除非人工手動點擊關閉。

icon：可以設置通知界面上大小為16x16或32x32像素的小圖標。

link：當用戶點擊移動設備上的通知時，則會導航到對應的頁面上。

tag：標記通知，后面關閉通知可以通過該標記來識別是要關閉哪條通知。

timeout：通知自動關閉的時間，毫秒。

onClick()：回調，當點擊通知界面的時候觸發。

onClose()：回調，當要關閉通知的時候觸發。

onError()：回調，當通知拋出錯誤的時候觸發。

onShow()：回調，當顯示通知的時候觸發。

Push.js還提供了一個.config()方法用于全局配置。

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     }});

權限

基于瀏覽器的通知需要瀏覽器授予權限，就如同瀏覽器開啟攝像頭一樣，當前瀏覽器會彈出詢問窗口，當你通過允許后，才會正式調用通知庫，如下圖。

上述內容就是Push.js-Javascript桌面通知庫是怎樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。