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はほとんどの主流のブラウザをサポートしています。
主なシーン:
通知とカスタムメッセージ。
統合された圧縮パッケージの内容
- example
- MTpush SDKの基本的な使用方法を示すウェブページです。参考として使用できます。
アプリケーション情報の取得
コンソールでアプリケーションを作成します。アプリケーションの作成後、自動的にAppKeyが生成され、アプリケーションを識別します。詳細については、アプリケーション設定 を参照してください。
SDKの統合
Engagelab WebPushを訪問し、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>
このコードブロックはフローティングウィンドウ内に表示されます
sdk jsファイルを統合した後、Window上のグローバルオブジェクトMTpushInterfaceを使用できます。
ヒント
パッケージにはsw.xxx.jsが含まれています。このファイルはサービスワーカーファイルであり、メッセージを受信するために使用されます。
SDKはデフォルトでこのファイルをルートディレクトリからロードします。
サービスワーカーの最大スコープはワーカーの場所です(つまり、スクリプトsw.jsが/js/sw.jsにある場合、デフォルトでは/js/以下のURLのみを制御できます)。
したがって、可能な限りデフォルトの設定を使用し、ウェブサイトのルートディレクトリに配置してください。
特別な状況があり、サードパーティのCDNに保存する必要がある場合は、サーバー側でService-Worker-Allowedヘッダーを使用して、ワーカーの最大スコープを指定してください。
パッケージには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);
// 省略:Canvas、WebGL、およびプラグインのフィンガープリント収集コード(変更なし)
const visitorId = getFingerprint();
console.log('user_str', visitorId);
このコードブロックはフローティングウィンドウ内に表示されます
サンプルコード
// 初期化する前にイベントリスナーを登録
// オーロラチャネルが切断されたときのコールバック
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
// プッシュメッセージを受信(Web Push、ブラウザベンダーチャネル)
MTpushInterface.onMsgReceive((msgData) => {
// msgData構造:{data:{xxx},type:0} type:0はオーロラチャネル、1はシステムチャネル
console.log("プッシュメッセージを受信:", msgData);
});
// プッシュの初期化
MTpushInterface.init({
appkey: "", // 必須、上記のアプリ情報を参照
user_str: visitorId, // 必須、ユーザー識別子
fail(err) {
console.log("オンラインプッシュ設定に失敗", err);
},
success(data) {
console.log("オンラインプッシュ設定に成功", data);
},
webPushcallback(code, tip) {
console.log("ユーザー状態コードとメッセージ", code, tip);
},
swUrl: '', // デフォルト:"/sw.min." + sdkEnv.version + ".js"。この設定はサーバーワーカーファイルのパスであり、現在のドメインの下にある必要があり、ワーカーのスコープを決定します。
canGetInfo(data) {
// この時点で、通知設定データを取得できます。このコールバックの後、RegIdを取得できます。
console.log(data); // 関連する設定情報
console.log("RegIdを取得", MTpushInterface.getRegistrationID());
},
custom: (fuc) => {
// カスタムプロンプト設定を使用する場合は、手動でfuc()を呼び出して通知権限を要求します。権限要求関数は「custom」を介してのみ使用できます。
// fuc()は通知権限の要求をトリガーします。
},
});
// 初期化する前にイベントリスナーを登録
// オーロラチャネルが切断されたときのコールバック
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
// プッシュメッセージを受信(Web Push、ブラウザベンダーチャネル)
MTpushInterface.onMsgReceive((msgData) => {
// msgData構造:{data:{xxx},type:0} type:0はオーロラチャネル、1はシステムチャネル
console.log("プッシュメッセージを受信:", msgData);
});
// プッシュの初期化
MTpushInterface.init({
appkey: "", // 必須、上記のアプリ情報を参照
user_str: visitorId, // 必須、ユーザー識別子
fail(err) {
console.log("オンラインプッシュ設定に失敗", err);
},
success(data) {
console.log("オンラインプッシュ設定に成功", data);
},
webPushcallback(code, tip) {
console.log("ユーザー状態コードとメッセージ", code, tip);
},
swUrl: '', // デフォルト:"/sw.min." + sdkEnv.version + ".js"。この設定はサーバーワーカーファイルのパスであり、現在のドメインの下にある必要があり、ワーカーのスコープを決定します。
canGetInfo(data) {
// この時点で、通知設定データを取得できます。このコールバックの後、RegIdを取得できます。
console.log(data); // 関連する設定情報
console.log("RegIdを取得", MTpushInterface.getRegistrationID());
},
custom: (fuc) => {
// カスタムプロンプト設定を使用する場合は、手動でfuc()を呼び出して通知権限を要求します。権限要求関数は「custom」を介してのみ使用できます。
// fuc()は通知権限の要求をトリガーします。
},
});
このコードブロックはフローティングウィンドウ内に表示されます
その他のAPI
他のAPIの使用方法の詳細については、インターフェースドキュメントを参照してください:Web SDK API。