谷歌都在用 PWA 你还不用?

本文作者:ivweb villainthr

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

如果想对不同的路由做相同的监听,可以直接传入数组,或者通过,连接不同的内容。

get('/path','/demo',(event,req)=>{
    //
}) 

get(['/path','/demo'],(event,req)=>{
    // 
})

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

缓存文件

缓存的方法也绑定在 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

原文链接:http://www.ivweb.io/topic/592ec04009439b0640aefbc0

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏琼东

分布式消息总线,基于.NET Socket Tcp的发布-订阅框架之离线支持,附代码下载

一、分布式消息总线以及基于Socket的实现      在前面的分享一个分布式消息总线,基于.NET Socket Tcp的发布-订阅框架,附代码下载一文之中给...

3157
来自专栏pangguoming

AngularJs HTTP响应拦截器实现登陆、权限校验

$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到...

3709
来自专栏Ryan Miao

AngularJS中使用service,并同步数据

service是单例对象,在应用中不同代码块之间共享数据。 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1...

34810
来自专栏c#开发者

Asp.net webform scaffolding结合Generic Unit of Work & (Extensible) Repositories Framework代码生成向导

Asp.net webform scaffolding结合Generic Unit of Work & (Extensible) Repositories Fr...

2665
来自专栏desperate633

浅谈数据库查询优化的几种思路

应尽量避免全表扫描,首先应考虑在 where 及 order by ,group by 涉及的列上建立索引

751
来自专栏iMySQL的专栏

MySQL FAQ 系列 : 如何安全地关闭 MySQL 实例

本文分析了 mysqld 进程关闭的过程,以及如何安全、缓和地关闭 MySQL 实例,对这个过程不甚清楚的同学可以参考下。

1690
来自专栏杨建荣的学习笔记

物化视图prebuilt和在线重定义 (r10笔记第25天)

数据迁移中有一种解决方案很有亮点,如果表的数据量大,迁移涉及的表不多,同时对于维护时间有要求的情况下,物化视图的prebuilt方式就是一种很不错的选择。 大体...

3304
来自专栏张秀云的专栏

MySQL 压缩解决方案(一)

本文描述 mysql 压缩的使用场景和解决方案,包括压缩传输协议、压缩列解决方案和压缩表解决方案。

2.2K1
来自专栏令仔很忙

Mybaits深入了解(一)----带你入门

MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google ...

601
来自专栏跟着阿笨一起玩NET

C# 使用SqlBulkCopy类批量复制大数据

特别注意  sqlbulkcopy.ColumnMappings.Add(dt.Columns[i].ColumnName, dt.Columns[i].Col...

421

扫码关注云+社区