前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >web - pwa

web - pwa

原创
作者头像
腾讯IVWEB团队
修改2017-07-19 10:43:12
2.3K0
修改2017-07-19 10:43:12
举报
文章被收录于专栏:腾讯IVWEB团队的专栏

本文作者:ivweb villainthr

该库是应对当前 Google 提出的 PWA 概念而写的,以链式 API 来完成 PWA 相关的操作。

安装

代码语言:txt
复制

npm install web-pwa

// 或者使用 yarn

yarn add web-pwa

代码语言:txt
复制
##  DEMO
 
首先说明一下,我们要完成的目标:
*  注册 sw
*  添加 app.js 的缓存
*  实现推送,并在用户点击后关闭,然后聚焦当前页面
 
整个代码如下:

import SW,{Notify,WebCaches} from 'web-pwa';

window.onload = function(){

代码语言:txt
复制
SW.register('sw.js');
代码语言:txt
复制
var tableName = 'prefetch-cache-v1';
代码语言:txt
复制
WebCaches.table(tableName).addRow('/app.js')
代码语言:txt
复制
.then(res=>{
代码语言:txt
复制
    // res: 成功
代码语言:txt
复制
})
代码语言:txt
复制
Notify.request() // 请求推送权限
代码语言:txt
复制
.then(permission=>{
代码语言:txt
复制
    // 用户同意
代码语言:txt
复制
    Notify.show('villianhr','Hello Pwa')
代码语言:txt
复制
    .onclick(event=>{
代码语言:txt
复制
        event.close(); // 关闭当前 Notification
代码语言:txt
复制
        Notify.focus(); // 聚焦窗口
代码语言:txt
复制
    })
代码语言:txt
复制
})

}

代码语言:txt
复制
##  使用
 
基本使用可以分为三块:
*  SW: 主要处理主线程 JS Service Worker 的相关行为。例如:注册,发送消息等
*  WebCaches: 用来处理 `CacheStorage` 缓存的相关操作。
*  Notify: 根据 `new Notification() `来完成主线程 JS 的消息推送
` import SW,{WebCaches,Notify} from 'web-pwa';`

 (重点推荐使用 WebCaches) 在内部细节中,处理了兼容性和权限请求的问题,这里我们具体落实到场景当中。
 
## SW
 
