离线访问静态blog网站,United Kingdom卫报的秉性离线页面是如此做的

行使Service worker完结加速/离线访问静态blog网站

2017/02/19 · JavaScript
· Service Worker

原文出处: 离线访问静态blog网站,United Kingdom卫报的秉性离线页面是如此做的。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上全部那几个成效成为或者。

动用 瑟维斯 worker 创设一个非凡不难的离线页面

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

本文由 伯乐在线 –
刘健超-J.c离线访问静态blog网站,United Kingdom卫报的秉性离线页面是如此做的。
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:Dean
Hume。欢迎加入翻译组。

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

皇家赌场手机版 1

那是一对一让人沮丧的感受!幸运的是,web
开发者们能透过有个别新特色来革新那类的用户体验。作者多年来向来在折腾 瑟维斯Workers,它给 web 带来的无尽大概性总能给自家惊喜。Service Workers
的上佳特质之一是同意你检查和测试互联网请求的场合,并让您作出相应的响应。

在那篇小说里,小编打算用此个性检查用户的近来网络连接境况,借使没连接则赶回四个特级简单的离线页面。固然那是三个百般基础的案例,但它能给你带来启迪,让您领悟运行并运转该天性是多么的大致!假如您没精晓过
Service Worker,我建议你看看此 Github
repo,通晓越多相关的消息。

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

  1. 在用户第②回访问大家的页面时,大家会设置 瑟维斯Worker,并向浏览器的缓存添加大家的离线 HTML 页面
  2. 下一场,倘使用户打算导航到另1个 web
    页面(同一个网站下),但那时已断网,那么我们将回到已被缓存的离线
    HTML 页面
  3. 而是,假如用户打算导航到此外二个 web
    页面,而那时候网络已接连,则能照常浏览页面

连不上网?英帝国卫报的本性离线页面是那样做的

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

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

大家是怎样利用 service worker 来为 theguardian.com
创设多个自定义的离线页面。

皇家赌场手机版 2

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

您正在朝着公司途中的大巴里,在手提式有线电话机上开拓了
Guardian
应用。地铁被隧道包围着,可是这一个利用能够符合规律运维,就算没有网络连接,你也能取得完整的作用,除了出示的始末恐怕有点旧。尽管您品味在网站上也如此干,可惜它完全没办法加载:

皇家赌场手机版 3

安卓版 Chrome 的离线页面

Chrome 中的这几个彩蛋,很多少人都不亮堂》

Chrome
在离线页面上有个暗藏的娱乐(桌面版上按空格键,手提式无线电话机版上点击那只恐龙),那多少能减轻一点你的干扰。可是大家得以做得更好。

Service
workers
允许网站笔者拦截自身站点的全数互联网请求,那也就表示我们能够提供完善的离线体验,就如原生应用相同。在
Guardian
网站,大家多年来上线了贰个自定义的离线体验效果。当用户离线的时候,他们会看到三个含有
Guardian
标识的页面,下面带有1个简易的离线提醒,还有三个填字游戏,他们得以在等候网络连接的时候玩玩那几个找点乐子。那篇博客解释了大家是什么样营造它的,然而在开首在此之前,你能够先自身尝试看。

加紧/离线访问只需三步

  • 首页添加注册代码

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都引用了怎么第③方财富,每一种加到忽略列表里。

皇家赌场手机版 4

在根目录下添加offline.html,在未曾互联网且缓存中也没有时采纳,效果如下:

皇家赌场手机版 5

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

Service Worker 是什么?

三个 service worker
是一段运维在浏览器后台进程里的脚本,它独自于目前页面,提供了那个不须求与web页面交互的机能在网页背后悄悄执行的能力。在以往,基于它可以兑现音信推送,静默更新以及地理围栏等劳务,可是最近它首先要享有的功效是掣肘和处理网络请求,包蕴可编制程序的响应缓存管理。

何以说那个API是1个要命棒的API呢?因为它使得开发者能够援救特别好的离线体验,它赋予开发者完全控制离线数据的能力。

在service worker提议此前,此外2个提供开发者离线体验的API叫做App
Cache。但是App
Cache某个局限性,例如它能够很不难地缓解单页应用的难题,可是在多页应用上会很辛劳,而Serviceworkers的现身就是为了解决App Cache的痛点。

