Web SDK Chrome Extension Version ダウンロードリンク提供 # 統合ガイド

各チャネルの海外ユーザーに対するサポート説明

チャネルタイプ その他の地域のユーザー 中国本土のユーザー 備考
EngageLab サポート サポート SDKによりデフォルトでサポートされています
W3C サポート サポート /

クイックテスト

Engagelab WebPush統合デモンストレーションと例

統合前の準備

  1. テストとデバッグを行うアクセシブルなhttpsウェブサービスのドメイン名を準備します。web pushはローカルデバッグまたは非https環境での動作をサポートしていません。
  2. Engagelab WebPushを訪問し、統合設定 -> webでウェブサイトドメインを設定し、準備したhttpsウェブサービスドメインを入力します。
    截屏2022-11-29 11.06.12.png

ヒント

この記事は、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

デモの実行

パッケージ内の例はAPIデモです。ブラウザで直接実行してテストすることができます。

icon
お問い合わせ