开创多个特别轻便的离线页面,利用serviceworker的

作者: 前端应用  发布:2019-10-06

迈向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 带来的数不完恐怕性总能给自身欣喜。瑟维斯 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

本文由贝博体育app发布于前端应用,转载请注明出处:开创多个特别轻便的离线页面,利用serviceworker的

关键词:

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