上边详细说一下service worker有哪些须求留意的地点:

  • 它是JavaScript
    Worker,所以它无法直接操作DOM。然而service
    worker能够经过postMessage与页面之间通讯,把信息布告给页面,假设必要的话,让页面自身去操作DOM。
  • Serviceworker是2个可编制程序的网络代理,允许开发者控制页面上拍卖的互连网请求。
  • 在不被运用的时候,它会融洽终止,而当它再也被用到的时候,会被再一次激活,所以你不能够借助于service
    worker的onfecth和onmessage的处理函数中的全局状态。倘诺您想要保存一些持久化的音讯,你能够在service
    worker里使用IndexedDB API。
  • Serviceworker大量使用promise,所以如果您不领会什么是promise,那您必要先读书这篇文章。

让大家开首吧

假使你有以下 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汉兰达L。倘若你的缓存有两样版本,那么您只需革新版本号即可简单地解决缓存。在大约在第12
行代码,笔者向那么些离线页面及其财富(如:图片)发出请求。在获得成功的响应后,大家将离线页面和有关财富丰裕到缓存。

当今,离线页面已存进缓存了,我们可在急需的时等候检查索它。在同三个 瑟维斯Worker 中,大家须要对无互连网时再次来到的离线页面添加相应的逻辑代码。

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 访问网络)

皇家赌场手机版 6

若果你刷新页面,你应当能看到相应的离线页面!

皇家赌场手机版 7

假若你只想大约地质度量试该作用而不想写任何代码,那么您能够访问笔者已创立好的
demo。别的,上述全部代码能够在
Github repo 找到。

自小编晓得用在此案例中的页面相当的粗略,但您的离线页面则取决于你协调!倘若你想深远该案例的情节,你能够为离线页面添加缓存破坏(
cache busting),如:
此案例。

试试看

你要求三个支撑 Service
Worker 和 fetch
API 的浏览器。甘休到本文编写时只有Chrome(手提式有线电话机版和桌面版)同时援助那二种 API(译者注:Opera
近年来也帮助那四头),然则 Firefox
相当的慢就要帮助了(在每一天更新的版本中已经援助了),除了 Safari
之外的装有浏览器也都在试行。别的,service worker 只好登记在应用了
HTTPS 的网站上,theguardian.com
已经初步慢慢搬迁到 HTTPS,所以大家不得不在网站的 HTTPS
部分提供离线体验。就当下的话,我们挑选了 开发者博客 作为我们用来测试的地方。所以只要您是在大家网站的 开发者博客 部分阅读那篇小说的话,很幸运。

当您选择辅助的浏览器访问我们的 开发者博客 中的页面包车型大巴时候,一切就准备妥贴了。断开你的网络连接,然后刷新一下页面。假如您协调没规范尝试的话,能够看一下那段 示范录制(译者注:需梯子)。

加速效果

首页加快后,网络请求从16降为1,加载时间从2.296s降为0.654s,得到了一晃加载的结果。

皇家赌场手机版 8

基于webpagetest

查看测试结果

Service Worker的生命周期

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

要让叁个service
worker在你的网站上生效,你必要先在您的网页中注册它。注册一个service
worker之后,浏览器会在后台默默运维叁个service worker的安装进度。

在设置进度中,浏览器会加载并缓存一些静态能源。尽管拥有的文件被缓存成功,service
worker就设置成功了。假使有其余公文加载或缓存战败,那么安装进程就会失败,service
worker就无法被激活(也即没能安装成功)。假使爆发如此的难题,别担心,它会在下次再尝试安装。

当安装完成后,service
worker的下一步是激活,在这一等级,你还是能提高3个service
worker的版本,具体内容我们会在前边讲到。

在激活之后,service
worker将接管全数在本人管辖域范围内的页面,然而假诺2个页面是刚刚注册了service
worker,那么它那一回不会被接管,到下1遍加载页面包车型地铁时候,service
worker才会生效。

当service
worker接管了页面之后,它只怕有二种情形:要么被终止以节省里部存储器,要么会处理fetch和message事件,那两个事件分别产生于八个互联网请求出现依旧页面上发送了两个音讯。

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

皇家赌场手机版 9

拓展阅读

其它,还有多少个很棒的离线功用案例。如:Guardian 营造了一个享有 crossword
puzzle(填字游戏)的离线
web 页面 –
由此,即便等待网络重连时(即已在离线状态下),也能找到一点乐趣。作者也推荐看看
Google Chrome Github
repo,它包蕴了重重不等的
Service Worker 案例 – 个中有个别应用案例也在那!

只是,假设您想跳过上述代码,只是想大约地由此八个库来拍卖有关操作,那么作者引进您看看
UpUp。那是2个轻量的剧本,能让您更自在地行使离线效能。

打赏支持小编翻译越多好小说,多谢!

打赏译者

做事原理

