必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

workers标准让在Web 必威:App上拥有这些功能成为可

2019-09-19 08:45 来源:未知

(3)fetch资源后cache起来

如下代码,监听fetch事件做些管理:

JavaScript

this.addEventListener("fetch", function(event) { event.respondWith( caches.match(event.request).then(response => { // cache hit if (response) { return response; } return util.fetchPut(event.request.clone()); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
this.addEventListener("fetch", function(event) {
    event.respondWith(
        caches.match(event.request).then(response => {
            // cache hit
            if (response) {
                return response;
            }
            return util.fetchPut(event.request.clone());
        })
    );
});

先调caches.match看一下缓存里面是不是有了,倘使有直接再次回到缓存里的response,不然的话符合规律要求财富并把它内置cache里面。放在缓存里能源的key值是Request对象,在match的时候,供给央求的url和header都一模二样才是同一的财富,能够设定第三个参数ignoreVary:

JavaScript

caches.match(event.request, {ignoreVary: true})

1
caches.match(event.request, {ignoreVary: true})

表示假使央求url一样就觉着是同八个能源。

地点代码的util.fetchPut是如此达成的:

JavaScript

let util = { fetchPut: function (request, callback) { return fetch(request).then(response => { // 跨域的财富直接return if (!response || response.status !== 200 || response.type !== "basic") { return response; } util.putCache(request, response.clone()); typeof callback === "function" && callback(); return response; }); }, putCache: function (request, resource) { // 后台不要缓存,preview链接也休想缓存 if (request.method === "GET" && request.url.indexOf("wp-admin") < 0 && request.url.indexOf("preview_id") < 0) { caches.open(CACHE_NAME).then(cache => { cache.put(request, resource); }); } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let util = {
    fetchPut: function (request, callback) {
        return fetch(request).then(response => {
            // 跨域的资源直接return
            if (!response || response.status !== 200 || response.type !== "basic") {
                return response;
            }
            util.putCache(request, response.clone());
            typeof callback === "function" && callback();
            return response;
        });
    },
    putCache: function (request, resource) {
        // 后台不要缓存,preview链接也不要缓存
        if (request.method === "GET" && request.url.indexOf("wp-admin") < 0
              && request.url.indexOf("preview_id") < 0) {
            caches.open(CACHE_NAME).then(cache => {
                cache.put(request, resource);
            });
        }
    }
};

急需注意的是跨域的财富不可能缓存,response.status会重回0,要是跨域的资源支撑CORubiconS,那么能够把request的mod改成cors。借使央浼退步了,如404要么是晚点等等的,那么也直接重返response让主页面管理,不然的话表明加载成功,把那一个response克隆三个置于cache里面,然后再回去response给主页面线程。注意能放慢存里的能源一般只好是GET,通过POST获取的是不能够缓存的,所以要做个判别(当然你也能够手动把request对象的method改成get),还也可以有把一些私家不愿意缓存的能源也做个判别。

与上述同类一旦顾客展开过二回页面,ServiceWorker就设置好了,他刷新页面或许展开第2个页面包车型地铁时候就可见把央求的能源一一做缓存,包涵图形、CSS、JS等,只要缓存里有了随意顾客在线或然离线都能够健康访谈。那样我们自然会有三个难点,那些缓存空间到底有多大?上一篇大家关系Manifest也终于地点存储,PC端的Chrome是5Mb,其实这一个说法在新本子的Chrome已经不正确了,在Chrome 61本子能够见到本地存款和储蓄的空11月运用境况:

必威 1

中间Cache Storage是指ServiceWorker和Manifest占用的上台湾空中大学小和,上海教室能够看出总的空间尺寸是20GB,差不多是unlimited,所以基本上不用操心缓存会相当不足用。

第一步:使用HTTPS

渐进式Web应用程序必要使用HTTPS连接。固然采纳HTTPS会让您服务器的支出变多,但使用HTTPS能够使你的网址变得更安全,HTTPS网址在谷歌上的排名也会更靠前。

出于Chrome浏览器会默许将localhost以及127.x.x.x地方视为测验地方,所以在本示例中你并无需开启HTTPS。其它,出于调节和测量检验指标,您能够在运维Chrome浏览器的时候使用以下参数来关闭其对网址HTTPS的自己研商:

  • –user-data-dir
  • –unsafety-treat-insecure-origin-as-secure

让大家初阶吧

若是你有以下 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‘。大家策画用这么些 瑟维斯 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奥迪Q5L。借使您的缓存有例外版本,那么你只需创新版本号就可以轻易地清除缓存。在大要在第 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 访谈网络)

必威 2

设若你刷新页面,你应当能收六柱预测应的离线页面!

必威 3

假定您只想大致地质衡量试该意义而不想写任何代码,那么你能够访谈笔者已开立好的 demo。另外,上述总体代码能够在 Github repo 找到。

自身清楚用在此案例中的页面非常粗略,但您的离线页面则取决于你本人!若是你想深刻该案例的剧情,你可以为离线页面增加缓存破坏( cache busting),如: 此案例。

怎么着缓存和重返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只可以被读取二遍,所以我们得将它克隆出来,一份发给浏览器,一份发给缓存。

小结

PWA本事正被普及企业及开垦者们关心,纵然如今各道具的协助合作有待升高,但这个都正在持续的革新发展。作者也信任在不久的以后,PWA手艺会慢慢遍布推广,为大范围公司和客商带来有利。本文和我们一块儿享受了PWA的连锁技艺与实例操作,前边还有大概会就音讯推送、数据同步等效果做进一步追究交换。即使大家在就学PWA的经过中境遇其余标题,招待一同座谈沟通。

行使 瑟维斯 Worker 做多少个 PWA 离线网页应用

2017/10/09 · JavaScript · PWA, Service Worker

原稿出处: 人人网FED博客   

在上一篇《自家是如何让网址用上HTML5 Manifest》介绍了怎么用Manifest做三个离线网页应用,结果被遍布网上好朋友吐槽说这么些事物已经被deprecated,移出web规范了,未来被ServiceWorker代替了,不管什么,Manifest的片段图谋还是得以借用的。小编又将网址晋级到了ServiceWorker,假如是用Chrome等浏览器就用ServiceWorker做离线缓存,借使是Safari浏览器就仍旧用Manifest,读者能够展开那么些网址感受一下,断网也是能平常打开。

URL隐藏

当您的选拔正是贰个单U瑞鹰L的应用程序时(举个例子游戏),我建议您掩盖地址栏。除却的动静本人并不提议你掩盖地址栏。在Manifest中,display: minimal-ui 或者 display: browser对此超过一半意况的话丰盛用了。

开展阅读

另外,还应该有多少个很棒的离线功用案例。如:Guardian 营造了三个享有 crossword puzzle(填字游戏)的离线 web 页面 – 由此,纵然等待互联网重连时(即已在离线状态下),也能找到一点野趣。我也援引看看 Google Chrome Github repo,它满含了广大差异的 Service Worker 案例 – 当中部分用到案例也在那!

然则,假设您想跳过上述代码,只是想大致地经过三个库来拍卖相关操作,那么笔者引入您看看 UpUp。那是一个轻量的脚本,能让您更自在地选取离线效能。

打赏扶助本身翻译更加多好文章,感谢!

打赏译者

哪些注册和装置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是否对你的网站启用了。

必威 4

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

你会发觉这些功效能够很有益地在多个仿照窗口中测量试验你的service worker,那样你能够关闭和再度展开它,而不会潜移默化到您的新窗口。任何创立在模仿窗口中的注册服务和缓存在窗口被关门时都将不复存在。

关于PWA

PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,目标是透过多项新技能,在平安、质量、体验等地点给客商原生应用的心得。并且无需像原生应用那样繁琐的下载、安装、晋级等操作。

这里表达下概念中的“渐进式”,意思是其一web应用还在相连地发展中。因为脚下来说,PWA还尚无成熟到一蹴即至的等级次序,想在平安、质量、体验上直达原生应用的坚守照旧有大多的晋级换代空间的。一方面是构建PWA的基金难题,另一方面是近来各大浏览器、安卓和IOS系统对此PWA的支撑和包容性还也可以有待加强。

本文小编将从网址缓存、http诉求拦截、推送到主屏等功效,结合实例操作,一步步引领我们快速玩转PWA才能。

(1)注册叁个Service Worker

Service Worker对象是在window.navigator里面,如下代码:

JavaScript

window.addEventListener("load", function() { console.log("Will the service worker register?"); navigator.serviceWorker.register('/sw-3.js') .then(function(reg){ console.log("Yes, it did."); }).catch(function(err) { console.log("No it didn't. This happened: ", err) }); });

1
2
3
4
5
6
7
8
9
window.addEventListener("load", function() {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('/sw-3.js')
    .then(function(reg){
        console.log("Yes, it did.");
    }).catch(function(err) {
        console.log("No it didn't. This happened: ", err)
    });
});

在页面load完之后注册,注册的时候传二个js文件给它,这一个js文件正是ServiceWorker的运营条件,假若不可能打响注册的话就能抛极度,如Safari TP固然有其一指标,不过会抛非常无法使用,就可以在catch里面管理。这里有个难点是怎么须要在load事件运维呢?因为你要极度运转一个线程,运营之后您大概还恐怕会让它去加载能源,这一个都以亟需占用CPU和带宽的,大家相应保险页面能健康加载完,然后再开行大家的后台线程,不能够与常规的页面加载产生竞争,那一个在低等移动设备意义相当大。

还会有某个内需留意的是ServiceWorker和Cookie同样是有Path路线的定义的,如若你设定三个cookie假使叫time的path=/page/A,在/page/B那么些页面是无法收获到那几个cookie的,要是设置cookie的path为根目录/,则具有页面都能获得到。类似地,要是注册的时候利用的js路线为/page/sw.js,那么这一个ServiceWorker只可以管理/page路径下的页面和能源,而不可以管理/api路线下的,所以一般把ServiceWorker注册到拔尖目录,如下面代码的”/sw-3.js”,那样这一个ServiceWorker就能够接管页面包车型地铁拥有能源了。

开垦者工具

Chrome浏览器提供了一名目许多的工具来提携您来调整ServiceWorker,日志也会直接呈现在调节台上。

您最棒使用匿超形式来打开付出专业,那样可避防去缓存对开荒的搅拌。

最后,Chrome的Lighthouse强大也足以为你的渐进式Web应用提供一些改良消息。

打赏协助小编翻译愈来愈多好小说,多谢!

任选一种支付格局

必威 5 必威 6

1 赞 3 收藏 1 评论

Non-CO昂科雷S暗中同意不扶助

暗中同意意况下,从第三方UHavalL跨域获得三个财富将会退步,除非对方协助了CO奥迪Q5S。你能够加多五个non-CO中华VS选项到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.');
});

Service Worker

ServiceWorker是PWA的大旨手艺,它亦可为web应用提供离线缓存作用,当然不止如此,上边列举了有的ServiceWorker的表征:

依据HTTPS 遭遇,那是构建PWA的硬性前提。(LAMP意况网站进级HTTPS建设方案)

是贰个独门的 worker 线程,独立于当下网页进程,有谈得来单独的 worker context

可阻拦HTTP央求和响应,可缓存文件,缓存的文书能够在网络离线状态时取到

能向客商端推送音讯

无法直接操作 DOM

异步达成,内部大都是经过 Promise 达成

2. Service Worker的支撑意况

Service Worker近期唯有Chrome/Firfox/Opera扶助:

必威 7

Safari和Edge也在预备扶助Service Worker,由于ServiceWorker是谷歌(Google)主导的一项专门的学业,对于生态相比密封的Safari来讲也是迫于时势初叶筹划扶助了,在Safari TP版本,可以见到:

必威 8

在试验成效(Experimental Features)里已经有ServiceWorker的菜单项了,只是纵然展开也是不可能用,会指示您还尚无兑现:

必威 9

但不管什么,至少注脚Safari已经企图匡助ServiceWorker了。其他还足以看看在二零一六年二〇一七年1月发布的Safari 11.0.1版本现已支撑WebRTC了,所以Safari照旧二个向上的孩子。

Edge也谋算支持,所以Service Worker的前景极度美好。

Activate 事件

其一事件会在service worker被激活时发出。你或许无需以这件事件,不过在演示代码中,大家在该事件爆发时将老的缓存全体清理掉了:

// clear old caches function clearOldCaches() { return caches.keys() .then(keylist => { return Promise.all( keylist .filter(key => key !== CACHE) .map(key => caches.delete(key)) ); }); } // application activated self.addEventListener('activate', event => { console.log('service worker: activate'); // delete old caches event.waitUntil( clearOldCaches() .then(() => self.clients.claim()) ); });

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
// clear old caches
function clearOldCaches() {
  return caches.keys()
    .then(keylist => {
      return Promise.all(
        keylist
          .filter(key => key !== CACHE)
          .map(key => caches.delete(key))
      );
    });
}
// application activated
self.addEventListener('activate', event => {
  console.log('service worker: activate');
    // delete old caches
  event.waitUntil(
    clearOldCaches()
    .then(() => self.clients.claim())
    );
});

注意self.clients.claim()实施时将会把当下service worker作为被激活的worker。

Fetch 事件 该事件将会在互连网初叶央求时发起。该事件管理函数中,大家得以应用respondWith()措施来要挟HTTP的GET央求然后赶回:

  1. 从缓存中取到的能源文件
  2. 尽管第一步失利,财富文件将会从网络中利用Fetch API来获得(和service worker中的fetch事件毫不相关)。获取到的财富将会走入到缓存中。
  3. 举个例子第一步和第二步均退步,将会从缓存中回到精确的财富文件。

// application fetch network data self.addEventListener('fetch', event => { // abandon non-GET requests if (event.request.method !== 'GET') return; let url = event.request.url; event.respondWith( caches.open(CACHE) .then(cache => { return cache.match(event.request) .then(response => { if (response) { // return cached file console.log('cache fetch: ' + url); return response; } // make network request return fetch(event.request) .then(newreq => { console.log('network fetch: ' + url); if (newreq.ok) cache.put(event.request, newreq.clone()); return newreq; }) // app is offline .catch(() => offlineAsset(url)); }); }) ); });

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
40
41
// application fetch network data
self.addEventListener('fetch', event => {
  // abandon non-GET requests
  if (event.request.method !== 'GET') return;
  let url = event.request.url;
  event.respondWith(
    caches.open(CACHE)
      .then(cache => {
        return cache.match(event.request)
          .then(response => {
            if (response) {
              // return cached file
              console.log('cache fetch: ' + url);
              return response;
            }
            // make network request
            return fetch(event.request)
              .then(newreq => {
                console.log('network fetch: ' + url);
                if (newreq.ok) cache.put(event.request, newreq.clone());
                return newreq;
              })
              // app is offline
              .catch(() => offlineAsset(url));
          });
      })
  );
});

offlineAsset(url)办法中采纳了部分helper方法来回到准确的多少:

// 是还是不是为图片地址? let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f); function isImage(url) { return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false); } // return 重返离线能源 function offlineAsset(url) { if (isImage(url)) { // 再次来到图片 return new Response( '<svg role="img" viewBox="0 0 400 300" xmlns=" d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>', { headers: { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'no-store' }} ); } else { // return page return caches.match(offlineURL); } }

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
// 是否为图片地址?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
function isImage(url) {
  
  return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);
  
}
  
  
// return 返回离线资源
function offlineAsset(url) {
  
  if (isImage(url)) {
  
    // 返回图片
    return new Response(
      '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
      { headers: {
        'Content-Type': 'image/svg+xml',
        'Cache-Control': 'no-store'
      }}
    );
  
  }
  else {
  
    // return page
    return caches.match(offlineURL);
  
  }
  
}

offlineAsset()情势检查诉求是或不是为二个图形,然后重回贰个包涵“offline”文字的SVG文件。其余要求将会回来 offlineU奥德赛L 页面。

Chrome开拓者工具中的ServiceWorker部分提供了有关当前页面worker的音讯。在那之中会来得worker中生出的百无一是,还足以强制刷新,也足以让浏览器步入离线情势。

Cache Storage 部分例举了前段时间具有曾经缓存的财富。你能够在缓存须求立异的时候点击refresh按键。

关于笔者:刘健超-J.c

必威 10

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

必威 11

如果设置退步了,未有很优雅的法子赢得通报

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

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

拉长到主屏

PWA补助将web应用在主屏桌面上增加三个神速格局,以有助于顾客快速访谈,同期进级web应用重复访谈的概率。你可能会说,今后运动端上的浏览器效用列表里一般都提供了“加多到桌面”的功用呀,不过PWA与浏览器自带的足够到桌面包车型客车落实况势不一样。

PWA没有供给客户特意去功效列表中利用这些功能按键,而是在顾客访谈web应用时,直接在分界面中唤醒三个增加到主屏桌面包车型的士横幅,从web应用角度来说,那事实上正是前仆后继与消沉的分别。

PWA完结该效率极其轻便,只供给贰个manifest.json文件,文件中顾客能够自定义应用的开发银行页面、模板颜色、Logo等剧情。下边是自己的manifest.json文件设置,咱们可作参谋:

{

"short_name": "蝉知财富站",

"name": "蝉知能源站",

"icons": [

{

"src": "chanzhiicon.png",

"type": "image/png",

"sizes": "48x48"

},

{

"src": "192.png",

"type": "image/png",

"sizes": "192x192"

},

{

"src": "512.png",

"type": "image/png",

"sizes": "512x512"

},

{

"src": "144.png",

"type": "image/png",

"sizes": "144x144"

}

],

"start_url": "/index.html",

"display": "standalone",

"background_color": "#2196F3",

"orientation": "landscape",

"theme_color": "#2196F3"

}

急需提示的是,近来运动端IOS系统的支撑并倒霉,安卓手提式有线电话机上须利用57版本以上的Google浏览器可以支撑该意义,上边是本人在安卓手提式无线电话机上的操作演示:

必威 12增添到主屏

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:workers标准让在Web 必威:App上拥有这些功能成为可