Web SDK 集成指南

本文是 MTpush Web SDK 标准的集成指南文档。

各通道海外用户支持说明

通道类型	其他地区用户	中国大陆用户	说明
EngageLab通道	支持触达	支持触达	SDK默认支持
W3C通道	支持触达	支持触达	/

快速测试

Engagelab WebPush 集成demo及示例

集成前准备

准备一个能访问的 https web 服务域名，集成后的页面需在该域名下进行测试与调试。web 离线推送不支持本地调试、不支持 http。
访问 Engagelab WebPush，在【集成设定】-【网站域名】页面，填写 https web 服务域名。注意一个 appkey 只能绑定一个域名。

截屏2022-11-29 11.08.16.png

产品说明

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>

此代码块在浮窗中显示

引入该 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() 调用时会请求通知权限
    },
  });