初识 ServiceWorker

初识ServiceWorker

初识ServiceWorker

在8月份的时候。W3C更新了一个叫Service Workers的API。

了解过HTML5中的Web Worker的人可能会对这个API会更easy理解一些,不然的话会将这两个API搞混。

事实上,Service Worker是基于Web Worker的事件驱动的,他们运行的机制都是新开一个线程去处理一些额外的。曾经不能直接处理的任务。对于Web Worker,我们能够使用它来进行复杂的计算,由于它并不堵塞浏览器主线程的渲染。而Service Worker,我们能够用它来进行本地缓存。相当于一个本地的proxy。

说起缓存,我们会想起我们经常使用的一些缓存技术来缓存我们的静态资源,可是老的方式是不支持调试的,灵活性不高。

使用Service Worker来进行缓存,我们能够用javascript代码来拦截浏览器的http请求,并设置缓存的文件。直接返回。不经过webserver,然后,做很多其它你想做的事情。

因此,我们能够开发基于浏览器的离线应用。

这使得我们的web应用降低对网络的依赖。

比如,我们开发了一个新闻阅读的web应用,当你用手机浏览器在有网络的情况下打开时。你能够正常的获取新闻内容。但是,假设手机进入飞行模式。那这个应用你就没法使用了。

假设我们使用了Service Worker做缓存,浏览器http请求会先经过Service Worker,通过url mapping去匹配,假设匹配到了,则使用缓存数据,假设匹配失败,则继续运行你指定的动作。普通情况下,匹配失败则让页面显示“网页无法打开”。

上面是Service Worker的基本使用场景,当然,不只局限于数据缓存。

以下来看一个简单的演示样例:

/index.html

 
         
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
         
<html lang="en">
<head>
<meta charset="utf-8">
<script>
// scope defaults to "/*"
navigator.serviceWorker.register( "/service-worker.js").then( function(serviceWorker) {
console.log( "success!");
// To use the serviceWorker immediately,
// you might call window.location.reload()
});
script>
head>
<body>
body>
html>

在chrome中的console中输入navigator.serviceWorker你会发现返回的undefined。

这可能是由于你chrome的版本号小于36,或者你没有打开这个功能。

所以先确保你的chrome升级到了36以上。

然后进入chrome://flags/中将ServiceWorker开关打开,例如以下图:
ServiceWorker
确保以上两个步骤都完毕后。就能够在控制台看到返回值:
ServiceWorker

上面的代码中。给serviceWorker注冊了一个叫service-worker.js的文件,这里採用的promise写法。当注冊成功后,会运行then里面的回调函数。

以下看看service-worker.js

 
         
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
 
         
this.oninstall = function(e) {
// Create a cache of resources.
var resources = new Cache();
var visited = new Cache();
// Fetch them.
e.waitUntil(resources.add(
"/index.html",
"/fallback.html",
"/css/base.css",
"/js/app.js",
"/img/logo.png"
).then( function() {
// Add caches to the global caches.
return Promise.all([
caches.set( "v1", resources),
caches.set( "visited", visited)
]);
}));
};
this.onfetch = function(e) {
e.respondWith(
// Check to see if request is found in cache
caches.match(e.request).catch( function() {
// It's not? Prime the cache and return the response.
return caches.get( "visited").then( function(visited) {
return fetch(e.request).then( function(response) {
visited.put(e.request, response);
// Don't bother waiting, respond already.
return response;
});
});
}).catch( function() {
// Connection is down?

Simply fallback to a pre-cached page.

return caches.match( "/fallback.html");
});
);
};

oninstall:当worker装载完成时运行

在oninstall的回调函数中,将一些须要缓存的静态的文件写入全局的cache对象中。

onfetch:当接收到用户的请求时运行

通过e.request去匹配缓存中的静态文件。假设匹配到,则将这个缓存文件返回,假设未匹配到,则被catch获取。将请求释放(去请求真正的server),并将这个新文件缓存到全局cache。这里也是用到了promise写法。

在我看来,用ServiceWorker做缓存就相当于一个proxy,能够拦截http请求。这样你能够对请求做一下定制化的需求。即使在无网络的情况下。ServiceWorker也能够被当做一个httpserver一样返回前端所须要的数据。

上面是我对ServiceWorker的一些參考和理解。

眼下相关的中英文资料还比較少,主要还是得看W3C的介绍。

參考资料:
ServiceWorker简单样例

Github上一些代码

W3C ServiceWorkers

文章作者:foreverpx
文章原文链接:初识ServiceWorker

你可能感兴趣的:(javascript,前端,ViewUI)