让大家起先吧
只要你有以下 HTML 页面。这即使充足基础,但能给您完全思路。
XHTML
<!DOCTYPE html>
1
|
<!DOCTYPE html>
|
紧接着,让大家在页面里登记 Service Worker,那里仅成立了该对象。向刚刚的
HTML 里加多以下代码。
JavaScript
<script> // Register the service worker // 注册 service worker if
(‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/service-worker.js’).then(function(registration)
{ // Registration was successful // 注册成功 console.log(‘瑟维斯Worker
registration successful with scope: ‘, registration.scope);
}).catch(function(err) { // registration failed 🙁 // 注册退步 🙁
console.log(‘ServiceWorker registration failed: ‘, err); }); }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>
// Register the service worker
// 注册 service worker
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/service-worker.js’).then(function(registration) {
// Registration was successful
// 注册成功
console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
}).catch(function(err) {
// registration failed 🙁
// 注册失败 🙁
console.log(‘ServiceWorker registration failed: ‘, err);
});
}
</script>
|
接下来,大家必要创建 Service Worker 文件并将其取名为‘service-worker.js‘。大家图谋用那些 Service Worker
拦截任何互联网请求,以此检查网络的连接性,并基于检查结果向用户重回最符合的内容。
JavaScript
‘use strict’; var cacheVersion = 1; var currentCache = { offline:
‘offline-cache’ + cacheVersion }; const offlineUrl =
‘offline-page.html’; this.addEventListener(‘install’, event => {
event.waitUntil( caches.open(currentCache.offline).then(function(cache)
{ return cache.addAll([ ‘./img/offline.svg’, offlineUrl ]); }) ); });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
‘use strict’;
var cacheVersion = 1;
var currentCache = {
offline: ‘offline-cache’ + cacheVersion
};
const offlineUrl = ‘offline-page.html’;
this.addEventListener(‘install’, event => {
event.waitUntil(
caches.open(currentCache.offline).then(function(cache) {
return cache.addAll([
‘./img/offline.svg’,
offlineUrl
]);
})
);
});
|
在下面的代码中,大家在安装 Service Worker
时,向缓存加多了离线页面。如若大家将代码分为几小块,可看出前几行代码中,笔者为离线页面钦赐了缓存版本和USportageL。如若您的缓存有例外版本,那么你只需立异版本号就能够轻易地清除缓存。在大约在第一二行代码,作者向这几个离线页面及其能源(如:图片)发出请求。在获得成功的响应后,大家将离线页面和血脉相通财富丰硕到缓存。
目前,离线页面已存进缓存了,大家可在供给的时等候检查索它。在同一个 ServiceWorker 中,大家必要对无网络时再次回到的离线页面加多相应的逻辑代码。
JavaScript
this.add伊芙ntListener(‘fetch’, event => { // request.mode = navigate
isn’t supported in all browsers // request.mode = naivgate
并不曾赢得全数浏览器的协助 // so include a check for Accept: text/html
header. // 因而对 header 的 Accept:text/html 实行核查 if
(event.request.mode === ‘navigate’ || (event.request.method === ‘GET’ &&
event.request.headers.get(‘accept’).includes(‘text/html’))) {
event.respondWith( fetch(event.request.url).catch(error => { //
Return the offline page // 再次回到离线页面 return caches.match(offlineUrl);
}) ); } else{ // Respond with everything else if we can //
重返任何大家能回到的事物 event.respondWith(caches.match(event.request)
.then(function (response) { return response || fetch(event.request); })
); } });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
this.addEventListener(‘fetch’, event => {
// request.mode = navigate isn’t supported in all browsers
// request.mode = naivgate 并没有得到所有浏览器的支持
// so include a check for Accept: text/html header.
// 因此对 header 的 Accept:text/html 进行核实
if (event.request.mode === ‘navigate’ || (event.request.method === ‘GET’ && event.request.headers.get(‘accept’).includes(‘text/html’))) {
event.respondWith(
fetch(event.request.url).catch(error => {
// Return the offline page
// 返回离线页面
return caches.match(offlineUrl);
})
);
}
else{
// Respond with everything else if we can
// 返回任何我们能返回的东西
event.respondWith(caches.match(event.request)
.then(function (response) {
return response || fetch(event.request);
})
);
}
});
|
为了测试该意义,你能够行使 Chrome
内置的开垦者工具。首先,导航到你的页面,然后一旦设置上了 ServiceWorker,就展开 Network 标签并将节流(throttling)改为
Offline。(译者注:若将节流设置为 Offline
没意义,则可通过关闭网络或然经过360康宁警卫禁止 Chrome 访问网络)
即使您刷新页面,你应该能旁观相应的离线页面!
万壹你只想大概地质度量试该意义而不想写任何代码,那么你能够访问笔者已开立好的
demo。其它,上述全数代码能够在
Github repo 找到。
本人掌握用在此案例中的页面很轻易,但您的离线页面则在于你协调!如若你想深刻该案例的始末,你可感到离线页面增加缓存破坏(
cache busting),如:
此案例。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
html5 worker 在服务器后台创建一个线程,加快程序运行。
<script>
var w1 = new Worker('test.js');
w1.postMessage('hi');
w1.onmessage = function(ev){ // 把一部分数据处理交给 html5 worker处理,
alert( ev.data );
};
</script>
<!--
test.js 文件
self.onmessage = function(ev){
self.postMessage(ev.data + '妙味课堂'); // 对数据进行处理,再返回
};
-->
</body>
</html>
打赏帮忙自身翻译越来越多好小说,多谢!
任选一种支付办法
1 赞 3 收藏 1
评论
html5 worker
应用 Service worker 创造七个相当轻松的离线页面
2016/06/07 · JavaScript
· 1 评论 · Service
Worker
本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:Dean
Hume。接待参加翻译组。
让大家想像以下场景:咱们那儿在一辆通往农村的高铁上,用移动器具望着一篇很棒的稿子。与此同时,当你点击“查看越来越多”的链接时,高铁忽然进入了隧道,导致运动道具失去了网络,而
web 页面会显示出类似以下的内容:
那是一定让人衰颓的经验!幸运的是,web
开垦者们能透过一些新特色来革新那类的用户体验。作者近年径直在折腾 ServiceWorkers,它给 web 带来的不胜枚举或者性总能给本人欢乐。Service Workers
的优秀特质之壹是允许你检查实验互连网请求的场合,并让你作出相应的响应。
在这篇文章里,小编希图用此性子检查用户的最近互联网连接意况,如若没连接则赶回二个一级轻便的离线页面。固然那是贰个百般基础的案例,但它能给您带来启发,让你精通运转并运营该特性是何其的简约!假如你没领悟过
Service Worker,作者建议您看看此 Github
repo,驾驭愈多相关的音讯。
在该案例开头前,让大家先轻便地看看它的行事流程:
- 在用户第3次访问大家的页面时,我们会安装 ServiceWorker,并向浏览器的缓存增加大家的离线 HTML 页面
- 接下来,就算用户打算导航到另3个 web
页面(同2个网址下),但这时已断网,那么我们将重返已被缓存的离线
HTML 页面 - 不过,即便用户计划导航到其余1个 web
页面,而此时互联网已连接,则能照常浏览页面
html5 离线存款和储蓄
有关小编:刘健超-J.c
前端,在路上…http://jchehe.github.io
个人主页 ·
作者的稿子 ·
19 ·
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--内容编辑 contenteditable="true"-->
<div contenteditable="true" style="height:200px; width:200px; background:red;">aaaaaaaaaaa</div>
<!--语言输入 谷歌支持 可以录音输入 谷歌支持-->
<input type="text" x-webkit-speech />
<!--桌面提醒 谷歌支持-->
<script>
window.webkitNotifications.requestPermission();
statue = window.webkitNotifications.checkPermission();
var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");
notification.show();
</script>
</body>
</html>
开始展览阅读
其它,还有多少个很棒的离线作用案例。如:Guardian 塑造了贰个负有 crossword
puzzle(填字游戏)的离线
web 页面 –
由此,就算等待互连网重连时(即已在离线状态下),也能找到一点乐趣。小编也引入看看
Google Chrome Github
repo,它蕴涵了广大不一致的
Service Worker 案例 – 在那之中壹部分施用案例也在那!
唯独,假若您想跳过上述代码,只是想大致地经过三个库来管理有关操作,那么本人推荐你看看
UpUp。那是一个轻量的剧本,能让你更自在地行使离线作用。
打赏扶助自身翻译越多好小说,多谢!
<!DOCTYPE html>
<html manifest="cache.manifest"> <!--manifest存储-->
<head lang="en">
<meta charset="UTF-8">
<title>html5 离线存储 小应用</title>
</head>
<body>
1.在服务器如,apache 的httpd.conf 添加
AddType text/cache-manifest .manifest
2.顶部添加 manifest存储
3.编辑 cache.manifest
cache.manifest(文件名)
//以下是文件内容,缓存了一张图片
CACHE MANIFEST
2.png
</body>
</html>
内容编排 语言输入 桌面提醒