初识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. Onsen UI for React文档

    注:采用ES6+JSX语法 1.开始一个项目 在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块. 可以使用monaca CLI工具包快速初始化一个应用: ...

  2. mysql数据库操作指令

    数据库相关 查询所有数据库 show databases; 创建数据库 create database 数据库名: 创建数据库指定字符集 create database 数据库名 character ...

  3. 使用kafka consumer api时，中文乱码问题

    使用Intelli idea调试kafka low consumer时,由于broker存储的message有中文, idea中console端是可以正确显示的 然后mvn package打包到服务器 ...

  4. 护网杯 task_shoppingCart 记录

    前言 相关题目位于 https://gitee.com/hac425/blog_data/tree/master/hwb task_shoppingCart 漏洞位于 00BD9 用户输入 idx 然 ...

  5. 牛客网 Java 工程师能力评估 20 题 - 详解

    牛客网 Java 工程师能力评估 20 题 - 详解 不知在看博客的你是否知道 牛客网,不知道就太落后了,分享给你 : 牛客网 此 20 题,绝对不只是 20 题! 免责声明:本博客为学习笔记,如有侵 ...

  6. Android之使用枚举利弊及替代方案

    Android上不应该使用枚举,占内存,应该使用@XXXDef注解来替代 使用 Enum 的缺点 每一个枚举值都是一个对象,在使用它时会增加额外的内存消耗,所以枚举相比与 Integer 和 Stri ...

  7. View的layout机制

    View框架的工作流程为:测量每个View大小(measure)-->把每个View放置到相应的位置(layout)-->绘制每个View(draw). 源代码分析 在View的源代码中, ...

  8. C语言目录

    软件行业的很多细分学科都是都是基于C语言的,学习数据结构.算法.操作系统.编译原理等都离不开C语言. PHP.Python 等都是用C语言开发出来的,虽然平时做项目的时候看不到C语言的影子,但是如果想 ...

  9. 常用的第三方模块 Pillow url

    Pillow PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了.PIL功能非常强大,但API却非常简单易用. 由于PIL仅支持到Python 2.7 ...

  10. VMWare12虚拟机实现主客机间的文件拖拽（复制粘贴）和文件夹共享

    版本: 主机:Windows 7 64位旗舰版 虚拟机: VMWare 12 + Windows 7 64位旗舰版 VMWare pro 12 + Ubuntu16.04LTS 64位 注:由于VMW ...