Integration Guide
Support Description for overseas users of each channel
Channel type | Users in other regions | Mainland China users | Note |
---|---|---|---|
EngageLab | Support | Support | Supported by SDK by default |
W3C | Support | Support | / |
Quick test
Engagelab WebPush integration demonstration and examples
Pre-integration preparation
1、Prepare a domain name for an accessible https web service where testing and debugging will take place. web push does not support local debugging or working under non-https.
2、Visit Engagelab WebPush, set the website domain in Integration Settings -> web and fill in the prepared https web service domain.
Tips
This article is a standard integration guide document for the MTpush Web SDK.
Description
The Web SDK provides a push development framework for web applications based on the kernel notification and websocket of each browser, and provides a concise API interface to facilitate third-party applications to quickly integrate push functions. Browser kernel notification supports mainstream browsers such as Edge, Chrome, Safari, Firefox, Opera, and websocket supports most mainstream browsers.
Main scenes:
Notifications and customize messages.
integrates the contents of the compressed package
- example
- This is a web page that demonstrates the basic usage of the MTpush SDK. It can be used as a reference.
Obtaining Application Information
Create an application in the console. After the application is created, an AppKey is automatically generated to identify the application. For more information, see application Settings .
Integrate the SDK
Visit Engagelab WebPush and download the SDK.Config the sdk js file like below in the web page:
<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
After the sdk js file is integrated, the global object MTpushInterface on the Window can be used.
tips
The package includes sw.xxx.js. This file is a service worker file and is used to receive messages.
The SDK will load this file from the root directory by default.
The largest scope of service worker is the location of the worker (in other words, if the script sw.js is located in /js/sw.js, it can only control the URL under /js/ by default).
So please use the default configuration as much as possible and place it in the root directory of the website.
If there are special circumstances and it is stored in a third-party CDN, please use the Service-Worker-Allowed header on the server side to specify the maximum scope of the worker.
The SDK initialization
// Register event listeners before initialization
// Callback when Engagelab/**Mtpush** Channel disconnected
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
//Get push messages (web push, browser vendor channel)/"Callback function when receive the message from web push, browser channel"
MTpushInterface.onMsgReceive((msgData) => {
//msgData Data structure{data:{xxx},type:0} type:0 is the engagelab channel and 1 is the system channel
console.log("Get push Messages:", msgData);
});
// Push initialization
MTpushInterface.init({
appkey: "", // Required. See above for application information
user_str: "adminDemo", // Required. User identifier, which identifies the user
fail(err) {
console.log("Failed to create an online push", err);
},
success(data) {
console.log("The online push is created successfully. Procedure", data);
},
webPushcallback(code, tip) {
console.log("The status code and prompt obtained by the user", code, tip);
},
swUrl: '', //The default **like this:**"/sw.min." + sdkEnv.version + ".js" ,This configuration item is the serverworker file address, the domain name must be the current domain name, and the path determines the serverworker scope.
canGetInfo(data) {
//Some configuration data that can be notified at this point is available to RegId after this callback function
console.log(data); //Related Configuration Information
console.log("get the RegId", MTpushInterface.getRegistrationID());
},
custom: (fuc) => {
//When using a custom prompt configuration, you need to manually call fuc() to request notification rights/**permission**. The request notification permission function can only be obtained through custom.
//fuc() Notification rights are requested when invoked/**it will get notification permission when invoked**
},
});
More API
For details about how to use other apis, see the interface documentation:Web SDK API.
Run the demo
The example in the package is an API demo. You can run it directly in your browser for test.