轻快到能上天下地，强悍到能四两拨千斤：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这一篇够了