您的位置:澳门新葡8455最新网站 > Web前端 > 澳门新葡8455最新网站离线访问静态blog网站

澳门新葡8455最新网站离线访问静态blog网站

发布时间:2019-10-10 21:44编辑:Web前端浏览(86)

    使用Service worker实现加速/离线访谈静态blog网址

    2017/02/19 · JavaScript · Service Worker

    初稿出处: Yang Bo   

    近年来非常的火基于Github page和markdown的静态blog,特别切合能力的思维和习贯,针对差异的言语都有一对平安无事的静态blog系统出现,如Jekyll/Ruby,Pelican/Python,Hexo/NodeJs,由于静态内容的风味特别切合做缓存来增长速度页面包车型大巴访问,就使用Service worker来达成加速,结果是除了PageSpeed,CDN那个科学普及的服务器和互联网加快之外,通过客商端达成了更好的探问体验。

    Service Worker入门

    2015/03/26 · JavaScript · Service Worker

    初藳出处: Matt Gaunt   译文出处:[w3ctech

    • 十年踪迹]()   

    原生App具有Web应用平日所不持有的富离线体验,定期的默默无言更新,新闻布告推送等作用。而新的Serviceworkers标准让在Web App上独具这个成效成为恐怕。

    加紧/离线访谈只需三步

    • 首页增加注册代码

    JavaScript

    <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } </script>

    1
    2
    3
    4
    5
    <script>
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
    }
    </script>
    • 复制代码

    将封存到你的网址根目录下

    • 修改不缓存域名列表及离线状态页面

    在你的sw.js中修改

    JavaScript

    const ignoreFetch = [ /https?://cdn.bootcss.com//, /https?://static.duoshuo.com//, /https?://www.google-analytics.com//, /https?://dn-lbstatics.qbox.me//, ];

    1
    2
    3
    4
    5
    6
    const ignoreFetch = [
      /https?://cdn.bootcss.com//,
      /https?://static.duoshuo.com//,
      /https?://www.google-analytics.com//,
      /https?://dn-lbstatics.qbox.me//,
    ];

    打开Chrome Dev Tools->Source,看看自个儿的blog都援引了如何第三方能源,各个加到忽视列表里。

    澳门新葡8455最新网站 1

    在根目录下加多offline.html,在并未网络且缓存中也尚猴时采用,效果如下:

    澳门新葡8455最新网站 2

    在根目录下增多offline.svg,在无互连网时图片财富央求重返该公文。

    Service Worker 是什么?

    四个 service worker 是一段运维在浏览器后台进度里的台本,它独立于当下页面,提供了那四个不必要与web页面交互的功能在网页背后悄悄实践的力量。在以后,基于它能够落成新闻推送,静默更新以至地理围栏等劳务,可是当前它首先要具备的成效是阻挠和拍卖网络乞请,包涵可编制程序的响应缓存管理。

    为啥说那个API是贰个相当棒的API呢?因为它使得开垦者能够支撑蛮好的离线体验,它赋予开垦者完全控制离线数据的力量。

    在service worker建议在此以前,别的贰个提供开垦者离线体验的API叫做App Cache。可是App Cache有个别局限性,比方它能够很轻便地缓和单页应用的主题素材,不过在多页应用上会很麻烦,而Serviceworkers的产出正是为了解决App Cache的痛点。

    下边详细说一下service worker有何必要在乎的地点:

    • 它是JavaScript Worker,所以它不可能直接操作DOM。但是service worker可以经过postMessage与页面之间通讯,把音讯公告给页面,要是须求的话,让页面自个儿去操作DOM。
    • Serviceworker是一个可编制程序的网络代理,允许开采者调控页面上拍卖的互连网央求。
    • 在不被选拔的时候,它会融洽终止,而当它再一次被用到的时候,会被再次激活,所以您无法凭仗于service worker的onfecth和onmessage的管理函数中的全局状态。借令你想要保存一些长久化的新闻,你能够在service worker里使用IndexedDB API。
    • Serviceworker大批量使用promise,所以要是您不打听怎么样是promise,那你要求先读书这篇文章。

    加快效果

    首页加速后,互联网央浼从16降为1,加载时间从2.296s降为0.654s,获得了一晃加载的结果。

    澳门新葡8455最新网站 3

    基于webpagetest

    查看测验结果

    Service Worker的生命周期

    Service worker具有一个一心独立于Web页面包车型地铁生命周期。

    要让二个service worker在您的网址上生效,你需求先在您的网页中登记它。注册二个service worker之后,浏览器会在后台默默运转贰个service worker的装置进度。

    澳门新葡8455最新网站,在装置进度中,浏览器会加载并缓存一些静态能源。假如具有的文件被缓存成功,service worker就设置成功了。假使有其余文件加载或缓存退步,那么安装进度就能够停业,service worker就不能够被激活(也即未能安装成功)。借使发生那样的主题材料,别忧郁,它会在下一次再尝试安装。

    当安装完毕后,service worker的下一步是激活,在此一等级,你还可以进步二个service worker的版本,具体内容大家会在前面讲到。

    在激活之后,service worker将接管全体在本人管辖域范围内的页面,不过若是贰个页面是刚刚注册了service worker,那么它那三遍不会被接管,到下三回加载页面包车型客车时候,service worker才会生效。

    当service worker接管了页面之后,它或许有三种境况:要么被终止以节本省部存款和储蓄器,要么会管理fetch和message事件,那八个事件分别产生于一个互联网恳求出现还是页面上发送了一个新闻。

    下图是一个简化了的service worker初次安装的生命周期:

    澳门新葡8455最新网站 4

    加快/离线原理探寻

    在我们开始写码此前

    从这个类别地址拿到chaches polyfill。

    这个polyfill支持CacheStorate.match,Cache.add和Cache.addAll,而现在Chrome M40实现的Cache API还尚无扶植那几个办法。

    将dist/serviceworker-cache-polyfill.js放到你的网址中,在service worker中通过importScripts加载进来。被service worker加载的本子文件会被活动缓存。

    JavaScript

    importScripts('serviceworker-cache-polyfill.js');

    1
    importScripts('serviceworker-cache-polyfill.js');

    需要HTTPS

    在开采阶段,你能够由此localhost使用service worker,然则只要上线,就须要你的server援救HTTPS。

    你能够透过service worker威迫连接,伪造和过滤响应,特别逆天。纵然你可以约束自身不干坏事,也有人想干坏事。所感到了防御旁人使坏,你不得不在HTTPS的网页上登记service workers,那样大家才方可防备加载service worker的时候不被歹徒篡改。(因为service worker权限相当的大,所以要防守它本人被坏人篡改利用——译者注)

    Github Pages刚刚是HTTPS的,所以它是三个手不释卷的原来的风貌实验田。

    若果你想要让您的server扶持HTTPS,你须要为你的server获得贰个TLS证书。分裂的server安装方法不一样,阅读帮助文书档案并经过Mozilla’s SSL config generator刺探最好实践。

    什么是 Service worker

    澳门新葡8455最新网站 5

    如上图,Service worker 是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当叁个页面注册了三个 Service worker,它就能够登记一多级事件管理器来响应如互连网诉求和消息推送这一个事件。Service worker 能够被用来治本缓存,当响应多个网络恳求时可以配备为回去缓存还是从网络获取。由于Service worker 是依靠事件的,所以它只在管理这么些事件的时候被调入内部存款和储蓄器,不用担忧常驻内部存款和储蓄器占用能源导致系统变慢。

    使用Service Worker

    于今大家有了polyfill,并且化解了HTTPS,让大家看看见底怎么用service worker。

    Service worker生命周期

    澳门新葡8455最新网站 6

    Service worker 为网页增加二个好像于APP的生命周期,它只会响应系统事件,固然浏览器关闭时操作系统也足以提示Service worker,那一点十二分重要,让web app与native app的力量变得近乎了。

    Service worker在Register时会触发Install事件,在Install时得以用来预先获取和缓存应用所需的能源并安装每种文件的缓存计策。

    一旦Service worker处于activated状态,就足以完全调控应用的能源,对网络央求实行检讨,修改互联网须求,从网络上赢得并再次回到内容或许再次回到由已安装的Service worker预报获取并缓存好的能源,以至还是能够更改内容并回到给互联网语法。

    享有的这么些都顾客都以透明的,事实上,贰个安顿突出的Service worker就如二个智能缓存系统,抓好了网络和缓存效用,选用最优办法来响应网络央浼,让使用越来越平静的运维,固然没有网络也没涉及,因为你能够完全调节网络响应。

    哪些注册和安装service worker

    要设置service worker,你需求在您的页面上登记它。这几个手续告诉浏览器你的service worker脚本在何地。

    JavaScript

    if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.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); }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.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);
      });
    }

    地方的代码检查service worker API是或不是可用,假设可用,service worker /sw.js 被注册。

    假若那个service worker已经被注册过,浏览器会自动忽视上边的代码。

    有贰个内需特意表达的是service worker文件的不二秘诀,你势必注意到了在此个事例中,service worker文件被放在此个域的根目录下,那表示service worker和网址同源。换句话说,那么些service work将会接受那个域下的具有fetch事件。假使笔者将service worker文件注册为/example/sw.js,那么,service worker只能收到/example/路径下的fetch事件(例如: /example/page1/, /example/page2/)。

    现行反革命您能够到 chrome://inspect/#service-workers 检查service worker是否对你的网站启用了。

    澳门新葡8455最新网站 7

    当service worker第一版被达成的时候,你也足以在chrome://serviceworker-internals中查看,它很有用,通过它可以最直观地熟悉service worker的生命周期,不过这个功能很快就会被移到chrome://inspect/#service-workers中。

    您会发觉这么些效应能够很平价地在一个模仿窗口中测量试验你的service worker,那样您能够关闭和重复张开它,而不会影响到您的新窗口。任何创设在模仿窗口中的注册服务和缓存在窗口被关门时都将熄灭。

    Service worker的操纵从第三次页面访谈开端

    在第一次加载页面时,全体财富都以从网络载的,Service worker 在第二次加载时不会拿走调控互联网响应,它只会在三番五次访谈页面时起效果。

    澳门新葡8455最新网站 8

    页面首次加载时做到install,并步向idle状态。

    澳门新葡8455最新网站 9

    页面第一回加载时,步入activated状态,希图管理全数的风浪,同时 浏览器会向服务器发送一个异步 央浼来检查Service worker自个儿是还是不是有新的版本,构成了Service worker的更新机制。

    澳门新葡8455最新网站 10

    Service worker管理完不论什么事件后,进入idle状态,最后步向terminated状态财富被放走,当有新的平地风波时有爆发时再也被调用。

    Service Worker的设置步骤

    在页面上做到注册手续之后,让我们把集中力转到service worker的台本里来,在当中间,大家要成功它的设置步骤。

    在最基本的例证中,你必要为install事件定义一个callback,并决定哪些文件你想要缓存。

    JavaScript

    // The files we want to cache var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; // Set the callback for the install step self.addEventListener('install', function(event) { // Perform install steps });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // The files we want to cache
    var urlsToCache = [
      '/',
      '/styles/main.css',
      '/script/main.js'
    ];
     
    // Set the callback for the install step
    self.addEventListener('install', function(event) {
        // Perform install steps
    });

    在大家的install callback中,大家须要进行以下步骤:

    1. 翻开二个缓存
    2. 缓存大家的公文
    3. 决定是不是具备的能源是不是要被缓存

    JavaScript

    var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var CACHE_NAME = 'my-site-cache-v1';
    var urlsToCache = [
      '/',
      '/styles/main.css',
      '/script/main.js'
    ];
     
    self.addEventListener('install', function(event) {
      // Perform install steps
      event.waitUntil(
        caches.open(CACHE_NAME)
          .then(function(cache) {
            console.log('Opened cache');
            return cache.addAll(urlsToCache);
          })
      );
    });

    上边的代码中,大家透过caches.open打开我们内定的cache文件名,然后大家调用cache.addAll并传播我们的文件数组。那是经过体系promise(caches.open 和 cache.addAll)实现的。event.waitUntil得到叁个promise并动用它来收获安装花费的日子以至是不是安装成功。

    设若具备的文本都被缓存成功了,那么service worker就设置成功了。假设别的三个文件下载退步,那么安装步骤就会倒闭。那个法子允许你依赖于你和睦钦赐的全数财富,可是这意味着你须求丰盛稳重地调整如何文件必要在设置步骤中被缓存。钦点了太多的文本的话,就能够追加设置失利率。

    地方只是四个大约的例证,你可以在install事件中举行别的操作照旧乃至忽略install事件。

    特点

    • 浏览器

    Google Chrome,Firefox,Opera以至境内的种种双核浏览器都扶植,可是 safari 不支持,那么在不支持的浏览器里Service worker不工作。

    • https

    网址必得启用https来确定保障使用Service worker页面的安全性,开辟时localhost私下认可认为是高枕而卧的。

    • non-block

    Service worker 中的 Javascript 代码必需是非阻塞的,因为 localStorage 是阻塞性,所以不该在 Service Worker 代码中动用 localStorage。

    • 单独的进行情况

    Service worker运维在融洽的全局情状中,经常也运营在友好单独的线程中。

    • 并未有绑定到特定页面

    service work能操纵它所加载的方方面面范围内的财富。

    • 不可能操作DOM

    跟DOM所处的条件是互为隔断的。

    澳门新葡8455最新网站 11

    • 尚未浏览页面时也足以运维

    接收系统事件,后台运转

    • 事件驱动,要求时运转,不须要时就止住

    按需施行,只在须要时加载到内部存款和储蓄器

    • 可升级

    执行时会异步获取最新的本子

    什么样缓存和重临Request

    您曾经安装了service worker,你未来能够回去您缓存的呼吁了。

    当service worker棉被服装置成功还要客商浏览了另二个页面可能刷新了近日的页面,service worker将上马收取到fetch事件。上面是一个例子:

    JavaScript

    self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    self.addEventListener('fetch', function(event) {
      event.respondWith(
        caches.match(event.request)
          .then(function(response) {
            // Cache hit - return response
            if (response) {
              return response;
            }
     
            return fetch(event.request);
          }
        )
      );
    });

    地点的代码里大家定义了fetch事件,在event.respondWith里,大家传入了三个由caches.match爆发的promise.caches.match 查找request中被service worker缓存命中的response。

    倘诺我们有二个命中的response,我们回来被缓存的值,不然我们回去几个实时从网络诉求fetch的结果。那是三个特轻易的事例,使用具有在install步骤下被缓存的财富。

    万一我们想要增量地缓存新的伸手,大家得以经过拍卖fetch供给的response而且增进它们到缓存中来兑现,举个例子:

    JavaScript

    self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } // IMPORTANT: Clone the request. A request is a stream and // can only be consumed once. Since we are consuming this // once by cache and once by the browser for fetch, we need // to clone the response var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic') { return response; } // IMPORTANT: Clone the response. A response is a stream // and because we want the browser to consume the response // as well as the cache consuming the response, we need // to clone it so we have 2 stream. var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    self.addEventListener('fetch', function(event) {
      event.respondWith(
        caches.match(event.request)
          .then(function(response) {
            // Cache hit - return response
            if (response) {
              return response;
            }
     
            // IMPORTANT: Clone the request. A request is a stream and
            // can only be consumed once. Since we are consuming this
            // once by cache and once by the browser for fetch, we need
            // to clone the response
            var fetchRequest = event.request.clone();
     
            return fetch(fetchRequest).then(
              function(response) {
                // Check if we received a valid response
                if(!response || response.status !== 200 || response.type !== 'basic') {
                  return response;
                }
     
                // IMPORTANT: Clone the response. A response is a stream
                // and because we want the browser to consume the response
                // as well as the cache consuming the response, we need
                // to clone it so we have 2 stream.
                var responseToCache = response.clone();
     
                caches.open(CACHE_NAME)
                  .then(function(cache) {
                    cache.put(event.request, responseToCache);
                  });
     
                return response;
              }
            );
          })
        );
    });

    代码里我们所做政工包蕴:

    1. 足够八个callback到fetch央浼的 .then 方法中
    2. 假如大家获得了一个response,我们进行如下的检讨:
      1. 保障response是立竿见影的
      2. 检查response的图景是不是是200
      3. 保险response的体系是basic,那代表乞请小编是同源的,非同源(即跨域)的伸手也不能够被缓存。
    3. 假诺大家通过了检讨,clone以此央浼。这么做的案由是只要response是一个Stream,那么它的body只好被读取贰次,所以大家得将它克隆出来,一份发给浏览器,一份发给缓存。

    贯彻加速/离线

    怎么样翻新多个Service Worker

    您的service worker总有亟待创新的那一天。当那一天降临的时候,你需求依据如下步骤来更新:

    1. 更新您的service worker的JavaScript文件
      1. 当顾客浏览你的网址,浏览器尝试在后台下载service worker的本子文件。只要服务器上的文件和当地文件有八个字节不一样,它们就被判断为索要立异。
    2. 创新后的service worker将启幕运转,install event被再次触发。
    3. 在这里个时间节点上,当前页不熟悉效的依然是老版本的service worker,新的servicer worker将步向”waiting”状态。
    4. 方今页面被关门之后,老的service worker进程被杀死,新的servicer worker正式生效。
    5. 一旦新的service worker生效,它的activate事件被触发。

    代码更新后,平时要求在activate的callback中实施八个管理cache的操作。因为你会需求破除掉从前旧的数额。我们在activate并非install的时候实行这些操作是因为只要大家在install的时候立刻施行它,那么如故在运营的旧版本的数据就坏了。

    事先大家只行使了三个缓存,叫做my-site-cache-v1,其实我们也可以使用多个缓存的,例如一个给页面使用,一个给blog的内容提交使用。这意味着,在install步骤里,我们可以创建两个缓存,pages-cache-v1和blog-posts-cache-v1,在activite步骤里,我们可以删除旧的my-site-cache-v1。

    上面包车型客车代码能够循环全数的缓存,删除掉全体不在白名单中的缓存。

    JavaScript

    self.addEventListener('activate', function(event) { var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    self.addEventListener('activate', function(event) {
     
      var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1'];
     
      event.waitUntil(
        caches.keys().then(function(cacheNames) {
          return Promise.all(
            cacheNames.map(function(cacheName) {
              if (cacheWhitelist.indexOf(cacheName) === -1) {
                return caches.delete(cacheName);
              }
            })
          );
        })
      );
    });

    Cache

    网页缓存有广大,如HTTP缓存,localStorage,sessionStorage和cacheStorage都足以灵活搭配进行缓存,但操作太繁琐,直接使用越来越高档Service worker –本文的主人公。

    管理边界和填坑

    这一节内容比较新,有许多待定细节。希望这一节异常的快就无需讲了(因为标准会管理这个难点——译者注),可是以往,那么些内容照旧应该被提一下。

    添加Service worker入口

    在web app的首页增多以下代码

    JavaScript

    <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } </script>

    1
    2
    3
    4
    5
    <script>
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
    }
    </script>

    假设浏览器扶植serviceWorker就登记它,不协助依然如常浏览,未有Service worker所提供的滋长作用。

    瑟维斯 worker调节范围:
    简单易行情状下,将sw.js座落网址的根目录下,这样Service worker能够决定网站有着的页面,,同理,假如把sw.js放在/my-app/sw.js那便是说它不得不调控my-app目录下的页面。
    sw.js放在/js/目录呢?越来越好的目录结商谈限制调控呢?
    在登记时内定js地方并设置限定。

    JavaScript

    navigator.serviceWorker.register('/js/sw.js', {scope: '/sw-test/'}).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
    navigator.serviceWorker.register('/js/sw.js', {scope: '/sw-test/'}).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);
        });

    一旦设置退步了,未有很崇高的方法获得通报

    只要三个worker被注册了,可是从未出今后chrome://inspect/#service-workers或chrome://serviceworker-internals,那么很可能因为异常而安装失败了,或者是产生了一个被拒绝的的promise给event.waitUtil。

    要化解那类难题,首先到 chrome://serviceworker-internals检查。打开开发者工具窗口准备调试,然后在你的install event代码中添加debugger;语句。这样,通过断点调试你更容易找到问题。

    Service worker实现

    监听多少个事件:

    JavaScript

    self.addEventListener('install', onInstall); self.addEventListener('fetch', onFetch); self.addEventListener("activate", onActivate);

    1
    2
    3
    self.addEventListener('install', onInstall);
    self.addEventListener('fetch', onFetch);
    self.addEventListener("activate", onActivate);

    fetch()方今仅扶植Service Workers

    fetch马上扶持在页面上应用了,但是近年来的Chrome实现,它还只帮助service worker。cache API也快要在页面上被扶持,但是方今停止,cache也还只可以在service worker中用。

    install

    JavaScript

    ////////// // Install ////////// function onInstall(event) { log('install event in progress.'); event.waitUntil(updateStaticCache()); } function updateStaticCache() { return caches .open(cacheKey('offline')) .then((cache) => { return cache.addAll(offlineResources); }) .then(() => { log('installation complete!'); }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //////////
    // Install
    //////////
    function onInstall(event) {
      log('install event in progress.');
      event.waitUntil(updateStaticCache());
    }
    function updateStaticCache() {
      return caches
        .open(cacheKey('offline'))
        .then((cache) => {
          return cache.addAll(offlineResources);
        })
        .then(() => {
          log('installation complete!');
        });
    }

    install时将有着相符缓存计谋的能源开展缓存。

    fetch()的暗中认可参数

    当您使用fetch,缺省级地区级,央求不会带上cookies等证据,要想带上的话,供给:

    JavaScript

    fetch(url, { credentials: 'include' })

    1
    2
    3
    fetch(url, {
      credentials: 'include'
    })

    如此设计是有理由的,它比XH福特Explorer的在同源下暗中认可发送凭据,但跨域时吐弃凭据的平整要来得好。fetch的一坐一起更像另外的CORS央求,比方<img crossorigin>,它默认不发送cookies,除非你指定了<img crossorigin="use-credentials">.。

    fetch

    JavaScript

    //////// // Fetch //////// function onFetch(event) { const request = event.request; if (shouldAlwaysFetch(request)) { event.respondWith(networkedOrOffline(request)); return; } if (shouldFetchAndCache(request)) { event.respondWith(networkedOrCached(request)); return; } event.respondWith(cachedOrNetworked(request)); } onFetch做为浏览器网络央求的代办,根据供给回到网络或缓存内容,假诺得到了网络内容,重临网络伏乞时同时展开缓存操作。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ////////
    // Fetch
    ////////
    function onFetch(event) {
      const request = event.request;
      if (shouldAlwaysFetch(request)) {
        event.respondWith(networkedOrOffline(request));
        return;
      }
      if (shouldFetchAndCache(request)) {
        event.respondWith(networkedOrCached(request));
        return;
      }
      event.respondWith(cachedOrNetworked(request));
    }
    onFetch做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

    Non-CO途观S暗中同意不帮衬

    暗中认可情状下,从第三方USportageL跨域获得三个能源将会失利,除非对方扶助了COHighlanderS。你可以拉长一个non-COENCORES选项到Request去制止失利。代价是如此做会回到二个“不透明”的response,意味着你不可能获知这一个乞求终归是成功了如故败诉了。

    JavaScript

    cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) { return new Request(urlToPrefetch, { mode: 'no-cors' }); })).then(function() { console.log('All resources have been fetched and cached.'); });

    1
    2
    3
    4
    5
    cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
      return new Request(urlToPrefetch, { mode: 'no-cors' });
    })).then(function() {
      console.log('All resources have been fetched and cached.');
    });

    activate

    JavaScript

    /////////// // Activate /////////// function onActivate(event) { log('activate event in progress.'); event.waitUntil(removeOldCache()); } function removeOldCache() { return caches .keys() .then((keys) => { return Promise.all( // We return a promise that settles when all outdated caches are deleted. keys .filter((key) => { return !key.startsWith(version); // Filter by keys that don't start with the latest version prefix. }) .map((key) => { return caches.delete(key); // Return a promise that's fulfilled when each outdated cache is deleted. }) ); }) .then(() => { log('removeOldCache completed.'); }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    ///////////
    // Activate
    ///////////
    function onActivate(event) {
      log('activate event in progress.');
      event.waitUntil(removeOldCache());
    }
    function removeOldCache() {
      return caches
        .keys()
        .then((keys) => {
          return Promise.all( // We return a promise that settles when all outdated caches are deleted.
            keys
             .filter((key) => {
               return !key.startsWith(version); // Filter by keys that don't start with the latest version prefix.
             })
             .map((key) => {
               return caches.delete(key); // Return a promise that's fulfilled when each outdated cache is deleted.
             })
          );
        })
        .then(() => {
          log('removeOldCache completed.');
        });
    }

    在activate时依据version值来删除过期的缓存。

    fetch()不遵从30x重定向标准

    不幸,重定向在fetch()中不会被触发,那是如今版本的bug;

    管理 Service worker

    管理响应式图片

    img的srcset属性可能<picture>标签会根据情况从浏览器或者网络上选择最合适尺寸的图片。

    在service worker中,你想要在install步骤缓存三个图形,你有以下两种采用:

    1. 设置具备的<picture>元素或者将被请求的srcset属性。
    2. 设置单一的low-res版本图片
    3. 设置单一的high-res版本图片

    比较好的方案是2或3,因为如若把具备的图样都给下载下来存着有一点浪费内存。

    倘诺你将low-res版本在install的时候缓存了,然后在页面加载的时候你想要尝试从网络上下载high-res的版本,可是倘若high-res版本下载退步以来,就依旧用low-res版本。这些主张很好也值得去做,但是有一个主题材料:

    举例我们有上边三种图片:

    Screen Density Width Height
    1x 400 400
    2x 800 800

    HTML代码如下:

    JavaScript

    <img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

    1
    <img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

    如果大家在一个2x的显得格局下,浏览器会下载image-2x.png,如若我们离线,你能够读取在此以前缓存并重回image-src.png替代,假诺在此之前它曾经被缓存过。固然如此,由于前日的情势是2x,浏览器会把400X400的图样展现有200X200,要幸免那些主题材料即就要图纸的样式上设置宽高。

    JavaScript

    <img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" style="width:400px; height: 400px;" />

    1
    2
    <img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x"
    style="width:400px; height: 400px;" />

    澳门新葡8455最新网站 12

    <picture>标签情况更复杂一些,难度取决于你是如何创建和使用的,但是可以通过与srcset类似的思路去解决。

    特定网址

    1. Google Chrome

    Developer Tools->Application->Service Workers

    澳门新葡8455最新网站 13

    在那处还会有三个非常实用的复选框:

    • Offline

    宪章断网状态

    • Update on reload
      加载时更新
    • Bypass for network
      一连利用互联网内容
    1. Firefox

    只有在Settings里有二个得以在HTTP遇到中央银行使Service worker的选项,适应于调节和测量试验,未有单独网址下的Service worker管理。

    澳门新葡8455最新网站 14

    1. Opera及此外双核浏览器同Google Chrome
      万一见到八个一律范围内的四个Service worker,说明Service woker更新后,而原有Service worker还平昔不被terminated。

    改变URL Hash的Bug

    在M40版本中留存叁个bug,它会让页面在转移hash的时候变成service worker结束职业。

    你能够在此找到越多相关的音讯: 

    浏览器全局

    寻访您的浏览器里都有如何Service worker已经存在了

    1. Google Chrome

    在地址栏里输入:

    JavaScript

    chrome://serviceworker-internals/

    1
    chrome://serviceworker-internals/

    能够见到已经有贰十四个Serviceworker了,在此边能够手动Start让它专门的工作,也得以Unregister卸载掉。

    澳门新葡8455最新网站 15

    1. Firefox

    有二种方法步向Service worker管住分界面来手动Start或unregister。

    • 菜单栏,Tool->Web Developer->Service workers
    • 地点栏中输入

    JavaScript

    about:debugging#workers

    1
    about:debugging#workers

    澳门新葡8455最新网站 16

    1. Opera及别的双核浏览器同谷歌(Google) Chrome

    越来越多内容

    此处有一点连锁的文书档案能够参见:

    更多

    TODO:

    • Service workers的翻新要求手动编辑version,每一遍宣布新小说时须要编写制定。
    • 使用AMP让页面渲染速度直达最高。

    获取救助

    假使你相逢麻烦,请在Stackoverflow上发帖询问,使用‘service-worker’标签,以便于大家当下跟进和不择花招扶植您解决难题。

    赞 2 收藏 评论

    澳门新葡8455最新网站 17

    Ref links

    Service Worker Cookbook

    Is service worker ready?

    Chrome service worker status page

    Firefox service worker status page

    MS Edge service worker status page

    WebKit service worker status page

    1 赞 2 收藏 评论

    澳门新葡8455最新网站 18

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:澳门新葡8455最新网站离线访问静态blog网站

    关键词:

上一篇:没有了

下一篇:没有了