初识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. MongoDB -的连接和使用

    MongoDB 的 连接使用 在节我们将讨论 MongoDB 的不同连接方式. 启动 MongoDB 服务 在前面的,我们已经讨论了如何启动 MongoDB 服务,你只需要在 MongoDB 安装目录 ...

  2. ubuntu16.4+nginx+uwsgi+Django 部署上线

    Nginx概述 Nginx是一款轻量级的HTTP服务器,采用事件驱动和异步非阻塞处理方式框架,这让其具有极好的IO性能,市场用于服务端的反向代理和负载均衡 Nginx优点 高并发连接:官方测试Ngin ...

  3. 【代码笔记】iOS-字体从右向左滚动

    一,效果图. 二,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup ...

  4. Postman Google浏览器离线安装Postman插件

    Google浏览器离线安装Postman插件 by:授客 QQ:1033553122 解决无法通打开谷歌web商店安装Postman插件的问题,文章参考网络. 测试环境:ChromeStandalon ...

  5. AIDL安卓接口定义语言

    Android    Interface Definition  Language简称AIDL翻译为 :安卓       接口      定义        语言 AIDL:进程间通信.Android ...

  6. Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,将全部来与官网 我猜去全部机翻+个人 ...

  7. elasticsearch DSL查询

    总结一个DSL的用法吧,语法网上查去,只记录一点心得,也是研究了半天,太麻烦了 先附上python代码 #!/usr/bin/env python # _*_ coding:utf-8 _*_ fro ...

  8. 浅谈C#中的 async await 以及对线程相关知识的复习

    C#5.0以后新增了一个语法糖,那就是异步方法async await,之前对线程,进程方面的知识有过较为深入的学习,大概知道这个概念,我的项目中实际用到C#异步编程的场景比较少,就算要用到一般也感觉T ...

  9. How to Be Assertive Asking for What You Want Firmly and Fairly

    What Is Assertiveness? It's not always easy to identify truly assertive behavior. This is because th ...

  10. 64位Windows的Dos中取消了edit命令

    前段时间在玩dos命令行的时候,用copy con创建了txt文件后想对其进行编辑,然后我又不想用记事本,所以去网上找命令行中对文本文件进行编辑的命令(纯属想装B),结果看到了edit命令. 一敲,就 ...