Web SDK 集成指南

最新更新:2024-04-12

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

快速測試

Engagelab WebPush 整合示範及範例

集成前準備

  • 準備一個能訪問的 https web 服務域名,集成後的頁面需在該域名下進行測試與調試。web 離線推播不支持在地調試、不支持 http。
  • 訪問 Engagelab WebPush,在【集成設定】-【 網站網域名稱】頁面,填寫 https web 服務域名。

截屏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>
          <script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>

        
此代碼塊在浮窗中顯示

引入該 js 後,就可以使用 Window 上的全局對象 MTpushInterface。

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的最大作用域。

        
此代碼塊在浮窗中顯示

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() 調用時會請求通知權限
    },
  });

        
此代碼塊在浮窗中顯示

更多 API

其他 API 的使用方法請參考接口文檔:Web SDK API

運行 demo

壓縮包附帶的 example 是一個 API 演示例子。你可以直接在瀏覽器運行測試。

在文档中心打开
icon
聯繫銷售