创制三个极其轻便的离线页面,利用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里面包车型大巴能源。为呼吁过的页面和图片,体现八个私下认可值。当有网络的时候,再重复从服务器更新。
永利澳门游戏网址304 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 页面会彰显出类似以下的内容:

永利澳门游戏网址304 2

那是一定令人失落的经验!幸运的是,web
开垦者们能经过一些新特点来改良这类的顾客体验。作者最近直接在折腾 瑟维斯Workers,它给 web 带来的数不胜数大概性总能给本身欣喜。Service Workers
的精美国特务职业人士人士质之一是允许你检查评定互联网央求的景色,并让您作出相应的响应。

在这篇文章里,小编计划用此特性检查客户的这段日子网络连接情状,假设没连接则赶回三个超级轻易的离线页面。固然那是二个那多少个基础的案例,但它能给您带来启迪,让您知道运行并运营该特性是何等的大约!即使您没精通过
Service Worker,笔者提出您看看此 Github
repo,理解越来越多相关的新闻。

在该案例开端前,让大家先简单地看看它的办事流程:

  1. 在客商第三次访问大家的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增添我们的离线 HTML 页面
  2. 下一场,假诺客户筹算导航到另八个 web
    页面(同多少个网址下),但此时已断网,那么大家将再次回到已被缓存的离线
    HTML 页面
  3. 只是,即使客户打算导航到其它二个 web
    页面,而那时候网络已连接,则能照常浏览页面

离线有缓存情形

永利澳门游戏网址304 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(‘瑟维斯Worker 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
      ]);
    })
  );
});

在地方的代码中,大家在安装 瑟维斯 Worker
时,向缓存增多了离线页面。假若大家将代码分为几小块,可观察前几行代码中,作者为离线页面钦定了缓存版本和URAV4L。假设你的缓存有两样版本,那么您只需立异版本号就能够轻松地铲除缓存。在大约在第
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 访问网络)

永利澳门游戏网址304 4

假若你刷新页面,你应有能见到相应的离线页面!

永利澳门游戏网址304 5

比如您只想大致地质衡量试该作用而不想写任何代码,那么您能够访谈作者已开立好的
demo。其余,上述全体代码能够在
Github repo 找到。

自己知道用在此案例中的页面非常的粗略,但你的离线页面则在于你自个儿!假如您想深切该案例的剧情,你可感觉离线页面增添缓存破坏(
cache busting),如:
此案例。

离线无缓存景况

会显示一个私下认可的页面

永利澳门游戏网址304 6

-EOF-

打赏帮忙本人写出越多好小说,多谢!

打赏笔者

进展阅读

除此以外,还会有多少个很棒的离线功用案例。如:Guardian 创设了三个具备 crossword
puzzle(填字游戏)的离线
web 页面 –
由此,就算等待网络重连时(即已在离线状态下),也能找到一点野趣。我也引用看看
Google Chrome Github
repo,它包罗了大多不一样的
Service Worker 案例 – 个中部分运用案例也在那!

但是,假若您想跳过上述代码,只是想大致地因此二个库来拍卖相关操作,那么作者引入您看看
UpUp。那是一个轻量的台本,能让您更自在地动用离线功能。

打赏支持本人翻译愈来愈多好小说,谢谢!

永利澳门游戏网址304,
打赏译者

发表评论

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