初识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. chrome浏览器使用chrome://inspect调试app 网页，打开空白的问题

    使用chrome浏览器,输入chrome://inspect可以调试android app里面的网页,如果inspect的时候,是空白, 问题截图: 那就在C:\Windows\System32\dr ...

  2. [WPF 基础知识系列] —— 绑定中的数据校验Vaildation

    前言: 只要是有表单存在,那么就有可能有对数据的校验需求.如:判断是否为整数.判断电子邮件格式等等. WPF采用一种全新的方式 - Binding,来实现前台显示与后台数据进行交互,当然数据校验方式也 ...

  3. windows 7 下安装Oracle 9i 解决方法[转]

    这里首先申明下,windows7下安装oracle9i 9.0.1版本肯定是不成功的,楼主安装过无数次,网上也找过很多方法,都不可行,所以就不用试了.这里说下oracle9i 9.2版本安装出现的问题 ...

  4. css+div页面布局

    div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...

  5. 类Unix上5个最佳开源备份工具 Bacula/Amanda/Backupninja/Backuppc/UrBackup

    当为一个企业选择备份工具的时候,你都考虑什么呢? 确定你正在部署的软件具有下面的特性 开源软件 – 你务必要选择那些源码可以免费获得,并且可以修改的软件.确信可以恢复你的数据,即使是软件供应商/项目停 ...

  6. 解决Elasticsearch问题的一些心得体会

    在开始前先来介绍下背景:我的日志采集系统采用ELK(logstash(收集).elasticsearch(存储+搜索).kibana(展示)三个软件的简称)开源架构,在elasticsearch搭建了 ...

  7. linux date 简单介绍

    用法:date [选项]... [+格式] 或:date [-u|--utc|--universal] [MMDDhhmm[[CC]YY][.ss]] 以给定的格式显示当前时间,或是设置系统日期. - ...

  8. 用JS制作《飞机大作战》游戏_第3讲（玩家发射子弹）-陈远波

    一.公布上一讲中玩家飞机上.下.右移动实现的代码: /*=========================键盘按下事件 keycode为得到键盘相应键对应的数字==================== ...

  9. LINE学习

    LINE Abstract LINE 是一种将大规模网络结点表征成低维向量的算法,可很方便用于网络可视化,结点分类,链路预测,推荐. source code Advantage LINE相比于其他算法 ...

  10. myeclipse10无法weblogic10.3的问题解决方案

    在完成了myec与wl10的基本配置后,启动报如下错误 Parsing Failure in config.xml: java.lang.AssertionError: java.lang.Class ...