言

Notification API 是 HTML5 新增的桌面通知 API，用于向用戶顯示通知信息。該通知是脫離瀏覽器的，即使用戶沒有停留在當(dāng)前標(biāo)簽頁，甚至最小化了瀏覽器，該通知信息也一樣會置頂顯示出來。

用戶權(quán)限

想要向用戶顯示通知消息，需要獲取用戶權(quán)限，而相同的域名只需要獲取一次權(quán)限。只有用戶允許的權(quán)限下，Notification 才能起到作用，避免某些網(wǎng)站的廣告濫用 Notification 或其它給用戶造成影響。那么如何知道用戶到底是允不允許的？

Notification.permission 該屬性用于表明當(dāng)前通知顯示的授權(quán)狀態(tài)，可能的值包括：

• default ：不知道用戶的選擇，默認(rèn)。granted ：用戶允許。denied ：用戶拒絕。

if(Notification.permission === 'granted'){
 console.log('用戶允許通知');
}else if(Notification.permission === 'denied'){
 console.log('用戶拒絕通知');
}else{
 console.log('用戶還沒選擇，去向用戶申請權(quán)限吧');
}

請求權(quán)限

當(dāng)用戶還沒選擇的時候，我們需要向用戶去請求權(quán)限。Notification 對象提供了 requestPermission() 方法請求用戶當(dāng)前來源的權(quán)限以顯示通知。

以前基于回調(diào)的語法已經(jīng)棄用（當(dāng)然在現(xiàn)在的瀏覽器中還是能用的），最新的規(guī)范已將此方法更新為基于 promise 的語法：

Notification.requestPermission().then(function(permission) {
 if(permission === 'granted'){
 console.log('用戶允許通知');
 }else if(permission === 'denied'){
 console.log('用戶拒絕通知');
 }
});

推送通知

獲取用戶授權(quán)之后，就可以推送通知了。

var notification = new Notification(title, options)

參數(shù)如下：

• title：通知的標(biāo)題options：通知的設(shè)置選項（可選）。
• body：通知的內(nèi)容。tag：代表通知的一個識別標(biāo)簽，相同tag時只會打開同一個通知窗口。
• icon：要在通知中顯示的圖標(biāo)的URL。
• image：要在通知中顯示的圖像的URL。
• data：想要和通知關(guān)聯(lián)的任務(wù)類型的數(shù)據(jù)。
• requireInteraction：通知保持有效不自動關(guān)閉，默認(rèn)為false。

還有一些其他的參數(shù)，因為用不了或者沒什么用這里就沒必要說了。

var n = new Notification('狀態(tài)更新提醒',{
 body: '你的朋友圈有3條新狀態(tài)，快去查看吧',
 tag: 'linxin',
 icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
 requireInteraction: true
})

通知消息的效果圖如下：

關(guān)閉通知

從上面的參數(shù)可以看出，并沒有一個參數(shù)用來配置顯示時長的。我想要它 3s 后自動關(guān)閉的話，這時可以調(diào)用 close() 方法來關(guān)閉通知。

var n = new Notification('狀態(tài)更新提醒',{
 body: '你的朋友圈有3條新狀態(tài)，快去查看吧'
})

setTimeout(function() {
 n.close();
}, 3000);

事件

Notification 接口的 onclick屬性指定一個事件偵聽器來接收 click 事件。當(dāng)點擊通知窗口時會觸發(fā)相應(yīng)事件，比如打開一個網(wǎng)址，引導(dǎo)用戶回到自己的網(wǎng)站去。

var n = new Notification('狀態(tài)更新提醒',{
 body: '你的朋友圈有3條新狀態(tài)，快去查看吧',
 data: {
 url: 'http://blog.gdfengshuo.com'
 }
})
n.onclick = function(){
 window.open(n.data.url, '_blank'); // 打開網(wǎng)址
 n.close(); // 并且關(guān)閉通知
}

應(yīng)用場景

前面說那么多，其實就是為了用。那么到底哪些地方可以用到呢？

現(xiàn)在網(wǎng)站的消息提醒，大多數(shù)都是在消息中心顯示個消息數(shù)量，然后發(fā)郵件告訴用戶，這流程完全沒有錯。不過像我這種用戶，覺得別人點個贊，收藏一下都要發(fā)個郵件提醒我，老是要去刪郵件（強迫癥），我是覺得挺煩的甚至關(guān)閉了郵件提醒。

當(dāng)然這里并不是說要用 Notification，畢竟它和郵件的功能完全不一樣。

我覺得比較適合的是新聞網(wǎng)站。用戶瀏覽新聞時，可以推送給用戶實時新聞。以騰訊體育為例，它就使用了 Notification API。在頁面中引入了一個 notification2017_v0118.js，有興趣可以看看別人是怎么成熟的使用的。

一進(jìn)入頁面，就獲取授權(quán)，同時自己頁面有個浮動框提示你允許授權(quán)。如果允許之后，就開始給你推送通知了。不過它在關(guān)閉標(biāo)簽卡的時候，通知也會被關(guān)閉，那是因為監(jiān)聽了頁面 beforeunload 事件。

function addOnBeforeUnload(e) {
 FERD_NavNotice.notification.close();
}
if(window.attachEvent){
 window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
 window.addEventListener('beforeunload', addOnBeforeUnload, false);
}

