原文出处,巴黎人手机版workers标准让在Web App上拥
分类:巴黎人-前端

连不上网?大不列颠及苏格兰联合王国卫报的秉性离线页面是如此做的

2015/11/20 · HTML5 · Service Worker, 离线页面

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,禁止转发!
匈牙利(Hungary)语出处:Oliver Ash。招待参加翻译组。

作者们是什么样行使 service worker 来为 theguardian.com 营造叁个自定义的离线页面。

巴黎人手机版 1

theguardian.com 的离线页面。插图:奥利弗 Ash

你正在朝着公司途中的客车里,在手机上开拓了 Guardian 应用。大巴被隧道包围着,不过那么些利用能够健康运转,即便未有互连网连接,你也能获得完整的作用,除了出示的内容大概有一些旧。假若你品味在网址上也如此干,缺憾它完全没有办法加载:

巴黎人手机版 2

安卓版 Chrome 的离线页面

Chrome 中的这么些彩蛋,相当多个人都不晓得》

Chrome 在离线页面上有个藏匿的嬉戏(桌面版上按空格键,手提式有线电电话机版上点击那只恐龙),那有个别能缓慢解决一点您的抑郁。但是大家能够做得越来越好。

Service workers 允许网址笔者拦截自身站点的全部网络乞求,那也就代表大家能够提供周全的离线体验,就好像原生应用同样。在 Guardian 网址,大家如今上线了二个自定义的离线体验效果。当顾客离线的时候,他们会看到三个饱含Guardian 标记的页面,上边带有二个简易的离线提醒,还应该有三个填字游戏,他们得以在等待网络连接的时候玩玩这一个找点乐子。那篇博客解释了咱们是如何创设它的,不过在起来在此之前,你能够先自身研究看。

让大家起头吧

设若你有以下 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奥迪Q5L。借使您的缓存有不一致版本,那么你只需立异版本号即可轻松地扫除缓存。在大意在第 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 访谈网络)

巴黎人手机版 3

假诺您刷新页面,你应该能观看相应的离线页面!

巴黎人手机版 4

假若您只想差不离地质衡量试该功效而不想写任何代码,那么您能够访问作者已开立好的 demo。别的,上述任何代码能够在 Github repo 找到。

自己领会用在此案例中的页面很简短,但您的离线页面则取决于你和谐!假诺你想深切该案例的内容,你可感觉离线页面增添缓存破坏( cache busting),如: 此案例。

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,那你要求先读书这篇文章。

2. Service Worker的支撑情形

Service Worker近日独有Chrome/Firfox/Opera支持:

巴黎人手机版 5

Safari和Edge也在预备协理Service Worker,由于ServiceWorker是Google为主的一项专门的工作,对于生态比较密封的Safari来说也是迫于时势开端企图辅助了,在Safari TP版本,能够观望:

巴黎人手机版 6

在施行功用(Experimental Features)里早已有ServiceWorker的菜单项了,只是就算张开也是不能够用,会唤起您还未曾兑现:

巴黎人手机版 7

但无论是怎么样,至少表明Safari已经希图协助ServiceWorker了。别的还是能够看来在当年二〇一七年4月发表的Safari 11.0.1本子现已支撑WebRTC了,所以Safari依旧一个前行的子女。

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

第四步:创造可用的离线页面

离线页面能够是静态的HTML,一般用于提示客户眼下恳请的页面权且不也许选取。然则,我们能够提供部分能够阅读的页面链接。

Cache API能够在main.js中应用。但是,该API使用Promise,在不援助Promise的浏览器中会退步,全部的JavaScript实行会因而面前碰到震慑。为了防止这种情景,在拜望/js/offlinepage.js的时候我们加多了一段代码来检查当前是或不是在离线景况中:

/js/offlinepage.js 中以版本号为名称保存了多年来的缓存,获取具备U逍客L,删除不是页面包车型地铁U途乐L,将那几个UOdysseyL排序然后将具有缓存的UMuranoL呈今后页面上:

// cache name const CACHE = '::PWAsite', offlineURL = '/offline/', list = document.getElementById('cachedpagelist'); // fetch all caches window.caches.keys() .then(cacheList => { // find caches by and order by most recent cacheList = cacheList .filter(cName => cName.includes(CACHE)) .sort((a, b) => a - b); // open first cache caches.open(cacheList[0]) .then(cache => { // fetch cached pages cache.keys() .then(reqList => { let frag = document.createDocumentFragment(); reqList .map(req => req.url) .filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL)) .sort() .forEach(req => { let li = document.createElement('li'), a = li.appendChild(document.createElement('a')); a.setAttribute('href', req); a.textContent = a.pathname; frag.appendChild(li); }); if (list) list.appendChild(frag); }); }) });

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
42
43
44
45
// cache name
const
  CACHE = '::PWAsite',
  offlineURL = '/offline/',
  list = document.getElementById('cachedpagelist');
