创造三个非常轻便的离线页面,利用serviceworker的

作者: 前端技术  发布:2019-10-14

迈向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 时,向缓存增多了离线页面。假若大家将代码分为几小块,可知到前几行代码中,作者为离线页面钦点了缓存版本和UOdysseyL。假如您的缓存有分裂版本,那么你只需立异版本号就能够轻巧地解除缓存。在大要在第 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

本文由金沙澳门官网送注册58发布于前端技术,转载请注明出处:创造三个非常轻便的离线页面,利用serviceworker的

关键词: