来自 前端知识 2019-09-15 12:08 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

使用serviceworker的离线访谈格局,创制三个特别轻

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

2017/02/08 · JavaScript · PWA

正文小编: 伯乐在线 - pangjian 。未经我许可,禁止转发!
接待参与伯乐在线 专栏撰稿人。

微信小程序来了,能够利用WEB技艺在微信营造叁个有所Native应用体验的选用,产业界极其看好这种样式。可是你们也许不亮堂,Google早就有像样的布置,乃至档期的顺序更加高。这正是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 时,向缓存增加了离线页面。要是大家将代码分为几小块,可观看前几行代码中,我为离线页面钦命了缓存版本和UCR-VL。借使您的缓存有例外版本,那么你只需革新版本号就可以轻巧地消除缓存。在大概在第 12 行代码,小编向那一个离线页面及其财富(如:图片)发出伏乞。在赢得成功的响应后,大家将离线页面和相关财富丰盛到缓存。

现今,离线页面已存进缓存了,我们可在要求的时等候检查索它。在同一个 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 访谈互联网)

澳门金莎娱乐手机版 4

假定您刷新页面,你应该能观察相应的离线页面!

澳门金莎娱乐手机版 5

比方你只想差不离地质衡量试该功能而不想写任何代码,那么您能够访问笔者已成立好的 demo。别的,上述全体代码能够在 Github repo 找到。

自家驾驭用在此案例中的页面很简短,但你的离线页面则在于你协调!假使您想深刻该案例的内容,你可感到离线页面增加缓存破坏( cache busting),如: 此案例。

离线无缓存情况

会显得贰个暗中认可的页面

澳门金莎娱乐手机版 6

-EOF-

澳门金莎娱乐手机版 ,打赏帮助本人写出更加的多好文章,多谢!

打赏笔者

扩充阅读

另外,还大概有多少个很棒的离线功用案例。如:Guardian 创设了一个兼有 crossword puzzle(填字游戏)的离线 web 页面 – 因而,固然等待互联网重连时(即已在离线状态下),也能找到一点野趣。作者也援用看看 Google Chrome Github repo,它含有了累累两样的 Service Worker 案例 – 在那之中有的利用案例也在那!

唯独,假若您想跳过上述代码,只是想差异常少地经过二个库来拍卖相关操作,那么小编引入您看看 UpUp。这是叁个轻量的本子,能让您更自在地选择离线作用。

打赏协理自个儿翻译越多好小说,谢谢!

打赏译者

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:使用serviceworker的离线访谈格局,创制三个特别轻

关键词: