谷歌都在用 PWA 你还不用?

sw-router

PWA 全称是 Progressive Web Apps。它的目的就是让你的网页越来越快。主要内容可以参考:PWA-cookbook。不过,它上手的难度也是有的。它本身是基于 worker 而发展出 Service Worker,所以,要使用 PWA 你就必须学会如何使用 SW,然后,SW 里面还有很多坑要踩。而其中最大的坑就是,如何处理文件资源的缓存,这个一直都是 CS 领域的心病。当然,在 SW 中,这也是有点困难的。不过,为了大家能更快的掌握 SW 这里,鄙人写了一个关于处理 fetch 事件的路由分发库 sw-router。

这里也主要介绍一下它。

下载

npm install sw-router

由于是在 SW 中使用,所以一般的 CMD/ES6 模块 写法是不能用的。推荐是直接到 node_modules 找到 sw-router 文件夹,复制其中的 index.js 到你的 sw.js 的工作目录。然后直接引入:

importScripts('./index.js');

使用

使用 SW 缓存功能其实很简单,你不需要写啥 installsyncactivate事件。因为这些和你要操作的缓存都不是直接关系。最简单就是直接监听 fetch 即可。

self.addEventListener('fetch', (event)=>{    // doSth()
});

不过,如果你要做的是比较大业务,单单使用一个 fetch 就有点 “势单力薄”。所以,本库还是基于最小业务原则的出发点来进行创作的。

通过导入之后,sw-router 会 SW 作用域下绑定一个 Router 对象。接着,你就可以在该对象上绑定相关的路由处理。

路由绑定

利用 Router 对象进行路由绑定和 express router 类似,所以上手起来也不是特别大的问题:

Router.get('/*.js',(event,req)=>{  console.log('to save js files');  // doSth()
})
.get('/*.png',(event,req)=>{  console.log('capture PNG:' + req.toString());  // doSth()
})
.get('/.*',(event,req)=>{  console.log('capture others request');  // doSth()
})

它以链式的方法,来提供 restful 形式的路由注册。常用方法有:

  • all: 监听所有方法,不论是啥,get/post/put/patch。
  • get: 监听指定 get 方法的请求。
  • post: 监听指定 post 方法的请求。
  • patch: 监听指定 patch 方法的请求。
  • put: 监听指定 put 方法的请求。

使用格式如下(5 种方法使用都一样):

Router.get('/*.js',(event,req)=>{
 ...
})

其中,event,req 参数分别为:

  • event: 为 fetch 方法的回调参数。
self.addEventListener('fetch', (event)=>{    // doSth()
});
  • req: 等同于 event.request

当然,这里不仅仅只提供了路由绑定的功能,还提供了缓存的做法。

缓存文件

缓存的方法也绑定在 Router 对象上,它的使用如下:

Router.get('/*.js',(event,req)=>{  console.log('to save js files');
  Router.save('test',event);
})

它的格式为:

Router.save(cacheName, event);
  • cacheName: 为你缓存文件方式的文件夹的名字。你也可以理解为数据库中的 table。只是为了区分缓存文件的一个目录而已。如果你不写的话,默认为 defaultName。所以,使用方式也可以为:
Router.get('/*.js',(event,req)=>{  console.log('to save js files');
  Router.save(event);
})
  • event: 就是你注册路由的 event 参数。直接传进去就好。

上面,大致介绍了路由注册这一块内容,但是,如果使用你注册好的路由分发系统呢?

投入生产

路由系统真正接入 SW 是通过 watch 方法来进行监听的。具体使用为:

Router.get('/*.js',(event,req)=>{  console.log('save js files');
  Router.save('v1',event);
})
.get('/*.png',(event,req)=>{  console.log('capture PNG:' + req.toString());
  Router.save('v1',event);
})
.get('/.*',(event,req)=>{  console.log('capture all request');
})

self.addEventListener('fetch', function(event) { // start to listen
  Router.watch(event);
});

注意,watch 只能传入 event 参数,其它的就不要乱传了。

英文文档

sw-router

反馈

如果在使用库的同时,遇到什么问题,可以去 issue 提一提。鄙人一定会及时处理并回复。

作者

villainhr

License

ISC

原文发布于微信公众号 - 前端小吉米(villainThr)

原文发表时间:2017-05-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

Spring Boot REST API错误处理指南

本来是5号来的文章,无奈最近准备换工作,一直拖着没写,今天搜索偶然看见有人已经翻译完了,由于时间原因这次就直接转载下吧,现附上英文原文及相关信息,最后再附上译文...

742
来自专栏我和PYTHON有个约会

爬虫 0030~ requests利刃出鞘

requests第三方封装的模块,通过简化请求和响应数据的处理,简化繁琐的开发步骤和处理逻辑、统一不同请求的编码风格以及高效的数据处理特性等而风靡于爬虫市场。

721
来自专栏腾讯IVWEB团队的专栏

谷歌都在用 PWA 你还不用?

PWA 全称是 Progressive Web Apps。它的目的就是让你的网页越来越快。主要内容可以参考:PWA-cookbook。不过,它上手的难度也是有的...

2570
来自专栏技术记录

通讯协议序列化解读(一) Protobuf详解教程

前言:说到JSON可能大家很熟悉,是目前应用最广泛的一种序列化格式,它使用起来简单方便,而且拥有超高的可读性。但是在越来越多的应用场景里,JSON冗长的缺点导致...

794
来自专栏CSDN技术头条

Spring Data REST 与 Spring RestTemplate 实战详解

这篇分为两部分内容进行介绍(Spring Data REST 和 Spring RestTemplate)。我之前有一篇文章完整的介绍了 HTTP 协议的内容,...

6455
来自专栏喵了个咪的博客空间

phalapi-进阶篇2(DI依赖注入和单例模式)

#phalapi-进阶篇2(DI依赖注入和单例模式)# ? ##前言## 先在这里感谢phalapi框架创始人@dogstar,为我们提供了这样一个优秀的开源框...

3095
来自专栏java一日一条

RESTful API 最佳实践

在参考了GitHub API设计和大量博客文章后总结了一下RESTful API的设计,分享如下。想要更好的理解RESTful API首先需要理解如下概念:

922
来自专栏狐狸

3. 爬虫框架Clawler 爬取优酷电影名

之前我们都是使用HtmlAgilityPack类库来进行页面的爬取,今天我们使用一个爬虫框架。 框架名称:Clawler 参考地址

844
来自专栏Java呓语

代理模式(控制对象访问)

最近在读 Android Binder 部分的源码,之前三三两两的读过一些片段。但总是感觉理解的不深刻,在读源码的过程中看到了代理模式的应用,那便把代理模式单独...

701
来自专栏大前端开发

微信小程序中使用Promise进行异步流程处理

我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理。比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间(比如一个很大的循环...

694

扫码关注云+社区