Web SDK 集成指南

本文是 MTpush Web SDK 標準的集成指南文檔。

快速測試

集成前準備

準備一個能訪問的 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 初始化

// 請在初始化前註冊事件監聽 // Engagelab 通道斷開連接時的回調 MTpushInterface.mtPush.onDisconnect(function () { console.log("onDisconnect"); }); //得到推播訊息(web推播，瀏覽器廠商通道) MTpushInterface.onMsgReceive((msgData) => { //msgData數據結構{data:{xxx},type:0} type:0是 Engagelab 通道，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" 此配置項目為serverworker檔案位址，域名必須為目前域名，且路徑決定serverworker作用域。 canGetInfo(data) { //此時可以得到通知的一些配置數據，在此回調函數之後可以得到RegId console.log(data); //相關配置信息 console.log("得到RegId", MTpushInterface.getRegistrationID()); }, custom: (fuc) => { //當使用自訂提示配置時，需手動調用fuc()來請求通知權限。隻能通過custom得到請求通知權限函數。 //fuc() 調用時會請求通知權限 }, });

            // 請在初始化前註冊事件監聽
  // Engagelab 通道斷開連接時的回調
  MTpushInterface.mtPush.onDisconnect(function () {
    console.log("onDisconnect");
  });
  //得到推播訊息(web推播，瀏覽器廠商通道)
  MTpushInterface.onMsgReceive((msgData) => {
    //msgData數據結構{data:{xxx},type:0} type:0是 Engagelab 通道，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" 此配置項目為serverworker檔案位址，域名必須為目前域名，且路徑決定serverworker作用域。
    canGetInfo(data) {
      //此時可以得到通知的一些配置數據，在此回調函數之後可以得到RegId
      console.log(data); //相關配置信息
      console.log("得到RegId", MTpushInterface.getRegistrationID());
    },
    custom: (fuc) => {
      //當使用自訂提示配置時，需手動調用fuc()來請求通知權限。隻能通過custom得到請求通知權限函數。
      //fuc() 調用時會請求通知權限
    },
  });