初识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. 1.String、StringBuffer与StringBuilder之间区别

    1.三者在执行速度方面的比较:StringBuilder >  StringBuffer  >  String 2.String <(StringBuffer,StringBuild ...

  2. JavaScript：作用域与作用域链

    1.什么是作用域(scope)? 简单来讲,作用域(scope)就是变量访问规则的有效范围. 作用域外,无法引用作用域内的变量: 离开作用域后,作用域的变量的内存空间会被清除,比如执行完函数或者关闭浏 ...

  3. 除虫记之C#调用C函数出现的诡异错误

     作者:朱金灿 来源:http://blog.csdn.net/clever101 同事反映在在项目中使用C#程序调用我们部门编写的C++模块出现一个诡异错误:在调用A算法失败后,其它算法均不能调 ...

  4. SD配置步骤清单

    定义销售组织 定义分销渠道 定义产品组 给公司代码分配销售组织 给销售组织分配销售渠道 给工厂分配销售组织.分销渠道 给销售组织分配产品组 定义销售范围 定义装运点 给工厂分配装运点 维护工厂的装运点 ...

  5. PHP制作留言板

    做基础的留言板功能  需要三张表: 员工表,留言表,好友表 首先造一个登入页面: <form action="drcl.php" method="post" ...

  6. Android项目实战（三十）：Fresco加载gif图片并播放

    前言: 项目中图文混合使用的太多太多了,但是绝大部分都是静态图片. 然而项目开发中有这么一个需求:显示一个出一个简短的动画(一般都不超过3秒)演示 比如说:一个功能提供很多步骤来教用户做广播体操,那么 ...

  7. LeetCode题解之Unique Email Addresses

    1.题目描述 2.问题分析 将字符串中的 ‘.’ 去掉,将 ‘+’后面直到‘@’的字符串去掉,然后利用set的特性. 3.代码 int numUniqueEmails(vector<string ...

  8. java io详解(1)

    一.java io结构图 二.java io的开始:文件 三.字节流: 一.java io结构图 流分类: 1.Java的字节流    InputStream是所有字节输入流的祖先,而OutputSt ...

  9. C#多线程的用法8-线程间的协作AutoResetEvent

    AutoResetEvent自动重置事件,与ManualResetEvent是相对的而言.它同样用于线程间同步,请对照<C#多线程的用法7-线程间的协作ManualResetEvent>进 ...

  10. Css基础笔记（部分）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...