菜单

依照HTML5 FileSystem API的运用介绍

2019年1月17日 - CSS/CSS3

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