您的位置:澳门402永利com > 前端技术 > 选择serviceworker的离线访问形式,成立三个非常轻

选择serviceworker的离线访问形式,成立三个非常轻

发布时间:2019-10-16 05:54编辑:前端技术浏览(135)

    迈向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 时,向缓存增添了离线页面。借使大家将代码分为几小块,可看出前几行代码中,小编为离线页面钦点了缓存版本和UEscortL。假诺您的缓存有例外版本,那么你只需创新版本号就能够简单地解决缓存。在大致在第 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。那是二个轻量的剧本,能让你更轻松地运用离线作用。

    打赏帮忙笔者翻译愈来愈多好小说,谢谢!

    打赏译者

    打赏扶植笔者写出愈来愈多好小说,多谢!

    任选一种支付办法

    图片 7 图片 8

    1 赞 1 收藏 评论

    打赏援救本人翻译越来越多好文章,感激!

    任选一种支付格局

    图片 9 图片 10

    1 赞 3 收藏 1 评论

    至于作者:pangjian

    图片 11

    庞健,金融IT男。 个人主页 · 笔者的稿子 · 5 ·   

    图片 12

    有关作者:刘健超-J.c

    图片 13

    前端,在路上... 个人主页 · 小编的篇章 · 19 ·     

    图片 14

    本文由澳门402永利com发布于前端技术,转载请注明出处:选择serviceworker的离线访问形式,成立三个非常轻

    关键词:

上一篇:前边二个本事总计,小编的前端之路

下一篇:没有了