菜单

HTML5 web文告API介绍

2019年1月21日 - JavaScript

HTML5 web通知API介绍

2015/04/17 · HTML5 · 2
评论
·
web通知

本文由 伯乐在线
ElvisKang
翻译,周进林
校稿。未经许可,禁止转发!
英文出处:www.sevensignature.com。欢迎出席翻译组

图片 1

在使用网页版Gmail的时候,每当收到新邮件,显示屏的右下方都会弹出相应的提醒框。借助HTML5提供的Notification
API,我们也得以轻松达成如此的效益。

点评:HTML5的强大之一就是允许web程序提请一些暂时或者永久的空中(Quota)在那里可以拓展数量的积存甚至文件的操作

担保浏览器扶助

若是你在特定版本的浏览器上开展支付,那么我提议你先到
caniuse
查看浏览器对Notification
API的支撑景况,防止你将贵重时间浪费在了一个不可能选用的API上。

HTML5的强硬之一就是同意web程序提请一些临时或者永久的长空(Quota)在此处能够开展
数据的蕴藏甚至文件的操作。

怎么着开头

JavaScript

var notification=new Notification(‘Notification Title’,{ body:’Your
Message’ });

1
2
3
var notification=new Notification(‘Notification Title’,{
    body:’Your Message’
});

上边的代码构造了一个简陋的通告栏。构造函数的首先个参数设定了通告栏的标题,而第四个参数则是一个option
对象,该目的可设置以下属性:

FileSystem提供了文件夹和文书的创制、移动、删除等操作,大大有利了数量的地面处理,
而且所有的数额都是在沙盒(sandboxed)中,分歧的web程序无法相互走访,那就保险了数据
的一体化和辽阳。

获取权力

在呈现布告栏以前需向用户申请权限,只有用户同意,通告栏才可出现在显示屏中。对权力申请的拍卖将有以下重返值:

JavaScript

Notification.requestPermission(function(permission){ //display
notification here making use of constructor });

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f063d76a49818832322-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f063d76a49818832322-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f063d76a49818832322-1" class="crayon-line">
Notification.requestPermission(function(permission){
</div>
<div id="crayon-5b8f063d76a49818832322-2" class="crayon-line crayon-striped-line">
//display notification here making use of constructor
</div>
<div id="crayon-5b8f063d76a49818832322-3" class="crayon-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>

用HTML创立一个按钮

XHTML

<button id=”button”>Read your notification</button>

1
<button id="button">Read your notification</button>

时刻思念了CSS

CSS

#button{ font-size:1.1rem; width:200px; height:60px; border:2px solid
#df7813; border-radius:20px/50px; background:#fff; color:#df7813; }
#button:hover{ background:#df7813; color:#fff; transition:0.4s ease;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#button{
  font-size:1.1rem;
  width:200px;
  height:60px;
  border:2px solid #df7813;
  border-radius:20px/50px;
  background:#fff;
  color:#df7813;
}
#button:hover{
  background:#df7813;
  color:#fff;
  transition:0.4s ease;
}

全方位的Javascript代码如下:

JavaScript

