连不上网,worker实现加速

应用 Service worker 创设二个格外简单的离线页面

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

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:Dean
Hume。欢迎加入翻译组。

让大家想像以下情况:我们那时候在一辆通往农村的列车上,用运动装备看着一篇很棒的稿子。与此同时,当你点击“查看更加多”的链接时,高铁忽然进入了隧道,导致移动设备失去了互联网,而
web 页面会显示出类似以下的始末:

皇家赌场手机版 1

那是一定令人寒心的体验!幸运的是,web
开发者们能通过有个别新特征来创新那类的用户体验。作者近年径直在折腾 ServiceWorkers,它给 web 带来的无尽只怕性总能给作者惊喜。Service Workers
的优异特质之一是允许你检查和测试网络请求的场所,并让您作出相应的响应。

在那篇小说里,笔者打算用此性情检查用户的如今网络连接景况,若是没连接则赶回3个特级简单的离线页面。就算那是2个要命基础的案例,但它能给您带来启发,让你理解运维并运营该性情是何其的简练!假诺你没掌握过
Service Worker,笔者提出您看看此 Github
repo,明白愈多相关的音信。

在该案例起始前,让大家先不难地看看它的行事流程:

  1. 在用户第③次访问大家的页面时,大家会安装 ServiceWorker,并向浏览器的缓存添加大家的离线 HTML 页面
  2. 然后,假设用户打算导航到另1个 web
    页面(同1个网站下),但此时已断网,那么我们将回来已被缓存的离线
    HTML 页面
  3. 只是,要是用户打算导航到其它1个 web
    页面,而此时网络已三番五次,则能照常浏览页面

行使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这么些常见的服务器和互联网加快之外,通过客户端达成了更好的走访体验。

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

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

本文由 伯乐在线 –
Erucy
翻译,weavewillg
校稿。未经许可,禁止转发!
英文出处:Oliver
Ash。欢迎参与翻译组。

咱俩是怎样运用 service worker 来为 theguardian.com
创设1个自定义的离线页面。

皇家赌场手机版 2

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

您正在朝着公司途中的客车里,在手机上开辟了
Guardian
应用。大巴被隧道包围着,但是这一个利用能够符合规律运营,就算没有互联网连接,你也能收获完全的机能,除了出示的内容恐怕有点旧。要是你品味在网站上也如此干,可惜它完全没办法加载:

皇家赌场手机版 3

安卓版 Chrome 的离线页面

Chrome 中的这么些彩蛋,很几个人都不知情》

Chrome
在离线页面上有个藏匿的游乐(桌面版上按空格键,手机版上点击那只恐龙),那有些能减轻一点您的烦乱。可是大家能够做得更好。

Service
workers
允许网站作者拦截本人站点的保有网络请求,那也就代表大家能够提供完善的离线体验,就好像原生应用相同。在
Guardian
网站,大家近来上线了1个自定义的离线体验效果。当用户离线的时候,他们会看到2个包含Guardian
标识的页面,上面带有3个归纳的离线提醒,还有二个填字游戏,他们得以在等候互联网连接的时候玩玩这一个找点乐子。那篇博客解释了大家是何等创设它的,可是在伊始在此以前,你能够先本身摸索看。

Service Worker入门

2015/03/26 · JavaScript
· Service Worker

原作出处: Matt
Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App拥有Web应用一般所不享有的富离线体验,定时的沉默更新,消息通告推送等效果。而新的Serviceworkers标准让在Web App上独具那一个效能成为可能。

让大家开始吧

万一你有以下 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(‘瑟维斯Worker
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
时,向缓存添加了离线页面。假设大家将代码分为几小块,可观望前几行代码中,笔者为离线页面钦定了缓存版本和UXC90L。如果你的缓存有例外版本,那么您只需立异版本号即可不难地化解缓存。在大概在第壹2
行代码,小编向那些离线页面及其财富(如:图片)发出请求。在赢得成功的响应后,大家将离线页面和有关能源丰硕到缓存。

今昔,离线页面已存进缓存了,大家可在需求的时等候检查索它。在同二个 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),如:
此案例。

