当前位置: 永利皇宫463手机版 > Web前端 > 正文

使用serviceworker的离线访谈形式,创造八个特别轻

时间:2019-09-21 23:07来源:Web前端
迈向PWA!利用serviceworker的离线访问方式 2017/02/08 · JavaScript· PWA 本文笔者: 伯乐在线 -pangjian。未经小编许可,禁止转发! 款待参加伯乐在线 专栏作者。 微信小程序来了,能够利用W

迈向PWA!利用serviceworker的离线访问方式

2017/02/08 · JavaScript · PWA

本文笔者: 伯乐在线 - pangjian 。未经小编许可,禁止转发!
款待参加伯乐在线 专栏作者。

微信小程序来了,能够利用WEB本领在微信塑造一个有着Native应用体验的选用,产业界特别看好这种样式。不过你们大概不理解,谷歌(Google)早就有近似的准备,乃至档案的次序越来越高。那就是PWA(渐进式加强WEB应用)。
PWA有以下二种特色:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线技能)
  • Re-engageable(推送通告技能)

持有这么些特点都以“优雅降级、渐进巩固的”,给帮忙的设施更加好的经验,不协助的设备也不会更差。那就和微信小程序这种不佳设计的常有差异之处。

本博客也在向着PWA的大势迈进,第一步我选用了Offline,也正是离线技术。能够让顾客在并未互联网连接的时候还是可以利用部分服务。这几个力量运用了瑟维斯Worker手艺。

完结思路就是,利用service worker,另起叁个线程,用来监听全部网络诉求,讲曾经呼吁过的数额放入cache,在断网的情事下,直接取用cache里面包车型地铁能源。为呼吁过的页面和图表,体现二个默许值。当有互联网的时候,再重新从服务器更新。
图片 1
代码这里就不贴了,以往也许会特意写一篇来详细介绍ServiceWorker,有意思味的能够直接参照他事他说加以考察源码。
登记起来也不行有益

JavaScript

// ServiceWorker_js (function() { 'use strict'; navigator.serviceWorker.register('/sw.js', {scope: '/'}).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); }); })();

1
2
3
4
5
6
7
8
9
10
11
12
// ServiceWorker_js
(function() {
    'use strict';
    navigator.serviceWorker.register('/sw.js', {scope: '/'}).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);
    });
 
})();

此地须要留神的是,sw.js所在的目录要超过它的支配范围,约等于scope。我把sw.js投身了根目录来调节总体目录。

接下去看看我们的尾声效果呢,你也得以在温馨的浏览器下断网尝试一下。当然有一点浏览器这段日子还不扶助,比方知名的Safari。

应用 Service worker 创造三个特别简单的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁止转发!
立陶宛共和国(Republic of Lithuania)语出处:Dean Hume。迎接参与翻译组。

让大家想像以下场景:大家那儿在一辆通往农村的火车里,用运动器具望着一篇很棒的稿子。与此同不经常候,当你点击“查看越多”的链接时,火车陡然步向了隧道,导致移动设备失去了网络,而 web 页面会彰显出类似以下的内容:

图片 2

那是一对一令人消沉的体会!幸运的是,web 开采者们能透过有些新脾性来革新那类的客商体验。作者多年来一贯在折腾 ServiceWorkers,它给 web 带来的数不完或然性总能给自身欣喜。Service Workers 的杰出特质之一是同意你检查测试网络供给的光景,并让您作出相应的响应。

在那篇小说里,作者准备用此脾气检查顾客的脚下网络连接景况,假使没连接则赶回贰个特级轻易的离线页面。即使那是二个要命基础的案例,但它能给您带来启迪,让您领悟运行并运转该性格是何其的粗略!如若您没通晓过 Service Worker,笔者提议你看看此 Github repo,精晓更加多相关的音讯。

在该案例初始前,让我们先轻易地看看它的干活流程:

  1. 在顾客首次访谈我们的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增添大家的离线 HTML 页面
  2. 然后,假如客商图谋导航到另四个 web 页面(同四个网址下),但那时已断网,那么我们将赶回已被缓存的离线 HTML 页面
  3. 而是,如若客户准备导航到另外二个 web 页面,而此刻网络已三番两次,则能照常浏览页面

离线有缓存情形

图片 3

让大家初叶吧

一旦你有以下 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('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。若是你的缓存有不相同版本,那么您只需革新版本号就可以轻易地解除缓存。在大致在第 12 行代码,笔者向那么些离线页面及其能源(如:图片)发出诉求。在获得成功的响应后,大家将离线页面和相关财富充足到缓存。

方今,离线页面已存进缓存了,大家可在供给的时等候检查索它。在同贰个 ServiceWorker 中,大家须求对无互联网时重返的离线页面增添相应的逻辑代码。

JavaScript

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); }) ); } });

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 访谈网络)

图片 4

假设您刷新页面,你应该能看出相应的离线页面!

图片 5

倘使您只想大概地质度量试该功效而不想写任何代码,那么您能够访问小编已开立好的 demo。别的,上述全部代码能够在 Github repo 找到。

自身通晓用在此案例中的页面很简短,但您的离线页面则取决于你协和!假使你想深远该案例的剧情,你可感到离线页面增加缓存破坏( cache busting),如: 此案例。

离线无缓存意况

会展现三个暗中同意的页面

图片 6

-EOF-

打赏帮助作者写出更加的多好作品,多谢!

打赏笔者

张开阅读

其余,还会有多少个很棒的离线作用案例。如:Guardian 创设了贰个享有 crossword puzzle(填字游戏)的离线 web 页面 – 由此,就算等待互连网重连时(即已在离线状态下),也能找到一点乐趣。笔者也援用看看 Google Chrome Github repo,它包括了非常多见仁见智的 Service Worker 案例 – 在这之中有个别用到案例也在那!

不过,若是你想跳过上述代码,只是想差相当的少地经过一个库来拍卖相关操作,那么自个儿引入您看看 UpUp。那是八个轻量的脚本,能让您更自在地采用离线成效。

打赏协助自身翻译越多好小说,多谢!

打赏译者

打赏帮助本身写出越来越多好小说,多谢!

任选一种支付格局

图片 7 图片 8

1 赞 1 收藏 评论

打赏协理本人翻译越多好作品,谢谢!

任选一种支付格局

图片 9 图片 10

1 赞 3 收藏 1 评论

关于小编:pangjian

图片 11

庞健,金融IT男。 个人主页 · 作者的篇章 · 5 ·   

图片 12

至于我:刘健超-J.c

图片 13

前端,在路上... 个人主页 · 小编的小说 · 19 ·     

图片 14

编辑:Web前端 本文来源:使用serviceworker的离线访谈形式,创造八个特别轻

关键词: