菜单

HTML5 web文告API介绍

2019年1月22日 - Html/Html5

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地图