加紧/离线访问只需三步

  • 首页添加注册代码

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?:\连不上网,worker实现加速。/\/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都引用了怎样第一方能源,各个加到忽略列表里。

皇家赌场手机版 6

在根目录下添加offline.html,在未曾网络且缓存中也并辰时采取,效果如下:

皇家赌场手机版 7

在根目录下添加offline.svg,在无互联网时图片财富请求重返该文件。

试试看

你需求一个帮衬 Service
Worker 和 连不上网,worker实现加速。fetch
API 的浏览器。结束到本文编写时只有Chrome(手提式有线电电话机版和桌面版)同时协理那三种 API(译者注:Opera
方今也支撑那两边),不过 Firefox
非常快就要帮忙了(在天天更新的本子中早就支撑了),除去 Safari
之外的拥有浏览器也都在试行。其余,service worker 只可以登记在选取了
HTTPS 的网站上,theguardian.com
已经上马逐步搬迁到 HTTPS,所以大家不得不在网站的 HTTPS
部分提供离线体验。就当前的话,我们挑选了 开发者博客 作为我们用来测试的地方。所以只要你是在大家网站的 开发者博客 部分阅读这篇小说的话,很幸运。

当你利用协助的浏览器访问大家的 开发者博客 中的页面包车型客车时候,一切就准备妥贴了。断开你的互联网连接,然后刷新一下页面。倘若你协调没规范尝试的话,能够看一下这段 以身作则录制(译者注:需梯子)。

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

进展阅读

其余,还有多少个很棒的离线效率案例。如:Guardian 营造了贰个存有 crossword
puzzle(填字游戏)的离线
web 页面 –
因而,尽管等待网络重连时(即已在离线状态下),也能找到一点乐趣。小编也援引看看
Google Chrome Github
repo,它包蕴了不少不比的
Service Worker 案例 – 当中有个别选用案例也在那!

但是,即使你想跳过上述代码,只是想差不离地由此一个库来处理有关操作,那么自个儿推荐你看看
UpUp。那是一个轻量的剧本,能让你更轻松地行使离线作用。

打赏扶助小编翻译更加多好小说,多谢!

打赏译者

加紧效果

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

皇家赌场手机版 8

基于webpagetest

查看测试结果

做事规律

经过一段简单的
JavaScript,我们能够提醒浏览器在用户访问页面包车型大巴时候立即登记大家休戚与共的
service worker。最近支持 service worker
的浏览器很少,所以为了制止不当,大家须要选择本性检查和测试。

JavaScript

if (navigator.serviceWorker) {
navigator.serviceWorker.register(‘/service-worker.js’); }

1
2
3
if (navigator.serviceWorker) {
    navigator.serviceWorker.register(‘/service-worker.js’);
}

Service worker
安装事件的一局部,我们得以选拔 新的缓存
API 来缓存大家网站中的各个内容,比如
HTML、CSS 和
JavaScript:

JavaScript

var staticCacheName = ‘static’; var version = 1; function updateCache()
{ return caches.open(staticCacheName + version) .then(function (cache) {
return cache.addAll([ ‘/offline-page.html’, ‘/assets/css/main.css’,
‘/assets/js/main.js’ ]); }); }; self.addEventListener(‘install’,
function (event) { event.waitUntil(updateCache()); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var staticCacheName = ‘static’;
var version = 1;
 
function updateCache() {
    return caches.open(staticCacheName + version)
        .then(function (cache) {
            return cache.addAll([
                ‘/offline-page.html’,
                ‘/assets/css/main.css’,
                ‘/assets/js/main.js’
            ]);
        });
};
 
self.addEventListener(‘install’, function (event) {
    event.waitUntil(updateCache());
});

当安装达成后,service worker
能够监听和决定 fetch
事件,让我们能够完全控制之后网站中产生的富有网络请求。

JavaScript

self.addEventListener(‘fetch’, function (event) {
event.respondWith(fetch(event.request)); });

1
2
3
self.addEventListener(‘fetch’, function (event) {
    event.respondWith(fetch(event.request));
});

在此间我们有很灵活的半空中能够发布,比如下边这一个热点,能够由此代码来生成大家和好的央浼响应:

JavaScript

self.addEventListener(‘fetch’, function (event) { var response = new
Response(‘<h1>Hello, World!</h1>’, { headers: {
‘Content-Type’: ‘text/html’ } }); event.respondWith(response); });

1
2
3
4
5
self.addEventListener(‘fetch’, function (event) {
    var response = new Response(‘&lt;h1&gt;Hello, World!&lt;/h1&gt;’,
        { headers: { ‘Content-Type’: ‘text/html’ } });
    event.respondWith(response);
});

还有那么些,尽管在缓存中找到了请求相应的缓存,大家得以向来从缓存中回到它,假使没找到的话,再经过互连网获取响应内容:

JavaScript

self.addEventListener(‘fetch’, function (event) { event.respondWith(
caches.match(event.request) .then(function (response) { return response
|| fetch(event.request); }) ); });

1
2
3
4
5
6
7
8
self.addEventListener(‘fetch’, function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                return response || fetch(event.request);
            })
    );
});