// fetch all caches
window.caches.keys()
  .then(cacheList => {
    // find caches by and order by most recent
    cacheList = cacheList
      .filter(cName => cName.includes(CACHE))
      .sort((a, b) => a - b);
    // open first cache
    caches.open(cacheList[0])
      .then(cache => {
        // fetch cached pages
        cache.keys()
          .then(reqList => {
            let frag = document.createDocumentFragment();
            reqList
              .map(req => req.url)
              .filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL))
              .sort()
              .forEach(req => {
                let
                  li = document.createElement('li'),
                  a = li.appendChild(document.createElement('a'));
                  a.setAttribute('href', req);
                  a.textContent = a.pathname;
                  frag.appendChild(li);
              });
            if (list) list.appendChild(frag);
          });
      })
  });

关于小编:Erucy

巴黎人手机版 8

一度的SharePoint喵星技师(暂且还挂着微软MVP的名头),以往的Azure/.Net/MongoDB/Cordova/前端技师,有时写小说 个人主页 · 作者的小说 · 46 ·   

巴黎人手机版 9

有关小编:刘健超-J.c

巴黎人手机版 10

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

巴黎人手机版 11

哪些翻新一个瑟维斯 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);
          }
        })
      );
    })
  );
});

1. 什么是Service Worker

Service Worker是谷歌(Google)倡导的落成PWA(Progressive Web App)的多个重大剧中人物,PWA是为了解决古板Web 应用程式的劣点:

(1)未有桌面入口

(2)比比较小概离线使用

(3)没有Push推送

那Service Worker的具体表现是什么的呢?如下图所示:

巴黎人手机版 12

ServiceWorker是在后台运转的一条服务Worker线程,上海教室小编开了四个标签页,所以显得了多少个Client,然而不管开多少个页面都只有贰个Worker在担当管理。那几个Worker的行事是把一部分能源缓存起来,然后拦截页面包车型客车央浼,先看下缓存Curry有未有,假使部分话就从缓存里取,响应200,反之未有的话就走正规的呼吁。具体来讲,ServiceWorker结合Web App Manifest能完毕以下专业(那也是PWA的检查实验标准):

巴黎人手机版 13

饱含能够离线使用、断网时重回200、能唤起顾客把网址增添二个Logo到桌面上等。

小结

至此,相信你一旦遵照本文一步一步操作下来,你也得以长足把本身的Web应用转为PWA。在转为了PWA后,倘诺有应用满意PWA 模型的前端控件的要求,你能够实施纯前端表格控件SpreadJS,适用于 .NET、Java 和移动端等楼台的报表控件一定不会令你失望的。

初稿链接:

1 赞 1 收藏 评论

巴黎人手机版 14

打赏帮衬自个儿翻译越多好文章,多谢!

巴黎人手机版 15

1 赞 收藏 评论

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

任选一种支付办法

巴黎人手机版 16 巴黎人手机版 17

1 赞 3 收藏 1 评论

改变URL Hash的Bug

在M40版本中留存一个bug,它会让页面在更动hash的时候变成service worker结束工作。

你能够在此地找到越多相关的新闻: 

(2)Service Worker安装和激活

挂号完事后,ServiceWorker就会开展安装,这一年会触发install事件,在install事件之中能够缓存一些能源,如下sw-3.js:

JavaScript