兼容

說到兼容，自然是倒下一大片，而且各瀏覽器的表現(xiàn)也會有點差異。移動端的幾乎全倒，PC端的還好大多都能支持，除了IE。所以使用前，需要先檢查一下瀏覽器是否支持 Notification。

，只要會往`<canvas>`里面畫一個長方形，就可以做出來這樣子的效果，畫比較多的正方形實現(xiàn)像素風(fēng)頭像生成器：

趕時間的客官可以直接去`正文開始`那里。

今天有個想法，整成手把手系列，就是假設(shè)客官是一個從來沒有接觸過網(wǎng)頁編輯、代碼、編程的新手。所以會說的比較詳細(xì)，比較累贅，大神們笑笑點個贊就好了，哈哈。

我的想法（初心）是，將一個有興趣寫網(wǎng)頁，但是不知道從何開始的人，通過幾篇很小的實例，讓他產(chǎn)生興趣，跟出效果，形成自己動手去學(xué)習(xí)的動力，便是最好了。

所以，努力寫得通俗易懂，簡單直接，拋開別的因素，先實現(xiàn)出來再說，那時候?qū)W寫代碼的時候也是聽師傅說“先有后優(yōu)”，所以，粗糙點不管，能說明問題便好。

有客官對于我前面幾天碼的字，有反饋，有問題提出來，非常感謝有人搭理我。提出來的1,web字體設(shè)置的方法，2,響應(yīng)式布局，3,網(wǎng)頁上面音頻播放的多瀏覽器兼容問題，4,不知從何入手學(xué)習(xí)一個東西...我都在拿著小本記下來，閑暇時間趕緊去搜集一些比較好的方法，盡力去更新分享這些方面的一小點經(jīng)驗，還請各位客官多多搭理我呀。

這里先把昨天最后那個小坑給添一下，那個響應(yīng)式布局，是通過在CSS里面定義不同屏幕寬度時候使用不同的樣式，直接帖代碼出來吧：

@media screen and ( max-width: 1920px ) {
 div.content {
 height: 600px;
 width: 300px;
 float: left;
 padding-top: 97px;
 }
 div.sider {
 float: right;
 }
 body {
 width: 600.111111px;
 margin: 0 auto;
 }
}

@media screen and ( max-width: 720px ) {
 div {
 display: block;
 clear:both;
 height: auto;
 }
 div.content {
 display: block; 
 height: auto; 
 width: 100%;
 }
 div.sider {
 display: block;
 width: 100%;
 padding-bottom: 100px;
 }
 body {
 margin: 0;
 padding: 0;
 width: 100%;
 }
}

在1920到720這么寬的時候，兩個div左右浮動，在小于720的時候，兩個div顯示模式改為塊級元素，寬度定義為100%，也就變成豎著排列了。就這樣子。

接下來，正文開始：

1, 只用一個文件：`t.html`就好了，忘掉那些什么最佳實踐，干就完了，新建文本文件，然后重命名成`t.html`，注意，重命名成網(wǎng)頁之后，文件的圖標(biāo)會發(fā)生變化，不是以前文本文檔時候的樣子，如果圖標(biāo)沒變，你極可能重命名成了`t.html.txt`這樣子的，我的小視頻里面有如何設(shè)置windows7顯示擴展名，看看也是極好的。

2, 很簡單的網(wǎng)頁基本代碼：

<!doctype html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>像素風(fēng)頭像生成器</title>
</head>
<body>
<div id="wrapper">
<!--第一個注釋，這里等下放畫板（canvas標(biāo)簽）-->
</div>
<!--第二個注釋，這里等下放javascript代碼-->
</body>
</html>

復(fù)制上面的代碼到`t.html`里面，然后保存，存成utf-8編碼格式(實例001里面有個圖片演示了怎么保存)。

3, 繼續(xù)編輯`t.html`文件，在兩個注釋的地方，第一個放入`<canvas>`標(biāo)簽，同時給它樣式，定義大小(寬500,高400），還有一個邊框（1像素實心線奶奶灰色），`<canvas>標(biāo)簽中間的一句話，在不支持canvas標(biāo)簽的瀏覽器里面會被顯示出來`：

 <canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;">
 快看，這里有一個還在用IE6/8的老實人，大家快來~~
 </canvas>

4, 第2步里面的第二個注釋的位置，加入javascript代碼，看代碼注釋理解語句的含義：

<script type="text/javascript">
//在html中用ID找到叫做`mycanvas`的畫布，給它取名叫c
var c = document.getElementById("myCanvas");
//通過這個c（剛才找到的畫布），拿到一套可以畫2D圖片的基本工具， 取名叫ctx，可以理解成拿起一根畫筆
var ctx=c.getContext("2d");
//給ctx這根畫筆，蘸上橙色
ctx.fillStyle="orange";
//用ctx這根畫筆，在x=100,y=90這個坐標(biāo)位置，畫一個長80,寬40的長方形
ctx.fillRect(100,90,80,40);
</script>

效果：

大小位置標(biāo)注：

是不是很簡單呀，在網(wǎng)上可以搜索`html5 canvas 基本開關(guān)`了解更多，不知客官可否通過這個別樣的“畫布”畫出來一個五角星呢？歡迎挑戰(zhàn)。

晚安