worker已毕加速,创造一个非凡不难的离线页面

使用 瑟维斯(Service)(Service) worker 创设一个卓殊不难的离线页面

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

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

让大家想像以下情状:大家那时候在一辆通往农村的列车上,用运动装备望着一篇很棒的作品。与此同时,当你点击“查看越来越多”的链接时,高铁忽然进入了隧道,导致移动设备失去了网络,而
web 页面会突显出类似以下的内容:

美高梅开户网址 1

这是一对一让人悲伤的心得!幸运的是,web
开发者们能经过一些新特性来创新那类的用户体验。我近年平昔在折腾 ServiceWorkers,它给 web 带来的无尽可能性总能给自身惊喜。Service(Service) Workers
的出色特质之一是同意你检测网络请求的情景,并让您作出相应的响应。

在那篇文章里,我打算用此特性检查用户的当下网络连接情况,若是没连接则赶回一个一级简单的离线页面。即使那是一个百般基础的案例,但它能给您带来启发,让你掌握启动并运行该特性是何等的粗略!如若你没精晓过
Service(Service) Worker,我建议您看看此 Github
repo,了然越来越多相关的音信。

在本案例开端前,让我们先简单地探访它的劳作流程:

  1. 在用户首次访问我们的页面时,大家会安装 Service(Service)Worker,并向浏览器的缓存添加大家的离线 HTML 页面
  2. 接下来,即使用户打算导航到另一个 web
    页面(同一个网站下),但此刻已断网,那么大家将回来已被缓存的离线
    HTML 页面
  3. 可是,若是用户打算导航到别的一个 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
构建一个自定义的离线页面。

美高梅开户网址 2

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

你正在朝着公司途中的大巴里,在手机上打开了
Guardian
应用。大巴被隧道包围着,然而这些利用可以正常运行,尽管没有网络连接,你也能博得完全的功能,除了显示的内容可能有点旧。假设您品味在网站上也这么干,可惜它完全没办法加载:

美高梅开户网址 3

安卓版 Chrome 的离线页面

Chrome 中的这些彩蛋,很几个人都不明白》

Chrome
在离线页面上有个暗藏的玩乐(桌面版上按空格键,手机版上点击那只恐龙),那有点能减轻一点你的郁闷。然而大家得以做得更好。

Service
workers
允许网站小编拦截自己站点的有所网络请求,那也就表示我们得以提供周全的离线体验,就如原生应用相同。在
Guardian
网站,大家如今上线了一个自定义的离线体验效果。当用户离线的时候,他们会晤到一个包涵Guardian
标识的页面,上边带有一个简约的离线提醒,还有一个填字游戏,他们可以在等候网络连接的时候玩玩那个找点乐子。那篇博客解释了我们是怎样构建它的,不过在初步以前,你可以先自己试试看。

worker已毕加速,创造一个非凡不难的离线页面。Service Worker入门

2015/03/26 · JavaScript
· Service Worker

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

  • 十年踪迹](美高梅开户网址,)   

原生App拥有Web应用普通所不享有的富离线体验,定时的沉默更新,新闻文告推送等职能。而新的Serviceworkers标准让在Web App上享有这几个效应成为可能。

让大家伊始吧

即使你有以下 HTML 页面。那固然丰硕基础,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

继之,让大家在页面里登记 瑟维斯(Service)(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(‘瑟维斯(Service)Worker
registration successful with scope: ‘, registration.scope);
}).catch(function(err) { // registration failed 🙁 // 注册战败 🙁
console.log(‘瑟维斯(Service)(Service)Worker 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(Service) Worker 文件并将其取名为
‘service-worker.js‘。大家打算用那一个 Service(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(Service) Worker
时,向缓存添加了离线页面。即使大家将代码分为几小块,可看到前几行代码中,我为离线页面指定了缓存版本和URL。如若您的缓存有两样版本,那么你只需立异版本号即可简单地铲除缓存。在大体在第
12
行代码,我向这些离线页面及其资源(如:图片)发出请求。在获取成功的响应后,大家将离线页面和连锁资源充分到缓存。

近日,离线页面已存进缓存了,大家可在急需的时候检索它。在同一个 Service(Service)Worker 中,大家要求对无网络时回来的离线页面添加相应的逻辑代码。

JavaScript

this.add伊夫(Eve)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
内置的开发者工具。首先,导航到您的页面,然后一旦设置上了 瑟维斯(Service)(Service)Worker,就开辟 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?:\/\/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 和 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有些局限性,例如它能够很简单地缓解单页应用的问题,可是在多页应用上会很麻烦,而瑟维斯(Service)(Service)workers的产出正是为了化解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)(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(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(它是 Service 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,你会看到专门为您订制的个性化内容,它们是在你之前访问网站时由浏览器缓存下来的。它在装置进程中也不会生出任何不便,你所急需的只是造访那么些网站而已,不像原生应用,还索要用户有一个用到公司的账号才能设置。瑟维斯(Service)worker
同样可以扶助大家升高网站的加载速度,因为网站的框架可以被保障地缓存下来,就好像原生应用相同。

若果您对 service worker
很感兴趣,想要了然越多内容的话,开发者 Matt
Gaunt(Chrome的忠贞接济者)写了一篇尤其详细地 介绍 Service
Worker的文章。

打赏帮助自己翻译越来越多好文章,谢谢!

打赏译者

Service Worker的生命周期

瑟维斯(Service) worker拥有一个一心独立于Web页面的生命周期。

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

在装置进程中,浏览器会加载并缓存一些静态资源。固然具有的文本被缓存成功,service
worker就设置成功了。如若有任何公文加载或缓存失利,那么安装进度就会失利,service
worker就无法被激活(也即没能安装成功)。如若爆发那样的题材,别担心,它会在下次再尝试安装。

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

在激活之后,service
worker将接管所有在和谐管辖域范围内的页面,不过要是一个页面是刚刚注册了service
worker,那么它本次不会被接管,到下两次加载页面的时候,service
worker才会生效。

当service
worker接管了页面之后,它恐怕有三种状态:要么被终止以节约内存,要么会处理fetch和message事件,那四个事件分别发出于一个网络请求现身依旧页面上发送了一个新闻。

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

美高梅开户网址 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得到一个TLS证书。区其他server安装方法分歧,阅读协助文档并透过Mozilla’s
SSL config
generator刺探最佳实践。

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

美高梅开户网址 13

前端,在路上…
个人主页 ·
我的文章 ·
19 ·
    

美高梅开户网址 14

什么是 Service worker

美高梅开户网址 15

如上图,Service
worker

是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当一个页面注册了一个
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

页面第二次加载时,进入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. 缓存大家的文本
  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事件。

特点

  • 浏览器

谷歌(Google) 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里,我们传入了一个由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只可以被读取一遍,所以大家得将它克隆出来,一份发给浏览器,一份发给缓存。

贯彻加速/离线

怎么样翻新一个瑟维斯(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)(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);
    });

如果设置败北了,没有很优雅的办法获得通报

比方一个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’
})

那般设计是有理由的,它比XHR的在同源下默许发送凭据,但跨域时放弃凭据的平整要来得好。fetch的作为更像任何的CORS请求,例如<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-CORS默许不扶助

默许情形下,从第三方URL跨域得到一个资源将会败北,除非对方辅助了CORS。你可以加上一个non-CORS选项到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版本。那几个想法很好也值得去做,不过有一个题目:

如若大家有上面二种图片:

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

美高梅开户网址 26

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

可以看到已经有24个瑟维斯(Service)(Service)worker了,在此处可以手动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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图