瀏覽器通知的快速實現(xiàn)

HTML5 中的 JavaScript Web Notification API 允許桌面和移動瀏覽器顯示包含自定義內(nèi)容的通知。JavaScript Web Notification API 現(xiàn)在與大多數(shù)現(xiàn)代瀏覽器兼容,我們已經(jīng)看到它在許多網(wǎng)站和應(yīng)用程序中實現(xiàn)。

在本文中,我們將向您展示使用開源 Push.js 庫設(shè)置瀏覽器通知的最快方法。

實現(xiàn)思路

我們想要構(gòu)建一個簡單的演示應(yīng)用程序,要求獲得權(quán)限,然后在按鈕點擊時發(fā)送通知。為簡單起見,我們將使用內(nèi)聯(lián)腳本在單個 index.html 文件中工作。

我們需要做的第一件事就是引用庫。Push.js 可以通過 npm 或本地文件安裝,但實現(xiàn)它的最簡單方法是通過 CDN :

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

Push.js 庫不是使用 Web Notifications 所必需的,但它提供了一個干凈的 API ,與本機 Notification API 相比,它更容易使用。Push.js 會處理權(quán)限問題,服務(wù)工作者和跨瀏覽器的不一致性等問題,因此我們可以省掉很多不必要的麻煩。

獲取用戶許可

用戶需要先授予權(quán)限才能發(fā)送通知。

申請獲取權(quán)限

當(dāng)我們嘗試發(fā)送第一個通知時,Push.js 會自動請求權(quán)限。但是,在許多情況下,我們希望事先手動詢問用戶:

Push.Permission.request();

這將打開內(nèi)置瀏覽器對話框,提示用戶接受或拒絕接收通知。如果已授予或拒絕權(quán)限,則將忽略上述代碼。

創(chuàng)建通知

要顯示通知,我們只需調(diào)用 Push.create 方法,該方法需要一個標(biāo)題和一個包含各種有用首選項和回調(diào)的可選對象:

// 開始調(diào)用 Push.create 方法, Hello world! 是通知的標(biāo)題
Push.create("Hello world!", {
    // body 選項是通知的內(nèi)容
    body: "How's it hangin'?",
    // icon 選項是通知的圖片
    icon: './icon.png',
    // timeout 選項是通知停留時間
    timeout: 4000
});

下面的演示中,我給一個按鈕綁定了上面的方法,只要點擊按鈕就可以彈出通知窗口。

注意,通知顯示在電腦屏幕的右下角
完整代碼
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Push.js</title>
</head>
<body>
    <button id="demo-button">點擊測試</button>
    <script src="https://cdn.bootcss.com/push.js/1.0.5/push.js"></script>
    <script>
        var button = document.getElementById("demo-button");
        Push.Permission.request();
        button.onclick = function () {
            Push.create("Hello world!", {
                body: "How's it hangin'?",
                icon: './icon.png',
                timeout: 4000
            });
        };
    </script>
</body>
</html>

在這里可以看到所有可用選項:

https://pushjs.org/docs/options

確保不要打擾用戶太多。僅當(dāng)想要更新重要內(nèi)容(如新短信或新朋友請求)時才發(fā)送通知。

瀏覽器兼容性

大多數(shù)現(xiàn)代瀏覽器都支持 Notification API。

要查看您選擇的瀏覽器是否支持它,請嘗試運行我們的演示應(yīng)用程序。

它應(yīng)該在桌面 Chrome,F(xiàn)irefox 和 Safari 以及 Chrome for Android 中沒有問題。

此列表中唯一缺少的流行客戶端是 iOS Safari,它不提供任何形式的 Web 通知。

另一個需要注意的重要事項是,為了在 Android 中顯示通知,Web 應(yīng)用程序需要通過 HTTPS 托管。

進一步了解

通知是瀏覽器世界的一個相對較新的補充,但我們可以期待看到越來越多,特別是當(dāng) Progressive Web Apps 變得更受歡迎時。如果您想了解有關(guān) JavaScript 通知的更多信息,建議可以查看以下資源:

Push.js 的創(chuàng)建者的博客文章,討論他創(chuàng)建項目的原因以及他未來的計劃。

Push API - 一個新的 API,允許用戶即使在 Web 應(yīng)用程序未打開時也能收到通知。

https://developer.mozilla.org/zh-CN/docs/Web/API/Push_API

如何發(fā)一個好的通知?- Google Developers 有關(guān)如何更好地發(fā)布通知的文章。

https://developers.google.com/web/fundamentals/push-notifications/common-notification-patterns

希望分享的內(nèi)容對大家有幫助,也可以分享給你們的小伙伴,感謝你們的關(guān)注與支持。

點個關(guān)注,就是一份支持。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • 自己從記事到現(xiàn)在快三十年了,從童年回憶到長大記憶~在到現(xiàn)在的自己~感覺自己去不了心的地方好多,比如一起長大的兄弟姐...
    李天樂閱讀 226評論 0 0
  • 內(nèi)容推薦的思考 今天在思考電子書產(chǎn)品的推薦.內(nèi)容推薦對于很多內(nèi)容型產(chǎn)品來說都比較重要,如果內(nèi)容沒有辦法博得用戶的興...
    冰紅茶加冰閱讀 274評論 0 0
  • 原作者:Paul Jarvis 譯者:勵定洲 社交媒體的出現(xiàn)讓主觀信息充斥其中形成了不停的信息流。這意味著我們可以...
    定Ding閱讀 2,127評論 2 23
  • 愛的贊頌——寫給半歲的小包子。 01. 等待 2015.6 心血來潮地,爸爸麻麻去了趟潭柘寺。麻麻許了愿,希望寶寶...
    濤柒濤柒閱讀 933評論 12 8