菜单

澳门金沙国际:应用Service worker实现加快/离线访问静态blog网站

2019年2月26日 - 金沙前端

让大家初始吧

若果你有以下 HTML 页面。那尽管可怜基础,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

进而,让大家在页面里登记 Service Worker,那里仅创设了该对象。向正要的
HTML 里添加以下代码。

JavaScript

<script> // Register the service worker // 注册 service worker if
(‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/service-worker.js’).then(function(registration)
{ // Registration was successful // 注册成功 console.log(‘ServiceWorker
registration successful with scope: ‘, registration.scope);
}).catch(function(err) { // registration failed 🙁 // 注册失败 🙁
console.log(‘ServiceWorker registration failed: ‘, err); }); }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
// Register the service worker
// 注册 service worker
if (‘serviceWorker’ in navigator) {
    navigator.serviceWorker.register(‘/service-worker.js’).then(function(registration) {
    // Registration was successful
    // 注册成功
    console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope);
}).catch(function(err) {
    // registration failed 🙁
    // 注册失败 🙁
    console.log(‘ServiceWorker registration failed: ‘, err);
   });
}
</script>

接下来,我们必要成立 Service Worker 文件并将其取名为
‘service-worker.js‘。大家打算用那些 瑟维斯 Worker
拦截任何互连网请求,以此检查互联网的连接性,并依照检查结果向用户重返最契合的始末。

JavaScript

‘use strict’; var cacheVersion = 1; var currentCache = { offline:
‘offline-cache’ + cacheVersion }; const offlineUrl =
‘offline-page.html’; this.addEventListener(‘install’, event => {
event.waitUntil( caches.open(currentCache.offline).then(function(cache)
{ return cache.addAll([ ‘./img/offline.svg’, offlineUrl ]); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
‘use strict’;
 
var cacheVersion = 1;
var currentCache = {
  offline: ‘offline-cache’ + cacheVersion
};
const offlineUrl = ‘offline-page.html’;
 
this.addEventListener(‘install’, event => {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
          ‘./img/offline.svg’,
          offlineUrl
      ]);
    })
  );
});

在地点的代码中,大家在安装 Service Worker
时,向缓存添加了离线页面。即便大家将代码分为几小块,可看到前几行代码中,作者为离线页面钦定了缓存版本和U奥迪Q5L。若是你的缓存有两样版本,那么您只需创新版本号即可简单地铲除缓存。在大致在第②2
行代码,我向这几个离线页面及其资源(如:图片)发出请求。在取得成功的响应后,大家将离线页面和连锁财富丰硕到缓存。

后天,离线页面已存进缓存了,大家可在急需的时等候检查索它。在同3个 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 访问互联网)

澳门金沙国际 1

即使你刷新页面,你应该能收占卜应的离线页面!

澳门金沙国际 2

如若你只想大约地质度量试该效能而不想写任何代码,那么您能够访问小编已创设好的
demo。其它,上述任何代码能够在
Github repo 找到。

自家晓得用在此案例中的页面很简短,但您的离线页面则取决于你协调!若是你想深切该案例的始末,你能够为离线页面添加缓存破坏(
cache busting),如:
此案例。

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做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

连不上网?U.K.卫报的天性离线页面是那般做的

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

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

我们是何许利用 service worker 来为 theguardian.com
营造3个自定义的离线页面。

澳门金沙国际 3

theguardian.com 的离线页面。插图:Oliver Ash

您正在朝着集团途中的地铁里,在手提式有线电话机上开辟了
Guardian
应用。大巴被隧道包围着,但是这么些动用能够不荒谬运维,即便没有互联网连接,你也能博得完全的效应,除了显示的剧情或者有点旧。假使您尝试在网站上也如此干,可惜它完全没办法加载:

澳门金沙国际 4

安卓版 Chrome 的离线页面

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

Chrome
在离线页面上有个藏匿的游戏(桌面版上按空格键,手提式有线电话机版上点击那只恐龙),那有个别能减轻一点你的烦恼。可是大家得以做得更好。

Service
workers
允许网站作者拦截本身站点的拥有互连网请求,那也就象征我们得以提供全面包车型地铁离线体验,就如原生应用相同。在
Guardian
网站,大家近年来上线了三个自定义的离线体验效果。当用户离线的时候,他们会看出3个分包
Guardian
标识的页面,上边带有2个简易的离线提示,还有五个填字游戏,他们能够在等候互连网连接的时候玩玩这么些找点乐子。那篇博客解释了作者们是什么样创设它的,但是在开头从前,你能够先自身尝试看。

愈多内容

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

打赏支持本人翻译越来越多好小说,谢谢!

任选一种支付办法

澳门金沙国际 5
澳门金沙国际 6

1 赞 3 收藏 1
评论

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

澳门金沙国际 7

打赏帮忙本人翻译更加多好小说,谢谢!

澳门金沙国际 8

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摸底最佳实践。

实行阅读

其它,还有多少个很棒的离线功效案例。如:Guardian 营造了1个具有 crossword
puzzle(填字游戏)的离线
web 页面 –
因而,固然等待互联网重连时(即已在离线状态下),也能找到一点乐趣。作者也引进看看
Google Chrome Github
repo,它含有了重重不一的
Service Worker 案例 – 其中有的利用案例也在那!

