0.0.38 • Published 4 years ago
@efox/webpushwebpushwebpushpppp v0.0.38
efox-webpush
webpush sdk
安装
npm i @efox/webpush
or
yarn add @efox/webpush
使用
import WebPush from '@efox/webpush'
实例化
const wp = new WebPush({
applicationServerPublicKey: '',
swjsurl: `/sw.js?v=${new Date() * 1}`, // 格外的sw.js 需要项目方提供,这里是填 sw.js 路径 sw.js 内容见下文
appid: '', // 系统标识
uid: 50015308, // 业务用户uid
lang: 'zh', // 语言
online: 1, // 在线状态,0:离线,1:在线,@see Online
env: 'test' // test 测试环境 pro 生产环境 也可以为带 http的字符串,直接配host
})
初始化
wp.init().then((resp)=> {
console.log('after init', resp)
wp.subscribeUser(wp.getPushKey()) // 订阅
})
API
new WebPush(options)
- option - object , see bellow
Methods
wp = new WebPush(options)
init(): Promise
注册service worker进程,若init时候没传applicationServerPublicKey,将会向webpush平台请求applicationServerPublicKey
wp.init().then((resp) => {
// resp.code: 0 成功 非0 失败
// todo after init
})
getSubscribedStatus (): boolean
获取订阅状态
getPushKey (): string
获取push key
subscribeUser (publicKey: string):Promise
订阅 需要传 push key
setUserLang (lang: string): Promise
设置用户使用的语言
wp.subscribeUser(this.wp.getPushKey()).then(resp => {
console.log('after subscribeUser', resp)
if (resp.code === 0) {
this.isSubscribed = true
}
})
unsubscribeUser ():Promise
取消订阅
wp.unsubscribeUser().then(resp => {
console.log('after unsubscribeUser', resp)
if (resp.code === 0) {
this.isSubscribed = false
}
})
setUserOnline (online: number = 0): Promise
用户退出登录 解除绑定关系
项目支持
项目本身要提供一个Service Worker 脚本,并把脚本地址在实例化WebPush类时候传入。
Service Worker 内容可以是自定义的 或者参考如下:
console.log('web push service worker init', self)
self.addEventListener('push', function (event) {
console.log('[Service Worker] Push Received.')
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`, self.registration)
const maxVisibleActions = Notification.maxActions
const title = event.data.text()
const options = {
body: 'test body',
icon: 'images/icon.png',
badge: 'images/badge.png',
'actions': [
{ 'action': 'yes', 'title': 'Yes', 'icon': 'images/icon.png' },
{ 'action': 'no', 'title': 'No', 'icon': 'images/icon.png' }
]
}
if (maxVisibleActions < 4) {
options.body = `This notification will only display ` +
`${maxVisibleActions} actions.`
} else {
options.body = `This notification can display up to ` +
`${maxVisibleActions} actions.`
}
const notificationPromise = self.registration.showNotification(title, options)
event.waitUntil(notificationPromise)
})
self.addEventListener('notificationclick', function (event) {
console.log('[Service Worker] Notification click Received.', event)
if (event.action === 'yes') {
event.notification.close()
console.log('click yes')
} else if (event.action === 'no') {
event.notification.close()
console.log('click no')
} else {
event.waitUntil(self.clients.openWindow('https://developers.google.com/web/'))
}
})
self.importScripts('https://static.moschat.com/web_static/service-worker.js')
相关资料
npm 发布
npm publish --access public
0.0.38
4 years ago