菜单

html5 离线存款和储蓄 worker

2019年4月8日 - JavaScript

动用 瑟维斯 worker 成立二个分外简单的离线页面

2016/06/07 · JavaScript
· 1 评论 · Service
Worker

本文由 伯乐在线
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:Dean
Hume
。欢迎出席翻译组

让大家想像以下情况:大家这时候在一辆通往农村的列车上,用运动设备望着一篇很棒的篇章。与此同时,当您点击“查看更加多”的链接时,火车忽然进入了隧道,导致移动设备失去了互联网,而
web 页面会展现出类似以下的剧情:

manbetx网页手机登录版 1

那是一定令人懊丧的经验!幸运的是,web
开发者们能透过某些新特色来改正那类的用户体验。小编近年径直在折腾 ServiceWorkers,它给 web 带来的无尽或许性总能给本身惊喜。Service Workers
的杰出特质之一是同意你检查实验网络请求的景观,并让你作出相应的响应。

在这篇小说里,笔者打算用此性子检查用户的当前互连网连接境况,假设没连接则赶回2个最棒不难的离线页面。尽管这是三个老大基础的案例,但它能给你带来启迪,让您精晓运营并运营该性格是多么的简短!要是您没驾驭过
Service Worker,小编建议您看看此 Github
repo
,领悟越多相关的音讯。

manbetx网页手机登录版,在该案例初叶前,让大家先简单地看看它的办事流程:

  1. 在用户第3次访问大家的页面时,大家会安装 ServiceWorker,并向浏览器的缓存添加大家的离线 HTML 页面
  2. 然后,假诺用户打算导航到另1个 web
    页面(同二个网址下),但那时已断网,那么大家将回来已被缓存的离线
    HTML 页面
  3. 可是,借使用户打算导航到其余二个 web
    页面,而此时网络已连接,则能照常浏览页面

html伍 离线存款和储蓄

让我们开首吧

借使你有以下 HTML 页面。那尽管那些基础,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

进而,让我们在页面里登记 瑟维斯 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(‘ServiceWorker
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
时,向缓存添加了离线页面。假诺大家将代码分为几小块,可看出前几行代码中,小编为离线页面内定了缓存版本和U安德拉L。假诺你的缓存有例外版本,那么您只需立异版本号即可简单地解除缓存。在大致在第1贰行代码,作者向这些离线页面及其财富(如:图片)发出请求。在取得成功的响应后,我们将离线页面和血脉相通财富丰硕到缓存。

将来,离线页面已存进缓存了,我们可在急需的时等候检查索它。在同1个 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
内置的开发者工具。首先,导航到你的页面,然后假诺设置上了 瑟维斯Worker,就打开 Network 标签并将节流(throttling)改为
Offline。(译者注:若将节流设置为 Offline
没效果,则可通过关闭互连网大概经过360康宁警卫禁止 Chrome 访问互联网)

manbetx网页手机登录版 2

借使你刷新页面,你应该能收占星应的离线页面!

manbetx网页手机登录版 3

1旦你只想大约地质度量试该意义而不想写任何代码,那么您能够访问我已创立好的
demo。其余,上述全体代码能够在
Github repo 找到。

本身领悟用在此案例中的页面相当粗略,但你的离线页面则在于你本人!借使您想深入该案例的剧情,你能够为离线页面添加缓存破坏(
cache busting),如:
此案例

<!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>

进行阅读

别的,还有几个很棒的离线成效案例。如:Guardian 营造了二个具备 crossword
puzzle
(填字游戏)的离线
web 页面 –
因而,即使等待互联网重连时(即已在离线状态下),也能找到一点乐趣。作者也援引看看
Google Chrome Github
repo
,它含有了很多不等的
Service Worker 案例 – 在那之中有的施用案例也在那!

只是,假设您想跳过上述代码,只是想大致地通过三个库来拍卖相关操作,那么小编引入您看看
UpUp。那是一个轻量的剧本,能让您更自在地应用离线作用。

打赏帮衬小编翻译越多好小说,多谢!


打赏译者

 html5 worker

打赏补助作者翻译更加多好小说,多谢!

任选一种支付办法

manbetx网页手机登录版 4
manbetx网页手机登录版 5

1 赞 3 收藏 1
评论

<!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>

有关小编:刘健超-J.c

manbetx网页手机登录版 6

前端,在路上…http://jchehe.github.io
个人主页
·
作者的篇章
·
19
·
    

manbetx网页手机登录版 7

 内容编排 语言输入 桌面提示

<!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>

 

相关文章

发表评论

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

网站地图xml地图