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
Generate user_str
It is recommended to use browser fingerprinting to generate a unique user_str
to prevent invalid user registrations:
// Omitted: Canvas, WebGL, and plugin fingerprint collection code (unchanged)
const visitorId = getFingerprint();
console.log('user_str', visitorId);
Example Code
// Register event listeners before initialization
// Callback when the Aurora channel disconnects
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
// Receive push messages (Web Push, browser vendor channels)
MTpushInterface.onMsgReceive((msgData) => {
// msgData structure: {data:{xxx},type:0} type:0 is Aurora channel, 1 is system channel
console.log("Received push message:", msgData);
});
// Push initialization
MTpushInterface.init({
appkey: "", // Required, see above for app info
user_str: visitorId, // Required, user identifier
fail(err) {
console.log("Online push setup failed", err);
},
success(data) {
console.log("Online push setup successful", data);
},
webPushcallback(code, tip) {
console.log("User status code and message", code, tip);
},
swUrl: '', // Default: "/sw.min." + sdkEnv.version + ".js". This config is the server worker file path, which must be under the current domain and determines the worker's scope.
canGetInfo(data) {
// At this point, notification config data can be retrieved. After this callback, RegId can be obtained.
console.log(data); // Related config info
console.log("Obtained RegId", MTpushInterface.getRegistrationID());
},
custom: (fuc) => {
// When using custom prompt settings, manually call fuc() to request notification permissions. The permission request function is only available via 'custom'.
// fuc() triggers the notification permission request.
},
});
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.