您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版:worker完成加速,10秒钟玩转

1010cc时时彩经典版:worker完成加速,10秒钟玩转

发布时间:2019-12-01 16:10编辑:1010cc时时彩客户端浏览(146)

    迈向PWA!利用serviceworker的离线访谈情势

    2017/02/08 · JavaScript · PWA

    正文小编: 伯乐在线 - pangjian 。未经笔者许可,禁绝转发!
    接待参与伯乐在线 专栏审核人。

    Wechat小程序来了,能够使用WEB技艺在微信塑造一个具备Native应用体验的应用,产业界极度看好这种样式。不过你们可能不知道,Google早本来就有周边的安顿性,以至档案的次序更加高。这就是PWA(渐进式巩固WEB应用)。
    PWA有以下两种特性:

    • Installablity(可安装性)
    • App Shell
    • Offline(离线技能)
    • Re-engageable(推送布告手艺)

    具有那么些特征都以“文雅降级、渐进增强的”,给协助的设施更加好的体会,不援救的设备也不会更差。那就和Wechat小程序这种不良设计的有史以来分化之处。

    本博客也在向着PWA的可行性迈进,第一步笔者选用了Offline,约等于离线技能。能够让客商在从来不互联网连接的时候照旧能够动用一些服务。这一个力量使用了ServiceWorker技能。

    兑现思路正是,利用service worker,另起一个线程,用来监听全部互联网央浼,讲曾经呼吁过的数量归入cache,在断网的情景下,直接取用cache里面包车型大巴能源。为倡议过的页面和图纸,展示二个暗许值。当有网络的时候,再另行从服务器更新。
    1010cc时时彩经典版 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 创造叁个特别轻易的离线页面

    1010cc时时彩经典版,2016/06/07 · JavaScript · 1 评论 · Service Worker

    本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁绝转发!
    意大利语出处:Dean Hume。招待参加翻译组。

    让大家想像以下意况:大家那儿在意气风发辆通往乡村的列车的里面,用移动设备望着大器晚成篇很棒的文章。与此同不平时间,当您点击“查看更加多”的链接时,火车忽然进入了隧道,招致运动器材失去了互连网,而 web 页面会显示出相仿以下的内容:

    1010cc时时彩经典版 2

    那是一定令人颓丧的体验!幸运的是,web 开荒者们能由此一些新特色来改进那类的顾客体验。作者近年径直在折腾 ServiceWorkers,它给 web 带给的点不清恐怕性总能给小编惊奇。Service Workers 的非凡特质之一是允许你检查评定网络诉求的现象,并让您作出相应的响应。

    在这里篇小说里,笔者筹算用此性子检查客户的脚下互联网连接境况,如若没连接则赶回一个特级轻松的离线页面。尽管那是一个要命根基的案例,但它能给你带给启示,让您明白运行并运转该本性是何其的简便!假使你没了解过 Service Worker,笔者提出您看看此 Github repo,通晓更加多相关的消息。

    在本案例初叶前,让大家先轻巧地拜谒它的做事流程:

    1. 在客商第1回访谈咱们的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增加大家的离线 HTML 页面
    2. 接下来,若是客商希图导航到另二个 web 页面(同一个网址下),但当时已断网,那么大家将赶回已被缓存的离线 HTML 页面
    3. 但是,假诺顾客希图导航到此外贰个 web 页面,而此刻网络已连续,则能照常浏览页面

    关于PWA

    PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,目标是透过多项新本领,在平安、品质、体验等地点给客商原生应用的经历。何况不需求像原生应用这样繁杂的下载、安装、进级等操作。

    此间解释下概念中的“渐进式”,意思是以此web应用还在不断地向上中。因为方今来说,PWA还一贯不成熟到一挥而就的水准,想在新余、质量、体验上达到规定的标准原生应用的效果依然有许多的升迁空间的。一方面是营造PWA的基金难点,另一面是现阶段各大浏览器、安卓和IOS系统对于PWA的匡助和宽容性还或者有待进步。

    正文笔者将从网站缓存、http央求拦截、推送到主屏等功能,结合实例操作,一步步引领大家飞速玩转PWA本领。

    应用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上有所那个成效成为或者。

    离线有缓存景况

    1010cc时时彩经典版 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陆风X8L。假设你的缓存有分化版本,那么您只需创新版本号就能够简单地解除缓存。在大意在第 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'卡塔尔(قطر‎卡塔尔(قطر‎卡塔尔(英语:State of Qatar) { event.respondWith( fetch(event.request.url卡塔尔国.catch(error => { // Return the offline page // 重临离线页面 return caches.match(offlineUrl卡塔尔(英语:State of Qatar); }卡塔尔国 卡塔尔; } else{ // Respond with everything else if we can // 再次来到任何我们能重回的事物 event.respondWith(caches.match(event.request卡塔尔(英语:State of Qatar).then(function (response卡塔尔(英语:State of Qatar) { 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 访谈互联网)

    1010cc时时彩经典版 4

    借让你刷新页面,你应当能看见相应的离线页面!

    1010cc时时彩经典版 5

    借令你只想大约地质度量试该意义而不想写任何代码,那么你能够访谈笔者已开立好的 demo。此外,上述任何代码能够在 Github repo 找到。

    自家清楚用在那案例中的页面很简短,但您的离线页面则在于你协和!即使你想深入该案例的内容,你可感到离线页面添加缓存破坏( cache busting),如: 此案例。

    Service Worker

    ServiceWorker是PWA的大旨本领,它亦可为web应用提供离线缓存功效,当然不止如此,下边列举了生龙活虎部分ServiceWorker的风味:

    依据HTTPS 意况,那是创设PWA的硬性前提。(LAMP情形网址晋级HTTPS应用方案)

    是四个独立的 worker 线程,独立于当下网页进度,有和煦独立的 worker context

    可阻止HTTP央求和响应,可缓存文件,缓存的文本能够在互连网离线状态时取到

    能向客商端推送音信

    无法一贯操作 DOM

    异步完毕,内部大都以透过 Promise 完结

    加快/离线访谈只需三步

    • 首页增加注册代码

    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都援用了哪些第三方能源,每一个加到忽视列表里。

    1010cc时时彩经典版 6

    在根目录下加多offline.html,在还没网络且缓存中也远非时行使,效果如下:

    1010cc时时彩经典版 7

    在根目录下增添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,那您需求先读书这篇文章。

    离线无缓存意况

    会呈现四个私下认可的页面

    1010cc时时彩经典版 8

    -EOF-

    打赏扶植我写出更加多好作品,感激!

    打赏小编

    举行阅读

    其它,还也许有多少个很棒的离线功用案例。如:Guardian 构建了二个有着 crossword puzzle(填字游戏)的离线 web 页面 – 因而,即便等待网络重连时(即已在离线状态下),也能找到一点野趣。笔者也推荐看看 Google Chrome Github repo,它包括了众多不等的 瑟维斯 Worker 案例 – 此中一些应用案例也在这里!

    但是,假设您想跳过上述代码,只是想差不离地通过一个库来管理有关操作,那么作者引入你看看 UpUp。这是多少个轻量的本子,能令你更轻易地使用离线功效。

    打赏扶植作者翻译越来越多好文章,多谢!

    打赏译者

    Service Worker生命周期

    serviceworker的利用流程能够轻易计算为注册--安装--激活。

    登记其实便是告诉浏览器serviceworkerJS文件寄放在如何岗位,然后浏览器下载、拆解分析、实践该公文,进而运转安装。这里本身创设三个app.js文件,注册代码如下,将该公文在网址的head标签里引进。

    if ('serviceWorker' in navigator) {

    window.addEventListener('load', function () {

    navigator.serviceWorker.register

    .then(function (registration) {

    // 注册成功

    console.log('ServiceWorker registration successful with scope: ', registration.scope);

    })

    .catch(function {

    // 注册失利:(

    console.log('ServiceWorker registration failed: ', err);

    });

    });

    }

    当推行serviceworkerJS文件时,首先触及的是install事件,举办安装。安装的进程正是将钦赐的一些静态财富开展离线缓存。上边是自身的sw.js文件中的安装代码:

    var CACHE_VERSION = 'sw_v8';

    var CACHE_FILES = [

    '/js/jquery/min.js',

    '/js/zui/min.js',

    '/js/chanzhi.js',

    ];

    self.addEventListener('install', function {

    event.waitUntil(

    caches.open(CACHE_VERSION)

    .then(cache => cache.addAll(CACHE_FILES)

    ));

    });

    当安装成功后,serviceworker就能激活,那个时候就能够管理 activate 事件回调 (提供了履新缓存计策的火候卡塔尔(قطر‎。并得以拍卖成效性的风云 fetch 、sync 、push 。

    self.addEventListener('activate', function {

    event.waitUntil(

    caches.keys().then(function{

    return Promise.all(keys.map(function{

    if(key !== CACHE_VERSION){

    return caches.delete;

    }

    }));

    })

    );

    });

    增长速度效果

    首页加快后,互连网乞求从16降为1,加载时间从2.296s降为0.654s,得到了一下加载的结果。

    1010cc时时彩经典版 9

    基于webpagetest

    查看测量试验结果

    Service Worker的生命周期

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

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

    在设置进程中,浏览器会加载并缓存一些静态财富。要是全体的文书被缓存成功,service worker就安装成功了。倘使有任何公文加载或缓存退步,那么安装进程就能够退步,service worker就无法被激活(也即未能安装成功)。即使发生这么的难点,别忧虑,它会在后一次再品尝安装。

    当安装到位后,service worker的下一步是激活,在此意气风发品级,你仍是可以够升官一个service worker的本子,具体内容大家会在背后讲到。

    在激活之后,service worker将接管全部在和睦管辖域范围内的页面,但是假若三个页面是刚刚注册了service worker,那么它那一遍不会被接管,到下一遍加载页面包车型地铁时候,service worker才会生效。

    当service worker接管了页面之后,它大概有三种情景:要么被停止以节省外部存款和储蓄器,要么会管理fetch和message事件,那七个事件分别发出于三个互联网央求现身依旧页面上发送了一个音信。

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

    1010cc时时彩经典版 10

    打赏支持自个儿写出越多好随笔,多谢!

    任选生机勃勃种支付办法

    1010cc时时彩经典版 11 1010cc时时彩经典版 12

    1 赞 1 收藏 评论

    打赏扶助作者翻译越来越多好小说,感激!

    任选风度翩翩种支付办法

    1010cc时时彩经典版 13 1010cc时时彩经典版 14

    1 赞 3 收藏 1 评论

    serviceworker的缓存效率

    安装时,serviceworker将我们钦定的静态能源开展缓存,你恐怕会问,倘若是实时的动态内容如何做,大家相当小概预先将装有的文本能源提前线指挥部定好,让serviceworker缓存。这就要涉及serviceworker的阻拦HTTP央求响应的特点了。

    serviceworker拦截http央浼,首先去反省须求的能源在缓存中是否存在,假使存在,则一向从缓存中调用,并且尽管是无网络状态下,serviceworker也能调用缓存中的财富。如若缓存中一贯不央浼的能源,则透过互联网去服务器上寻觅,何况在找到并响适当时候,serviceworker会将其存入缓存中,以备后一次再诉求时直接从缓存中调用。

    1010cc时时彩经典版 15serviceworker缓存流程

    serviceworker文件中fetch事件代码如下:

    self.addEventListener('fetch', function {

    event.respondWith(

    caches.match(event.request).then(function{

    if{

    return response;

    }

    var requestToCache = event.request.clone();

    return fetch(requestToCache).then(

    function{

    if(!response || response.status !== 200){

    return response;

    }

    var responseToCache = response.clone();

    caches.open(CACHE_VERSION)

    .then(function{

    cache.put(requestToCache, responseToCache);

    });

    return response;

    }

    );

    })

    );

    });

    在网站前台通过浏览器开荒者工具,大家得以看下从缓存中调用财富的魔法:

    1010cc时时彩经典版 16serviceworker缓存调用1010cc时时彩经典版 17缓存文件

    本人这里操作演示用的是Google浏览器,上边是各大浏览器对于serviceworker的帮衬意况:

    1010cc时时彩经典版 18serviceworker浏览器协理景况

    增长速度/离线原理研究

    在我们初叶写码以前

    从这个品类地址拿到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打探最好实行。

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版:worker完成加速,10秒钟玩转

    关键词:

上一篇:没有了

下一篇:没有了