唯独,纵然你想跳过上述代码,只是想大约地经过3个库来处理有关操作,那么本身推荐你看看
UpUp。那是贰个轻量的本子,能让您更轻松地运用离线效用。

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

打赏译者

Service worker生命周期

澳门金沙国际 9

Service
worker

为网页添加1个像样于APP的生命周期,它只会响应系统事件,即使浏览器关闭时操作系统也足以唤起Service
worker
,那一点13分重要,让web
app与native app的力量变得近乎了。

Service
worker
在Register时会触发Install事件,在Install时能够用来预先获取和缓存应用所需的财富并安装每一个文件的缓存策略。

一旦Service
worker
居于activated状态,就能够完全控制应用的财富,对互联网请求进行自小编批评,修改网络请求,从网络上获取并赶回内容大概重回由已设置的Service
worker
预示获取并缓存好的能源,甚至还是可以扭转内容并重回给网络语法。

不无的那些都用户都以透明的,事实上,二个企划能够的Service
worker
就如叁个智能缓存系统,压实了网络和缓存效用,选用最优办法来响应互连网请求,让使用越发安定的周转,就算没有网络也没提到,因为你可以完全控制互联网响应。

至于小编:Erucy

澳门金沙国际 10

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

澳门金沙国际 11

使用Service Worker

后日大家有了polyfill,并且解决了HTTPS,让大家看看到底怎么用service
worker。

采用 Service worker 成立二个极度简单的离线页面

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

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

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

澳门金沙国际 12

那是一对一令人消沉的心得!幸运的是,web
开发者们能透过有些新性情来立异那类的用户体验。作者多年来平素在折腾 ServiceWorkers,它给 web 带来的无尽或许性总能给自家惊喜。Service Workers
的好好特质之一是同意你检查和测试互联网请求的场所,并让你作出相应的响应。

在那篇小说里,小编打算用此本性检查用户的当下网络连接情状,要是没连接则赶回二个特级简单的离线页面。就算那是三个尤其基础的案例,但它能给你带来启发,让您明白运营并运维该特性是何其的简单!借使你没掌握过
Service Worker,小编建议您看看此 Github
repo,理解更多相关的新闻。

在本案例起初前,让我们先不难地探访它的劳作流程:

  1. 在用户第二遍访问大家的页面时,大家会安装 瑟维斯Worker,并向浏览器的缓存添加大家的离线 HTML 页面
  2. 下一场,要是用户打算导航到另一个 web
    页面(同1个网站下),但此时已断网,那么大家将重临已被缓存的离线
    HTML 页面
  3. 唯独,借使用户打算导航到其余3个 web
    页面,而那时互连网已一而再,则能照常浏览页面

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

试试看

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

当您采纳帮助的浏览器访问大家的 开发者博客 中的页面包车型客车时候,一切就准备妥帖了。断开你的互连网连接,然后刷新一下页面。如若您协调没规范尝试的话,能够看一下那段 示范录像(译者注:需梯子)。

怎样缓存和再次来到Request

您曾经设置了service worker,你今后得以回去您缓存的央浼了。

当service
worker被设置成功还要用户浏览了另一个页面或许刷新了近日的页面,service
worker将开头接到到fetch事件。上面是3个例证:

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。

借使大家有1个命中的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只好被读取二遍,所以大家得将它克隆出来,一份发给浏览器,一份发给缓存。

至于小编:刘健超-J.c

澳门金沙国际 13

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

澳门金沙国际 14

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时将拥有符合缓存策略的财富开展缓存。

办事原理

透过一段简单的
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. 假设网络请求抛出了10分(比如因为用户掉线了),大家捕获那几个那些,然后采纳缓存的离线
      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,你汇合到专门为你订制的本性化内容,它们是在您前面访问网站时由浏览器缓存下来的。它在安装进程中也不会产生其余辛劳,你所急需的只是造访这几个网站而已,不像原生应用,还需求用户有二个选用集团的账号才能安装。Serviceworker
同样能够匡助大家升高网站的加载速度,因为网站的框架能够被保证地缓存下来,就好像原生应用相同。

假定你对 service worker
很感兴趣,想要领悟越多内容的话,开发者 马特Gaunt(Chrome的忠诚帮助者)写了一篇越发详细地 介绍 Service
Worker的文章。

打赏协理小编翻译越来越多好小说,感激!

打赏译者

Service Worker 是什么?

二个 service worker
是一段运转在浏览器后台进度里的剧本,它独自于最近页面,提供了那个不必要与web页面交互的意义在网页背后悄悄执行的能力。在现在,基于它能够兑现音信推送,静默更新以及地理围栏等劳务,但是当前它首先要全数的效能是阻碍和拍卖网络请求,蕴涵可编制程序的响应缓存管理。

怎么说那么些API是一个这多少个棒的API呢?因为它使得开发者能够补助尤其好的离线体验,它赋予开发者完全控制离线数据的力量。

在service worker提议从前,此外2个提供开发者离线体验的API叫做App
Cache。但是App
Cache有个别局限性,例如它能够很不难地缓解单页应用的难点,不过在多页应用上会很麻烦,而瑟维斯workers的出现便是为了消除App Cache的痛点。

下边详细说一下service worker有何样供给专注的地点:

相关文章

发表评论

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

网站地图xml地图