初识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


<!DOCTYPE html>


<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注冊了一个叫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

初识 ServiceWorker的更多相关文章

  1. Android动画效果之初识Property Animation（属性动画）

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  2. 初识Hadoop

    第一部分:              初识Hadoop 一.             谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...

  3. python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）

    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...

  4. 初识IOS,Label控件的应用。

    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...

  5. UI篇（初识君面）

    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...

  6. Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  7. 初识SpringMvc

    初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...

  8. 初识redis数据类型

    初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...

  9. Redis初识、设计思想与一些学习资源推荐

    一.Redis简介 1.什么是Redis Redis 是一个开源的使用ANSI C 语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的API.从2010 年 ...

随机推荐

  1. JSON.parse()与JSON.stringify()高级用法

    JSON.parse()与JSON.stringify是将JSON对象与字符串互相转换的方法,它们还有一些参数可以让我们在实际应用中更加方便,现在介绍一下它们的高级用法 JSON.parse() JS ...

  2. AngularJS学习之 angular-file-upload控件使用方法

    1.官方链接 https://github.com/nervgh/angular-file-upload 2.安装到项目中 bower install angular-file-upload(安装完成 ...

  3. php.ini中date.timezone设置详解

    date.timezone设置php5默认date.timezone为utc,改为date.timezone = PRC即可解决时间相差八小时的问题,但我在php的官方文档中看了半天也没找到这个参数啊 ...

  4. 关于DAL层使用静态方法，并在WEB层直接调用的问题

    同样的疑惑,记录一下吧: http://bbs.csdn.net/topics/360204198 DAL静不静态看connection等关键资源是否静态 比如下面的代码,就算静态也没事 public ...

  5. 2018-10-16 22:56:13 c language

    2018-10-16 22:56:13 c language 我们把上面的步骤总结一下,可以发现一个完整的编程过程是: 编写源文件:这是编程的主要工作,我们要保证代码的语法 100% 正确,不能有任何 ...

  6. python 使用else代替状态变量

    翻看公司的代码文档,在代码风格文档中,写着:为了提高代码的可维护性,代码中减少flag这类状态变量的使用.这个问题,平时确实没有想过,面对这种需求时,第一反应就是使用flag标记状态.那么使用什么样的 ...

  7. 固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异

    固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异 在看这篇文章之前可以先看一下下面的文章: SSD小白用户收货!SSD的误区如何解决 这样配会损失性能?实测6种特殊装机方式 听说固态 ...

  8. SQLSERVER中的资源调控器

    SQLSERVER中的资源调控器 转载自: http://wenku.baidu.com/view/0d92380cf78a6529647d5375.html http://www.cnblogs.c ...

  9. C# socket 发送图片和文件

    先说服务端:界面:如图: 界面设计源码 namespace SocketJPGToTxt { partial class Form1 { /// <summary> /// 必需的设计器变 ...

  10. 转：SqlServer索引及优化详解

    (一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引.簇集索引)和非聚集索引(nonc ...