禁绝转发

迈向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 带来的成千上万或许性总能给自身欢喜。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

本文由金莎娱乐场官方网站发布于金莎娱乐官方网站,转载请注明出处:禁绝转发

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。