澳门金莎娱乐网站利用serviceworker的离线访问模式

时间:2019-10-08 09:27来源:网页制作
迈向PWA!利用serviceworker的离线访谈格局 2017/02/08 · JavaScript· PWA 本文小编: 伯乐在线 -pangjian。未经小编许可,禁绝转发! 招待出席伯乐在线 专辑小编。 微信小程序来了,能够选取W

迈向PWA!利用serviceworker的离线访谈格局

2017/02/08 · JavaScript · PWA

本文小编: 伯乐在线 - pangjian 。未经小编许可,禁绝转发!
招待出席伯乐在线 专辑小编。

微信小程序来了,能够选取WEB技能在微信营造二个有着Native应用经验的施用,产业界非常看好这种情势。不过你们可能不理解,谷歌早就有临近的规划,乃至档案的次序越来越高。那就是PWA(渐进式加强WEB应用)。
PWA有以下两种特色:

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

持有这几个特色都以“高雅降级、渐进增强的”,给支持的配备越来越好的心得,不帮助的器具也不会更差。那就和微信小程序这种蹩脚设计的一贯分化之处。

本博客也在向着PWA的方向迈进,第一步作者选用了Offline,也便是离线本领。能够让顾客在未曾互连网连接的时候还能够选取一些服务。那一个力量采用了ServiceWorker本事。

落到实处思路就是,利用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 翻译,艾凌风 校稿。未经许可,禁绝转发!
塞尔维亚(Република Србија)语出处:Dean Hume。迎接加入翻译组。

让我们想像以下场景:我们那时候在一辆通往农村的火车里,用运动器械看着一篇很棒的小说。与此同有时间,当你点击“查看越来越多”的链接时,火车蓦然步向了隧道,导致运动器械失去了互联网,而 web 页面会显示出类似以下的内容:

澳门金莎娱乐网站 2

那是特别令人寒心的体会!幸运的是,web 开荒者们能由此有个别新特征来创新那类的客户体验。笔者近日间接在折腾 ServiceWorkers,它给 web 带来的成千上万恐怕性总能给本身欣喜。瑟维斯 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

编辑:网页制作 本文来源:澳门金莎娱乐网站利用serviceworker的离线访问模式

关键词:

  • 上一篇:没有了
  • 下一篇:没有了