Web SDK 集成指南
最新更新:2024-04-12
本文是 MTpush Web SDK 標準的集成指南文檔。
快速測試
集成前準備
- 準備一個能訪問的 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>
此代碼塊在浮窗中顯示
引入該 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。