那么大家怎样运用这么些意义来提供离线体验吧?

第三,在 service worker
安装进度中,大家供给把离线页面需求的 HTML 和财富文件通过 service worker
缓存下来。在缓存中,我们加载了友好付出的 填字游戏 的
React应用 页面。之后,大家会阻碍全体访问
theguardian.com
网络请求,包括网页、以及页面中的能源文件。处理那个请求的逻辑大约如下:

  1. 当大家检查和测试到传播请求是指向大家的 HTML
    页面时,大家连年会想要提供最新的剧情,所以大家会尝试把这些请求通过网络发送给服务器。

    1. 当大家从服务器获得了响应,就足以直接再次来到那么些响应。
    2. 借使互联网请求抛出了尤其(比如因为用户掉线了),大家捕获那些可怜,然后选择缓存的离线
      HTML 页面作为响应内容。
  2. 不然,当我们检查和测试到请求的不是 HTML
    的话,我们会从缓存中追寻响应的乞请内容。

    1. 只要找到了缓存内容,大家得以平素回到缓存的内容。
    2. 不然,大家会尝试把那个请求通过网络发送给服务器。

在代码中,大家选用了 新的缓存
API(它是 瑟维斯 Worker API 的一片段)以及
fetch
成效(用于转移网络请求),如下所示:

JavaScript