透过一段简单的
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,你会看到专门为您订制的性情化内容,它们是在你从前访问网站时由浏览器缓存下来的。它在装置过程中也不会产生任何不便,你所供给的只是造访那一个网站而已,不像原生应用,还索要用户有3个采纳商店的账号才能设置。Serviceworker
同样能够扶持我们提高网站的加载速度,因为网站的框架能够被保障地缓存下来,就好像原生应用相同。

只要您对 service worker
很感兴趣,想要通晓更加多内容的话,开发者 MattGaunt(Chrome的鞠躬尽瘁辅助者)写了一篇尤其详细地 介绍 Service
Worker的文章。

打赏协理本身翻译愈来愈多好文章,多谢!

打赏译者

加紧/离线原理探索

在大家初叶写码在此以前

从这个品类地址拿到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打听最佳实践。

打赏扶助自身翻译越来越多好小说,多谢!

任选一种支付情势

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

1 赞 3 收藏 1
评论

打赏协助自身翻译越来越多好小说,谢谢!

皇家赌场手机版 12

1 赞 收藏
评论

什么是 Service worker

皇家赌场手机版 13

如上图,Service
worker

是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当1个页面注册了三个
Service
worker
,它就能够挂号一各个事件处理器来响应如网络请求和消息推送这一个事件。Service
worker

能够被用来保管缓存,当响应二个互联网请求时得以布置为回到缓存依然从互连网得到。由于Service
worker

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

使用Service Worker

近日大家有了polyfill,并且消除了HTTPS,让我们看看到底怎么用service
worker。

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

皇家赌场手机版 14

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

皇家赌场手机版 15

至于小编:Erucy

皇家赌场手机版 16

现已的SharePoint喵星程序猿(暂且还挂着微软MVP的名头),未来的Azure/.Net/MongoDB/Cordova/前端程序猿,偶尔写小说
个人主页 ·
作者的小说 ·
46 ·
  

皇家赌场手机版 17

Service worker生命周期

皇家赌场手机版 18

Service
worker

为网页添加贰个近似于APP的生命周期,它只会响应系统事件,即便浏览器关闭时操作系统也能够提示Service
worker
,那点极度重要,让web
app与native app的力量变得就像了。

Service
worker
在Register时会触发Install事件,在Install时能够用来预先获取和缓存应用所需的能源并设置各个文件的缓存策略。

一旦Service
worker
处于activated状态,就足以完全控制应用的财富,对互连网请求实行检讨,修改网络请求,从网络上获取并赶回内容可能再次回到由已设置的Service
worker
预报获取并缓存好的财富,甚至还是能转移内容并回到给互连网语法。

具有的这么些都用户都以晶莹剔透的,事实上,2个布置卓越的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

在第1次加载时不会获得控制互连网响应,它只会在接二连三访问页面时起成效。

皇家赌场手机版 20

页面首回加载时做到install,并进入idle状态。

皇家赌场手机版 21

页面第一遍加载时,进入activated状态,准备处理全体的风云,同时
浏览器会向服务器发送1个异步 请求来检查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. 缓存大家的文书
  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事件。

特点

  • 浏览器

谷歌 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里,大家传入了2个由caches.match产生的promise.caches.match
查找request中被service worker缓存命中的response。

万一大家有四个命中的response,我们回去被缓存的值,不然大家回到一个实时从互联网请求fetch的结果。这是1个至极简单的例证,使用具有在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是贰个Stream,那么它的body只可以被读取叁回,所以大家得将它克隆出来,一份发给浏览器,一份发给缓存。

福衢寿车加速/离线

怎么创新3个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
所提供的增进功效。

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()近日仅补助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’
})

那般设计是有理由的,它比XHXC60的在同源下暗中认可发送凭据,但跨域时放任凭据的平整要来得好。fetch的行事更像任何的COCR-VS请求,例如<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-COLacrosseS暗许不支持

暗中同意意况下,从第叁方U兰德酷路泽L跨域得到1个财富将会失利,除非对方帮忙了CO本田CR-VS。你能够加上2个non-CO卡宴S选项到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个图片,你有以下二种采取:

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

若果我们在1个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里有八个足以在HTTP环境中选用Service
worker
的选项,适应于调试,没有单独网站下的Service
worker
管理。

皇家赌场手机版 26

  1. Opera及其余双核浏览器同谷歌 Chrome
    尽管看到三个相同范围内的多少个Service
    worker
    ,说明Service
    woker
    更新后,而原有Service
    worker
    还从未被terminated。

改变URL Hash的Bug

在M40版本中设有1个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.