Web SDK Chrome Extension Version ダウンロードリンク提供 # 統合ガイド
各チャネルの海外ユーザーに対するサポート説明
| チャネルタイプ | その他の地域のユーザー | 中国本土のユーザー | 備考 |
|---|---|---|---|
| EngageLab | サポート | サポート | SDKによりデフォルトでサポートされています |
| W3C | サポート | サポート | / |
クイックテスト
Engagelab WebPush統合デモンストレーションと例
統合前の準備
- テストとデバッグを行うアクセシブルなhttpsウェブサービスのドメイン名を準備します。web pushはローカルデバッグまたは非https環境での動作をサポートしていません。
- Engagelab WebPushを訪問し、統合設定 -> webでウェブサイトドメインを設定し、準備したhttpsウェブサービスドメインを入力します。

ヒント
この記事は、MTpush Web SDKの標準的な統合ガイド文書です。
説明
Web SDKは、各ブラウザのカーネル通知とwebsocketに基づいてウェブアプリケーション用のプッシュ開発フレームワークを提供し、簡潔なAPIインターフェースを提供することで、サードパーティアプリケーションが迅速にプッシュ機能を統合できるようにします。ブラウザカーネル通知は、Edge、Chrome、Safari、Firefox、Operaなどの主流のブラウザをサポートし、websocketはほとんどの主流のブラウザをサポートしています。
EngageLab WebPushサービスはPWAプッシュ通知をサポートしています。EngageLab WebPushが提供するWeb SDKを使用して、PWAアプリケーションにWeb Push機能を統合し、ドキュメントに記載されているサンプルコードに従ってサービスワーカーを登録し、Web Push機能を初期化する必要があります。統合が完了すると、EngageLab WebPush APIを使用して、PWAアプリケーションのユーザーにプッシュ通知を送信できます。
詳細はドキュメントを参照してください
主なシーン:
通知とカスタムメッセージ。
統合された圧縮パッケージの内容
- example
- MTpush SDKの基本的な使用方法を示すウェブページです。参考として使用できます。
アプリケーション情報の取得
コンソールでアプリケーションを作成します。アプリケーションの作成後、自動的にAppKeyが生成され、アプリケーションを識別します。詳細については、アプリケーション設定 を参照してください。
SDKの統合
Engagelab WebPushを訪問し、SDKをダウンロードします。ウェブページでsdk jsファイルを次のように設定します:
<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
sdk jsファイルを統合した後、Window上のグローバルオブジェクトMTpushInterfaceを使用できます。
ヒント
パッケージにはsw.xxx.jsが含まれています。このファイルはサービスワーカーファイルであり、メッセージを受信するために使用されます。
SDKはデフォルトでこのファイルをルートディレクトリからロードします。
サービスワーカーの最大スコープはワーカーの場所です(つまり、スクリプトsw.jsが/js/sw.jsにある場合、デフォルトでは/js/以下のURLのみを制御できます)。
したがって、可能な限りデフォルトの設定を使用し、ウェブサイトのルートディレクトリに配置してください。
特別な状況があり、サードパーティのCDNに保存する必要がある場合は、サーバー側でService-Worker-Allowedヘッダーを使用して、ワーカーの最大スコープを指定してください。
SDKの初期化
user_strの生成
無効なユーザー登録を防ぐため、ブラウザのフィンガープリントを使用して一意のuser_strを生成することを推奨します:
// 省略:Canvas、WebGL、およびプラグインのフィンガープリント収集コード(変更なし)
const visitorId = getFingerprint();
console.log('user_str', visitorId);
サンプルコード
// Register event listeners before initialization.
// Callback when the Aurora channel disconnects.
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
// Receive push messages (Web Push and browser vendor channels).
MTpushInterface.onMsgReceive((msgData) => {
// msgData structure: { data: { xxx }, type: 0 }; type 0 is the Aurora channel, and type 1 is the system channel.
console.log("Received push message:", msgData);
});
function initWebPush() {
const appkey = "your_appkey";
const userStr = visitorId;
if (!(appkey && userStr)) {
console.log("appkey and user_str cannot be empty");
return;
}
// Push initialization.
MTpushInterface.init({
appkey: appkey,
user_str: userStr,
fail(data) {
console.log("Online push setup failed", data);
},
success(data) {
console.log("Online push setup successful", data);
},
webPushcallback(code, tip) {
console.log("Status code and message", code, tip);
},
canGetInfo(data) {
// RegId is available here, and initialization config data can also be read from data.
console.log("Initialization config", data);
console.log("Obtained RegId", MTpushInterface.getRegistrationID());
},
custom: (requestPermission) => {
// For custom prompt settings, call requestPermission during an appropriate user action to request notification permission.
document.getElementById("subscribe")?.addEventListener("click", () => {
if (Notification.permission === "default") {
requestPermission();
} else if (Notification.permission === "denied") {
console.log("Notification permission is denied and cannot be requested");
} else {
console.log("Notification permission has already been granted");
}
});
},
});
}
initWebPush();
その他のAPI
他のAPIの使用方法の詳細については、インターフェースドキュメントを参照してください:Web SDK API。










