菜单

HTML5 web文告API介绍

2019年1月20日 - 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提姆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地图