SW 原意是 `Service Worker`。如果大家还不熟悉,推荐可以参考:[Service Worker 全面进阶](https://www.villainhr.com/page/2017/01/08/Service%20Worker%20全面进阶)。
 
#### 权限申请SW.register('sw.js')
.then(reg=>{})

它返回的是 Promise 对象。

销毁 Service Worker
代码语言:txt
复制

SW.unregister().then(res=>{

代码语言:txt
复制
if(res)console.log('unregisteration, done!');

})

代码语言:txt
复制
 它返回的是 Promise 对象。
 
#### Service Worker 更新
 `SW.update();`

####  消息通信
 
我们了解 Service Worker 是继承 `Web Worker`。在 `Web Worker` 中,我们可以使用` postMessage` 进行通信,那么在 SW(Service Worker)中同样是可以的。
 `SW.postMessage('a new message send to Service Worker');`

 如果你想接受此次 SW 回复的信息,可以直接加上 `Promise` 的写法。

// 接收 SW 回复的信息

SW.postMessage('a new message send to Service Worker')

.then(reply=>{

代码语言:txt
复制
// doSth

})

// SW 回复信息

self.addEventListener('message', function(event){

代码语言:txt
复制
console.log("SW Received Message: " + event.data);
代码语言:txt
复制
event.ports[0].postMessage("SW Says 'Hello back!'");

});

代码语言:txt
复制
 另外,SW 还可以通过 `clients` 挂载的 [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 向 client 发送信息。如果有这种需求,可以直接监听 `message` 事件。SW.onmessage(event=>{
    // 接收 SW 发送的消息
    // event.data
})

推送订阅

当你想要使用 Push 相关的内容时,可以调用 Notify.subscribe(route,key) 方法。如果,你不是很理解 Web Push 的概念,可以参考: Web Push讲解

代码语言:txt
复制

// 下面的 key 根据自己生成进行替换

SW.subscribe('/subscription','BPLISiRYgXzzLY_-mKahMBdYPeRZU-8bFVzgJMcDuthMxD08v0cEfc9krx6pG5VGOC31oX_QEuOSgU5CYJqpzf0');

代码语言:txt
复制
####  WebCaches
 
首先这里有两个概念,一个是 table(表),一个是 row(行)。每一个网站缓存可以有多个表,这完全取决于你自己的结构。该库是` one-off `形式,即,不能使用变量名来缓存表。例如:

var table = WebCaches.table('v1');

table.open(); // 正常执行没问题

table.open(); // 第二次使用无效

代码语言:txt
复制
 后面会介绍一种简便的方法进行简写。
 
缓存处理主要分为两块:
*  **table **
*  addRow: 添加行记录
*  delete: 删除表
*  copy: 复制整个表
*  rename: 重命名整个表
*  open: 打开表

* **row **
* get: 查询行
*  delete: 删除行
*  update: 更新行
 

#### table
 
table 本身就是一个函数,构造格式为:
*  table(cachesName): 打开某个具体的表
*  @param cachesName[String]: 具体打开的表名
 

#### 打开表
 
构造函数为:
*  open(): 执行打开操作 
*  @return: promise WebCaches.table('demo-v1').open()
.then(cache=>{})

添加行

向表中添加具体的缓存行,添加方式有三种:

  • addRow(request)
  • @param request: 可以为 url 或者通过 new Request(url)实例化得来的。

  • addRow(request1,request2,...)
  • @param Array: 里面就是 url/request 的数组。

  • addRow(request,response)
  • @param request: 和上面一样,没啥区别
  • @param response: 需要存储的结构。一般是通过 new Response(res)生成,或者直接通过 fetch().then(response=>{}) 获得的。

重命名/复制表

重命名的格式为:

  • rename(newName)
  • @param newNameString: 表的新名字
  • @return Promise

代码语言:txt
复制
WebCaches.table('old-v1').rename('new-v2')
.then(res=>{
    // success
})
.catch(err=>{
    // fail
})

复制表的格式为:

  • copyTo(targetTable)
  • @param targetTableString: 指定的表名
  • @return Promise

代码语言:txt
复制
// 将 A 表复制给 B
WebCaches.table('A').copyTo('B')
.then(res=>{
    // success
})
.catch(err=>{
    // fail
})

删除表

格式为:

  • delete()
  • @return: Promise
代码语言:txt
复制
 WebCaches.table('A').delete()
.then(res=>{
    // success
})
.catch(err=>{
    // fail
})

row

row 本身也是一个函数:

  • row(request)
  • @param requestRequest||String: 该参数可以为 request,或者 pathname(注意不能带上 origin)。当为 request 时,是直接匹配对应的行记录,而为 pathname时,则是使用 path-to-regexp 的格式,可以匹配多个或者模糊匹配。

代码语言:txt
复制
// 只匹配 js 文件

WebCaches.table(tableName).row('/*.js')
.get().then(res=>{
  console.log(res);
  })

通过 request 匹配:

代码语言:txt
复制

var js = new Request('/app.js');

Caches.table(tableName).row(js)

代码语言:txt
复制
.get().then(res=>{
代码语言:txt
复制
  console.log(res);
代码语言:txt
复制
})
代码语言:txt
复制
####  简写
 
如果每次都 `WebCaches.table.row` 这样调用,会让人觉得比较冗长,那么有没有什么好的办法解决呢?这里提供了一个工具函数 `clone` 用来生成可重复使用的对象。

// 提取 table

var table_v1 = WebCaches.clone('v1');

table_v1().open(); // first,OK

table_v1().open(); // second,OK

代码语言:txt
复制
 然后,可以提取 row

var table_row = WebCaches.clone('v1','/*.js');

table_row().get(); // first, OK

table_row().get(); // second, OK

代码语言:txt
复制
####  删除行

// 删除所有 js 文件

WebCaches.table(tableName).row('/*.js')

.delete()

.then(()=>{

代码语言:txt
复制
// success

})

.catch(err=>{

代码语言:txt
复制
// fail

})

代码语言:txt
复制
####  更新行

fetch('/')

.then(res=>{

// 更新根目录文件

WebCaches.table(tableName).row('/')

.update(res)

.then(()=>{

代码语言:txt
复制
WebCaches.table(tableName).row('/').get()
代码语言:txt
复制
.then(console.log.bind(console))

})

})

代码语言:txt
复制
### Notify
 
`Notify` 提供了 `Notification` 相关的 API。其主打的是链式调用,不需要过多的关注 `Notification` 内部细节。
 
#### 权限申请notify.request()
.then(permission=>{
    // permission === "granted"
    // permission === "denied"
    // permission === "default"
})

消息推送

使用消息推送的时候,可以不用嵌套在 request()

面,它内部已经做了权限的处理。

代码语言:txt
复制

// 纯文字版

Notify.show('demo','this is a demo')

// 带 Icon

Notify.show('demo','this is a demo','demo.png')

代码语言:txt
复制
  #### 推送后自动关闭Notify.show('demo','this is a demo')
.hide(3000); // 3s 后自动关闭

推送点击
代码语言:txt
复制

Notify.show('demo','this is a demo')

.onclick(e=>{

代码语言:txt
复制
e.target.close();

});

代码语言:txt
复制
 Notify 还提供了其它的事件监听
*  onclick
*  onclose
*  onshow
*  onerror
 
上面这些方法都可以进行链式调用。

Notify.show('demo','this is a demo')

.onclick(event=>{})

.onclose(event=>{})

.onshow(event=>{})

代码语言:txt
复制
 用户点击推送这一行为,我们可以加上额外的处理,例如,打开页面,聚焦页面等。Notify.show('demo','this is a demo')
.onclick(event=>{
    event.target.close();
    // 聚焦页面
    Notify.focus();
    // 打开新的页面
    Notify.open('

License

MIT

Author

  • author: villainhr
  • email: villainthr@gmail.com

原文链接:http://www.ivweb.io/topic/58dba417db35a9135d42f844

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装
    • 销毁 Service Worker
      • 推送订阅
        • 添加行
          • 重命名/复制表
            • 删除表
              • row
                • 消息推送
                  • 推送点击
                    • License
                      • Author
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档