const CACHE_NAME = "fed-cache"; this.addEventListener("install", function(event) { this.skipWaiting(); console.log("install service worker"); // 创立和开荒二个缓存库 caches.open(CACHE_NAME); // 首页 let cacheResources = ["]; event.waitUntil( // 央浼财富并增多到缓存里面去 caches.open(CACHE_NAME).then(cache => { cache.addAll(cacheResources); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const CACHE_NAME = "fed-cache";
this.addEventListener("install", function(event) {
    this.skipWaiting();
    console.log("install service worker");
    // 创建和打开一个缓存库
    caches.open(CACHE_NAME);
    // 首页
    let cacheResources = ["https://fed.renren.com/?launcher=true"];
    event.waitUntil(
        // 请求资源并添加到缓存里面去
        caches.open(CACHE_NAME).then(cache => {
            cache.addAll(cacheResources);
        })
    );
});

通过上边包车型地铁操作,创造和增多了一个缓存库叫fed-cache,如下Chrome调节台所示:

巴黎人手机版 18

ServiceWorker的API基本上都以回到Promise对象制止堵塞,所以要用Promise的写法。下面在安装ServiceWorker的时候就把首页的央浼给缓存起来了。在ServiceWorker的运维条件之中它有三个caches的全局对象,那个是缓存的输入,还也会有七个常用的clients的大局对象,三个client对应一个标签页。

在瑟维斯Worker里面能够选取fetch等API,它和DOM是与世隔膜的,未有windows/document对象,不可能直接操作DOM,无法间接和页面交互,在ServiceWorker里面比很小概获知当前页面展开了、当前页面包车型大巴url是什么样,因为叁个ServiceWorker管理当前张开的多少个标签页,能够因而clients知道全体页面包车型大巴url。还会有可以通过postMessage的法子和主页面相互传送音信和数码,进而做些调控。

install完之后,就能够触发Service Worker的active事件:

JavaScript

this.addEventListener("active", function(event) { console.log("service worker is active"); });

1
2
3
this.addEventListener("active", function(event) {
    console.log("service worker is active");
});

ServiceWorker激活之后就可见监听fetch事件了,大家期望每得到二个财富就把它缓存起来,就毫无像上一篇涉嫌的Manifest供给先生成三个列表。

你恐怕会问,当自家刷新页面包车型客车时候不是又再度注册安装和激活了八个ServiceWorker?纵然又调了贰回注册,但并不会重复登记,它发掘”sw-3.js”那些曾经登记了,就不会再登记了,进而不会触发install和active事件,因为脚下ServiceWorker已经是active状态了。当须要更新ServiceWorker时,如形成”sw-4.js”,恐怕更动sw-3.js的公文内容,就能够重新挂号,新的ServiceWorker会先install然后步入waiting状态,等到重启浏览器时,老的ServiceWorker就能够被替换掉,新的ServiceWorker踏向active状态,假诺不想等到再也启航浏览器可以像上边一样在install里面调skipWaiting:

JavaScript

this.skipWaiting();

1
this.skipWaiting();

URL隐藏

当你的行使正是一个单UCR-VL的应用程序时(比方游戏),我提出您隐敝地址栏。除此而外的情景自身并不提议你遮蔽地址栏。在Manifest中,display: minimal-ui 或者 display: browser对此绝大比相当多景色的话丰富用了。

试试看

你需求三个支持 Service Worker 和 fetch API 的浏览器。截至到本文编写时独有Chrome(手机版和桌面版)同有的时候间支持那二种 API(译者注:Opera 方今也帮衬这多头),但是 Firefox 不慢将在支持了(在天天更新的版本中已经帮忙了),除了那些之外 Safari 之外的保有浏览器也都在探寻。别的,service worker 只可以登记在运用了 HTTPS 的网站上,theguardian.com 已经开端渐渐搬迁到 HTTPS,所以我们只辛亏网址的 HTTPS 部分提供离线体验。就当下来讲,大家选拔了 开采者博客 作为大家用来测量检验的地点。所以只要您是在大家网址的 开荒者博客 部分阅读那篇小说的话,很幸运。

当你利用协理的浏览器访谈我们的 开垦者博客 中的页面包车型地铁时候,一切就图谋稳妥了。断开你的网络连接,然后刷新一下页面。固然您本身没标准尝试的话,能够看一下这段 示范摄像(译者注:需梯子)。

利用 Service worker 创造三个非常简单的离线页面

2016/06/07 · JavaScript · 1 评论 · Service Worker

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁止转发!
斯洛伐克(Slovak)语出处:Dean Hume。应接参预翻译组。

让我们想像以下场景:大家那儿在一辆通往农村的列车的里面,用移动设备瞅着一篇很棒的篇章。与此同期,当您点击“查看越来越多”的链接时,高铁顿然步入了隧道,导致移动装备失去了网络,而 web 页面会突显出类似以下的剧情:

巴黎人手机版 19

那是卓绝让人懊丧的经验!幸运的是,web 开拓者们能透过一些新特色来改良那类的客商体验。我这段时间直接在折腾 ServiceWorkers,它给 web 带来的点不清大概性总能给本人高兴。Service Workers 的大好特质之一是允许你检验互联网央浼的气象,并让您作出相应的响应。

在这篇作品里,作者计划用此个性检查客商的脚下网络连接情状,纵然没连接则赶回叁个至上轻松的离线页面。即使那是三个充裕基础的案例,但它能给您带来启迪,让您精通运营并运转该个性是何其的简要!借使您没通晓过 Service Worker,作者提出你看看此 Github repo,领悟越来越多相关的音信。

在该案例最早前,让我们先简单地看看它的干活流程:

  1. 在客商第3回访谈大家的页面时,我们会设置 ServiceWorker,并向浏览器的缓存增添大家的离线 HTML 页面
  2. 接下来,如若客商策画导航到另二个 web 页面(同八个网址下),但那时已断网,那么大家将赶回已被缓存的离线 HTML 页面
  3. 但是,若是客商企图导航到别的贰个 web 页面,而此时网络已延续,则能照常浏览页面

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事件。

应用 Service Worker 做一个 PWA 离线网页应用

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

原来的文章出处: 人人网FED博客   

在上一篇《自家是怎么着让网址用上HTML5 Manifest》介绍了怎么用Manifest做三个离线网页应用,结果被大范围网上朋友作弄说这一个事物已经被deprecated,移出web规范了,以后被ServiceWorker代替了,不管怎么,Manifest的部分思索还是能借用的。小编又将网址晋级到了ServiceWorker,假如是用Chrome等浏览器就用ServiceWorker做离线缓存,假诺是Safari浏览器就依旧用Manifest,读者能够展开这么些网站感受一下,断网也是能健康展开。

开辟者工具

Chrome浏览器提供了一名目多数的工具来支持您来调治ServiceWorker,日志也会一贯彰显在调节台上。

您最棒利用匿超级模特式来开展支付工作,那样能够消除缓存对开荒的困扰。

最后,Chrome的Lighthouse扩张也可感觉你的渐进式Web应用提供部分勘误新闻。

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:原文出处,巴黎人手机版workers标准让在Web App上拥

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文