輕快到能上天下地，強悍到能四兩撥千斤：Ninja 網絡瀏覽器

inja 意為忍者，武功高強、精通忍術，好似輕輕一片羽毛，能以四兩撥千斤，也可升天遁地，鴻毛般悄然潛入你的世界。Ninja 讀音可類比「您家」，像是告訴大家，我屬于你家。這是我對 Ninja 瀏覽器的印象：輕快好用，國內高材生開發，還不是從別人家拿過來的。

對比一下國內幾個著名的手機瀏覽器，他們針對國內市場所發布的產品，個個塊頭好似相撲，功能堆砌如山；爬上梯子探頭觀之，卻發現紅杏結在外，那些所謂「國際版」的瀏覽器應用都走「小清新」路線，身材苗條，功能簡潔。問其所以然，答曰「國內外用戶需求不同，走差異化路線」。如此看來，如果不拿別人家的「國際版」瀏覽器，我們似乎就只有羨慕的份。于是，Ninja 瀏覽器進入了你家，像忍者一樣，滿足了你要輕裝上陣的需求。

初級忍術：輕量級別暢快瀏覽

少數派曾介紹過的 via 瀏覽器體積只有 0.19M，Ninja 瀏覽器稍大，但也只有 0.47M，不可不謂如忍者般輕巧。體積雖然打折，但瀏覽體驗依舊百分百。

Ninja 瀏覽器使用了 Android 系統中由 Chrome 提供支持的 Android System WebView 組件，這個組件提供了瀏覽器的內核服務，與電腦里各種第三方瀏覽器和 IE 內核的關系類似。手機里，我們所熟知的 UC、QQ 等瀏覽器都自帶了「自主研發」的內核，因此體積稍大，并且體驗確實略遜一籌。拿 Html5 為例，使用了 Android System WebView 組件 Ninja 瀏覽器，Html5 跑分高達 512，逼近東家 Chrome 的 518 分，超越同樣使用此組件的自帶互聯網應用（479 分），甩開 UC 瀏覽器整 100 分。

雖說跑分不能代表一切，但也足以看出 Ninja 瀏覽器穩定和完善的瀏覽體驗，而實際體驗中也確實沒有令人失望。應用秒開，默認頁面清爽，網址快捷鍵可完全自定義，不會強制駐留；查看地全景地圖絲毫不卡頓，點哪兒去哪；flash 游戲可以正常運行；網頁視頻可流暢播放，但在瀏覽部分網站中，視頻全屏不完整，網址欄不會隱藏。

中級忍術：個性配置手勢操作

要成為忍者，需要具備應付各種場景的技能，而 Ninja 瀏覽器的個性化和手勢操作完全可以達到這個目的。

Ninja 瀏覽器中，我們可以改變地址欄的位置：頂部適合傳統瀏覽，躺在家里刷個新聞看個微博比較舒服；放在底部更適合出門在外，單手操作的時候手指更容易點按到地址欄，有 Windows Phone 情節的用戶還可以模擬一下手機上的 IE 瀏覽器。

Ninja 瀏覽器的另一特性是基于地址欄的手勢操作，在初次進入 Ninja 瀏覽器的時候，應用會彈出位于本地的引導頁面，告訴你這幾個簡單的手勢：上下拖動地址欄彈出標簽頁和菜單欄（設置和書簽歷史的入口都在這里）、上下拖動標簽縮略圖關閉此網頁、瀏覽中左右滑動地址欄用來切換標簽，是不是非常簡單。值得注意的是，當輸入法鍵盤處于激活狀態時，標簽欄將被暫時禁用以防誤觸，大家不要以為這是應用假死。

高級忍術：進階功能貼心為你

當忍者修煉到高級階段時，就需絕對的忠誠和更強悍的技能。Ninja 瀏覽器的各種貼心和自由的設定功能可以讓這個「忍者」完全受你所控。

Ninja 瀏覽器在設置中可以控制是否允許網頁打開新標簽，這個設定對那種不斷彈窗的流氓網頁非常有用；而渲染模式可以更改查看網頁的樣式，例如「灰度」模式可以用來做網頁的打印預覽、「反轉」模式可以幫助色覺障礙人群瀏覽。

貼心的功能遠不止如此，Ninja 瀏覽器內嵌了簡單的 AdBlock，可以自由的導出或倒入廣告規則；閱讀模式允許你調用「Readability」技術，在「Readability」網站上獲取你的個人令牌后，Ninja 瀏覽器就可以為你提供更純凈的文字閱讀體驗；內置網頁截圖功能，大多數網頁額可以來一個全身快照，分享小說和帖子非常方便。

而 Ninja 瀏覽器最吸引我的地方，是類似 Link Bubble 和 Flynx 的后臺加載網頁功能。將 Ninja 瀏覽器設為默認后，單擊鏈接選擇它會在后臺加載，快速雙擊鏈接會彈出提示，你可以選擇直接彈出頁面或是復制地址和分享。Ninja 瀏覽器的開發者「認為懸浮窗口是邪惡的」，所以他將網頁加載提示放到了通知欄中而非懸浮球，更加符合 Android 的設計規范，并且可以自定義通知的優先級，將選擇權交還給用戶。更重要的是，免費，也沒有數量限制。

作為瀏覽器，它已經滿足了我們想要的：輕快、方便、強大。讓我們不再羨慕別人家的瀏覽器，告訴他們，這個像忍者一般的 Ninja 瀏覽器是「我家」的。

言

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

用戶權限

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

Notification.permission 該屬性用于表明當前通知顯示的授權狀態，可能的值包括：

default ：不知道用戶的選擇，默認。granted ：用戶允許。denied ：用戶拒絕。

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

請求權限

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

以前基于回調的語法已經棄用（當然在現在的瀏覽器中還是能用的），最新的規范已將此方法更新為基于 promise 的語法：

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

推送通知

獲取用戶授權之后，就可以推送通知了。

var notification = new Notification(title, options)

參數如下：

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

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

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

通知消息的效果圖如下：

關閉通知

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

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

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

事件

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

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

應用場景

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

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

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

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

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

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

兼容

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

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

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

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

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

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

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

這里先把昨天最后那個小坑給添一下，那個響應式布局，是通過在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`，注意，重命名成網頁之后，文件的圖標會發生變化，不是以前文本文檔時候的樣子，如果圖標沒變，你極可能重命名成了`t.html.txt`這樣子的，我的小視頻里面有如何設置windows7顯示擴展名，看看也是極好的。

2, 很簡單的網頁基本代碼：

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

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

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

 <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這個坐標位置，畫一個長80,寬40的長方形
ctx.fillRect(100,90,80,40);
</script>

效果：

在畫布的左上角，坐標為0,0

大小位置標注：

嗯，就是這樣

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

晚安

在線咨詢

上一篇：用免費OA辦公系統打造統一移動辦公系統
下一篇：最全Html標簽Meta介紹，全面總結，學HTML這一篇夠了