var doesRequestAcceptHtml = function (request) { return
request.headers.get(‘Accept’) .split(‘,’) .some(function (type) { return
type === ‘text/html’; }); }; self.addEventListener(‘fetch’, function
(event) { var request = event.request; if
(doesRequestAcceptHtml(request)) { // HTML pages fallback to offline
page event.respondWith( fetch(request) .catch(function () { return
caches.match(‘/offline-page.html’); }) ); } else { // Default fetch
behaviour // Cache first for all other requests event.respondWith(
caches.match(request) .then(function (response) { return response ||
fetch(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
25
26
27
var doesRequestAcceptHtml = function (request) {
    return request.headers.get(‘Accept’)
        .split(‘,’)
        .some(function (type) { return type === ‘text/html’; });
};
 
self.addEventListener(‘fetch’, function (event) {
    var request = event.request;
    if (doesRequestAcceptHtml(request)) {
        // HTML pages fallback to offline page
        event.respondWith(
            fetch(request)
                .catch(function () {
                    return caches.match(‘/offline-page.html’);
                })
        );
    } else {
        // Default fetch behaviour
        // Cache first for all other requests
        event.respondWith(
            caches.match(request)
                .then(function (response) {
                    return response || fetch(request);
                })
        );
    }
});

就只供给如此多!theguardian.com
上的 具备代码都是在 GitHub
上开源 的,所以您能够去那儿查看大家的
service worker
的完整版本,可能直接从生产条件上访问

笔者们有足够的理由为这几个新的浏览器技术欢呼喝彩,因为它能够用来让你的网站像明日的原生应用相同,拥有完美的离线体验。以往当
theguardian.com 完全迁移到 HTTPS
之后,离线页面包车型大巴首要性会分明扩大,大家得以提供越发健全的离线体验。设想一下您在上下班途中网络很差的时候访问
theguardian.com,你会看出专门为你订制的天性化内容,它们是在您后面访问网站时由浏览器缓存下来的。它在安装进程中也不会生出其余勤奋,你所急需的只是访问这些网站而已,不像原生应用,还供给用户有三个采取商店的账号才能安装。Serviceworker
同样能够支持大家进步网站的加载速度,因为网站的框架能够被保证地缓存下来,就如原生应用相同。

即使您对 service worker
很感兴趣,想要驾驭越多内容的话,开发者 马特Gaunt(Chrome的忠实帮忙者)写了一篇特别详细地 介绍 Service
Worker的文章。

打赏帮衬小编翻译越来越多好文章,感激!

打赏译者

Service Worker的生命周期

Service worker拥有二个全然独立于Web页面包车型地铁生命周期。

要让贰个service
worker在你的网站上生效,你要求先在您的网页中注册它。注册1个service
worker之后,浏览器会在后台默默运行一个service worker的装置进程。

在装置进程中,浏览器会加载并缓存一些静态财富。如若具有的文本被缓存成功,service
worker就设置成功了。若是有其余文件加载或缓存失利,那么安装进度就会破产,service
worker就不能够被激活(也即没能安装成功)。假诺暴发这么的标题,别担心,它会在下次再品尝安装。

当安装到位后,service
worker的下一步是激活,在这一阶段,你还是能升官3个service
worker的本子,具体内容大家会在背后讲到。

在激活之后,service
worker将接管全部在温馨管辖域范围内的页面,可是只要1个页面是刚刚注册了service
worker,那么它那3回不会被接管,到下贰次加载页面包车型客车时候,service
worker才会生效。

当service
worker接管了页面之后,它大概有二种景况:要么被终止以节约内部存储器,要么会处理fetch和message事件,那三个事件分别发生于2个互连网请求现身还是页面上发送了一个消息。

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

皇家赌场手机版 9

打赏扶助自身翻译更加多好小说,感激!

任选一种支付格局

皇家赌场手机版 10
皇家赌场手机版 11

1 赞 3 收藏 1
评论

增长速度/离线原理探索

打赏帮助作者翻译越多好作品,感谢!

皇家赌场手机版 12

1 赞 收藏
评论

在我们起初写码在此以前

从这个品类地址拿到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获得3个TLS证书。差别的server安装方法分化,阅读辅助文书档案并通过Mozilla’s
SSL config
generator叩问最佳实践。

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

皇家赌场手机版 13

前端,在路上…
个人主页 ·
小编的稿子 ·
19 ·
    

皇家赌场手机版 14

什么是 Service worker

皇家赌场手机版 15

如上图,Service
worker

是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当贰个页面注册了3个
Service
worker
,它就足以登记一层层事件处理器来响应如网络请求和音讯推送这么些事件。Service
worker

能够被用来治本缓存,当响应四个互联网请求时能够安排为回到缓存如故从网络得到。由于Service
worker

是依照事件的,所以它只在拍卖那么些事件的时候被调入内部存款和储蓄器,不用操心常驻内部存款和储蓄器占用能源导致系统变慢。

至于小编:Erucy

皇家赌场手机版 16

曾经的SharePoint喵星程序猿(权且还挂着微软MVP的名头),今后的Azure/.Net/MongoDB/Cordova/前端程序猿,偶尔写小说
个人主页 ·
作者的文章 ·
46 ·
  

皇家赌场手机版 17

使用Service Worker

当今大家有了polyfill,并且化解了HTTPS,让我们看看到底怎么用service
worker。

Service worker生命周期

皇家赌场手机版 18

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是否对你的网站启用了。

皇家赌场手机版 19

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

您会意识那一个成功效够很有利地在二个仿照窗口中测试你的service
worker,那样你能够关闭和再一次打开它,而不会潜移默化到您的新窗口。任何创立在模仿窗口中的注册服务和缓存在窗口被关门时都将不复存在。

Service worker的主宰从第一遍页面访问初阶

在第一回加载页面时,全部能源都是从互连网载的,Service
worker

在第贰次加载时不会获取控制网络响应,它只会在继承访问页面时起效果。

皇家赌场手机版 20

页面第一次加载时做到install,并进入idle状态。

皇家赌场手机版 21

页面第3遍加载时,进入activated状态,准备处理全体的风云,同时
浏览器会向服务器发送三个异步 请求来检查Service
worker
本身是否有新的本子,构成了Service
worker
的革新机制。

皇家赌场手机版 22

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个缓存
  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获得1个promise并运用它来获得安装开支的时辰以及是还是不是安装成功。

若是拥有的文件都被缓存成功了,那么service
worker就设置成功了。借使别的3个文本下载退步,那么安装步骤就会战败。这些方法允许你依靠于您本人钦定的具备能源,然而那象征你须要分外小心翼翼地控制哪些文件要求在设置步骤中被缓存。钦赐了太多的文书的话,就会追加设置失利率。

地点只是一个简约的事例,你能够在install事件中施行此外操作依然甚至忽视install事件。

特点

  • 浏览器

谷歌 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所处的条件是互为隔绝的。

皇家赌场手机版 23

  • 没有浏览页面时也得以运作

接受系统事件,后台运维

  • 皇家赌场手机版,事件驱动,须求时运维,不需求时就甘休

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

  • 可升级

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

怎么着缓存和重回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里,我们传入了3个由caches.match发生的promise.caches.match
查找request中被service worker缓存命中的response。

要是我们有二个命中的response,我们重临被缓存的值,不然我们回来3个实时从互连网请求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. 增进1个callback到fetch请求的 .then 方法中
  2. 假如大家获得了一个response,大家进行如下的反省:
    1. 保证response是实用的
    2. 自我批评response的状态是或不是是200
    3. 管教response的项目是basic,那表示请求作者是同源的,非同源(即跨域)的央求也不可能被缓存。
  3. 只要我们通过了检查,clone以此请求。这么做的来由是只要response是1个Stream,那么它的body只可以被读取二遍,所以大家得将它克隆出来,一份发给浏览器,一份发给缓存。

福寿绵绵加速/离线

怎么着翻新2个瑟维斯 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
所提供的增高效用。

Service 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);
    });

即使设置失利了,没有很优雅的法门获得通报

若是2个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()近期仅帮忙瑟维斯 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’
})

那般设计是有理由的,它比XHCR-V的在同源下暗中同意发送凭据,但跨域时舍弃凭据的平整要来得好。fetch的作为更像其余的COTiggoS请求,例如<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-COTiguanS暗许不帮助

暗中同意情状下,从第壹方UPRADOL跨域得到叁个财富将会退步,除非对方支持了CORubiconS。你能够添加三个non-COLacrosseS选项到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版本。那几个想法很好也值得去做,可是有3个难点:

若是我们有上面三种图片:

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;" />

皇家赌场手机版 24

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

特定网站

  1. Google Chrome

Developer Tools->Application->Service Workers

皇家赌场手机版 25

在那里还有多少个相当有效的复选框:

  • Offline

宪章断网状态

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

只有在Settings里有3个方可在HTTP环境中选择Service
worker
的选项,适应于调节和测试,没有单独网站下的Service
worker
管理。

皇家赌场手机版 26

  1. Opera及其余双核浏览器同谷歌 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/

能够看到曾经有2陆个Serviceworker了,在那里能够手动Start让它工作,也足以Unregister卸载掉。

皇家赌场手机版 27

  1. Firefox

有三种办法进入Service
worker
治本界面来手动Start或unregister。

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

JavaScript

about:debugging#workers

1
about:debugging#workers

皇家赌场手机版 28

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

越来越多内容

此间有一对皮之不存毛将焉附的文书档案能够参见:

更多

TODO:

  • Service
    workers
    的创新须求手动编辑version,每回发表新小说时索要编写制定。
  • 使用AMP让页面渲染速度直达最高。

获得扶持

假如您遇见麻烦,请在Stackoverflow上发帖询问,使用‘service-worker’标签,以便于我们马上跟进和尽大概帮忙您化解难题。

赞 2 收藏
评论

皇家赌场手机版 29

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 收藏
评论

皇家赌场手机版 30

Leave a Comment.