Web SDK 集成指南
最新更新:2024-04-12
本文是 MTpush Web SDK 标准的集成指南文档。
各通道海外用户支持说明
通道类型 | 其他地区用户 | 中国大陆用户 | 说明 |
---|---|---|---|
EngageLab通道 | 支持触达 | 支持触达 | SDK默认支持 |
W3C通道 | 支持触达 | 支持触达 | / |
快速测试
集成前准备
- 准备一个能访问的 https web 服务域名,集成后的页面需在该域名下进行测试与调试。web 离线推送不支持本地调试、不支持 http。
- 访问 Engagelab WebPush,在【集成设定】-【 网站域名】页面,填写 https web 服务域名。注意一个 appkey 只能绑定一个域名。
产品说明
Web SDK 为 web 应用提供一个基于各个浏览器内核通知和 websocket 的推送开发框架,对外提供较为简洁的 API 接口,方便第三方应用快速集成推送功能。浏览器内核通知支持 Edge、Chrome、 Safari 、Firefox 、Opera 等主流浏览器,websocket 支持绝大部分主流浏览器。
主要场景:
通知推送消息,自定义推送消息。
jpush-p-web-example.zip 集成压缩包内容
- example
- 是一个 web 页面,通过这个演示了 MTpush SDK 的基本用法,可以用来做参考。
获取应用信息
在控制台上创建应用,创建成功后自动生成 AppKey 用以标识该应用,详情参考 应用设置文档。
SDK 接入
进入 控制台,下载 SDK,在每个页面接入 js:
<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
此代码块在浮窗中显示
tips
随包包含sw.xxx.js该文件是service worker文件,用于接收消息。
SDK默认会从根目下加载该文件。
service worker 最大的作用域是worker所在位置,(按句话说,如果脚本sw.js位于/js/sw.js中,默认情况下它只能控制/js/下的url)。
所以请尽可能使用默认配置,放在网站根目录。
如果有特殊情况,存放在第三方cdn,请在服务端使用 Service-Worker-Allowed 标头指定 worker的最大作用域。
随包包含sw.xxx.js该文件是service worker文件,用于接收消息。
SDK默认会从根目下加载该文件。
service worker 最大的作用域是worker所在位置,(按句话说,如果脚本sw.js位于/js/sw.js中,默认情况下它只能控制/js/下的url)。
所以请尽可能使用默认配置,放在网站根目录。
如果有特殊情况,存放在第三方cdn,请在服务端使用 Service-Worker-Allowed 标头指定 worker的最大作用域。
此代码块在浮窗中显示
引入该 js 后,就可以使用 Window 上的全局对象 MTpushInterface。
SDK 初始化
// 请在初始化前注册事件监听
// 极光通道断开连接时的回调
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
//得到推送消息(web推送,浏览器厂商通道)
MTpushInterface.onMsgReceive((msgData) => {
//msgData数据结构{data:{xxx},type:0} type:0是极光通道,1是系统通道
console.log("得到推送消息:", msgData);
});
// 推送初始化
MTpushInterface.init({
appkey: "", // 必填,详见上文获取应用信息
user_str: "adminDemo", // 必填,用户识别符,用来标识用户
fail(err) {
console.log("在线推送创建失败", err);
},
success(data) {
console.log("在线推送创建成功", data);
},
webPushcallback(code, tip) {
console.log("用户得到的状态码及提示", code, tip);
},
swUrl: '', //默认 "/sw.min." + sdkEnv.version + ".js"。该配置项为server worker文件地址,域名必须为当前域名,且路径决定server worker作用域。
canGetInfo(data) {
//此时可以得到通知的一些配置数据,在此回调函数之后可以得到RegId
console.log(data); //相关配置信息
console.log("得到RegId", MTpushInterface.getRegistrationID());
},
custom: (fuc) => {
//当使用自定义提示配置时,需手动调用fuc()来请求通知权限。只能通过custom得到请求通知权限函数。
//fuc() 调用时会请求通知权限
},
});
// 请在初始化前注册事件监听
// 极光通道断开连接时的回调
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
//得到推送消息(web推送,浏览器厂商通道)
MTpushInterface.onMsgReceive((msgData) => {
//msgData数据结构{data:{xxx},type:0} type:0是极光通道,1是系统通道
console.log("得到推送消息:", msgData);
});
// 推送初始化
MTpushInterface.init({
appkey: "", // 必填,详见上文获取应用信息
user_str: "adminDemo", // 必填,用户识别符,用来标识用户
fail(err) {
console.log("在线推送创建失败", err);
},
success(data) {
console.log("在线推送创建成功", data);
},
webPushcallback(code, tip) {
console.log("用户得到的状态码及提示", code, tip);
},
swUrl: '', //默认 "/sw.min." + sdkEnv.version + ".js"。该配置项为server worker文件地址,域名必须为当前域名,且路径决定server worker作用域。
canGetInfo(data) {
//此时可以得到通知的一些配置数据,在此回调函数之后可以得到RegId
console.log(data); //相关配置信息
console.log("得到RegId", MTpushInterface.getRegistrationID());
},
custom: (fuc) => {
//当使用自定义提示配置时,需手动调用fuc()来请求通知权限。只能通过custom得到请求通知权限函数。
//fuc() 调用时会请求通知权限
},
});
此代码块在浮窗中显示
更多 API
其他 API 的使用方法请参考接口文档:Web SDK API。