document.addEventListener(‘DOMContentLoaded’,function(){
document.getElementById(‘button’).addEventListener(‘click’,function(){
if(! (‘Notification’ in window) ){ alert(‘Sorry bro, your browser is not
good enough to display notification’); return; }
Notification.requestPermission(function(permission){ var config = {
body:’Thanks for clicking that button. Hope you liked.’,
icon:’https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI\_HTML5.png‘,
dir:’auto’ }; var notification = new Notification(“Here I am!”,config);
}); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.addEventListener(‘DOMContentLoaded’,function(){
        document.getElementById(‘button’).addEventListener(‘click’,function(){
            if(! (‘Notification’ in window) ){
                alert(‘Sorry bro, your browser is not good enough to display notification’);
                return;
            }    
            Notification.requestPermission(function(permission){
                var config = {
                              body:’Thanks for clicking that button. Hope you liked.’,
                              icon:’https://cdn2.iconfinder.com/data/icons/ios-7-style-metro-ui-icons/512/MetroUI_HTML5.png’,
                              dir:’auto’
                              };
                var notification = new Notification("Here I am!",config);
            });
        });
    });

从那段代码可以看到,借使浏览器不帮忙Notification API,在点击按钮时将会产出警示“兄弟,很对不起。你的浏览器并不可能很好地支撑公告成效”(Sorry
bro, your browser is not good enough to display
notification)。否则,在获得了用户的同意之后,大家自制的通告栏便得以出现在显示器中间啦。

为啥要让用户手动关闭公告栏?

对于这么些题目,大家得以凭借set提姆(Tim)eout函数设置一个时日间隔,使文告栏能定时关闭。

JavaScript

var config = { body:’Today too many guys got eyes on me, you did the
same thing. Thanks’, icon:’icon.png’, dir:’auto’ } var notification =
new Notification(“Here I am!”,config); setTimeout(function(){
notification.close(); //closes the notification },5000);

1
2
3
4
5
6
7
8
9
var config = {
               body:’Today too many guys got eyes on me, you did the same thing. Thanks’,
               icon:’icon.png’,
               dir:’auto’
             }
var notification = new Notification("Here I am!",config);
setTimeout(function(){
    notification.close(); //closes the notification
},5000);

该说的东西就那么些了。假若你意犹未尽,希望越来越入木三分地询问Notification
API,可以阅读以下的页面:

在CatWrite项目中,运用了HTML5的这几个特性开展数量的储存,格外有利,只是方今来说唯有Chrome浏览器对FileSystem API支持的相比较好,所以只能运行在Chrome浏览器中。

在CodePen上查看demo

你可以在CodePen上看看由Prakash
@imprakash)编写的demo

赞 收藏 2
评论

在形成这些作用的时候,查阅了诸多材料,有一些素材是一年前的,但是随着浏览器版本的
变化,一些代码已经老化,在那边一一统计和整理。那里只列举了连串中用到的API,算是
对成就成效的两次梳理。

至于小编:ElvisKang

图片 2

QQ:285273704博客园:@康恺暄邮箱:elviskang@foxmail.com
个人主页
·
我的篇章
·
10

图片 3

申请空间 为了拓展数量的仓储,必须求向浏览器进行申请,如果是恒久存储还会向用户展开问询,唯有同意后才会继续执行。

第一必要求申明想要的权杖。

代码如下:

window.requestFileSystem = window.requestFileSystem ||
window.webkitRequestFileSystem; //文件系统请求标识
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL ||
window.webkitResolveLocalFileSystemURL; //根据URL取得文件的读取权限

得到系统的权位后就足以向浏览器申请空间

代码如下:

window.requestFileSystem(window.PERSISTENT, //persistent(永久) or
temporary(临时)
1024*1024, //1M
onInitFs, //成功后的回调函数
errorHandler); //错误后的回调函数

回调函数

代码如下:

function onInitFs(fs){
fs.root.getDirectory(‘catwrite_documents’, {create: true},
function(dirEntry) {
console.log(‘You have just created the ‘ + dirEntry.name + ‘
directory.’);
}, errorHandler);
}
//错误回调
function errorHandler(err){
var msg = ‘An error occured: ‘;
switch (err.code) {
case FileError.NOT_FOUND_ERR:
msg += ‘File or directory not found’;
break;
case FileError.NOT_READABLE_ERR:
msg += ‘File or directory not readable’;
break;
case FileError.PATH_EXISTS_ERR:
msg += ‘File or directory already exists’;
break;
case FileError.TYPE_MISMATCH_ERR:
msg += ‘Invalid filetype’;
break;
default:
msg += ‘Unknown Error’;
break;
};
console.log(msg + err);
}

如若成功后悔调用OnInitFs回调函数,在其中用了getDirectory方法用来创立一个文本夹,那上边再说。

唯独那是有个问题,那样做的话每一趟加载页面都会申请,这一定不是大家想要的,大家要
的是在有数量的时候就足以读取数据。

判定是或不是申请过空间 之所以大家要求读取浏览器的数目,看看是不是已有囤积。那就用到了另一个API:

代码如下:

void queryUsageAndQuota(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

本条API能够查询当前web的空中处境,若是成功的话就会调用successCallback回调函数
并把已用空间和任何空间作为参数传入方法中。假使战败则调去errorCallback。

代码如下:

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(used, remaining){
if(remaining == “”){
console.log(“未申请空间。”);
}else{
console.log(“已使用空间”+used);
console.log(“全部上空”+remaining);
}
},
errorHandler); </p> <p>

大家得以透过判断remaining参数来判断是或不是有申请空间,假若没有申请,则赶回上一步申请空间。
固然已经有空间的话,则要求取得空间的跟文件,那样才能操作数据。

赢得文件输入 FileSystem使用了出格的文件系统和沙盒情势,在电脑上依旧其余web中是无法访问沙盒中的文件的
,只好用相应的格式去做客。

在浏览器中输入:

?filesystem:http://catcoder.com/persistent/
  

这么可以访问catcoder.com这么些网站在本机永久数据,把persistent换成temporary则是读取临时空间。

接下来大家就能够经过URL和对应API获取文件的输入(Lets you look up the entry
for a file or directory with a local URL)。

代码如下:

void resolveLocalFileSystemURL(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

上面就足以读取本机存储的多寡了

代码如下:

var url = “filesystem:http://” + window.location.host +
“/persistent/catwrite_documents/”;
window.resolveLocalFileSystemURL(url,function(fileEntry){
console.log(fileEntry);
var dirReader = fileEntry.createReader();
var readEntries = function(){
dirReader.readEntries(function(results){
if(!results.length){
create_file_title(“默许文件”, “”);
console.log(“没有公文!”);
}else{
console.log(“读取到” + results.length + “个文件”);
for(var i = 0; i < results.length; i++){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name);
}
}
},errorHandler);
};
readEntries();
},errorHandler);

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图