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はほとんどの主流のブラウザをサポートしています。

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>
              
              <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);

            
このコードブロックはフローティングウィンドウ内に表示されます

サンプルコード

// 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();
              
                // 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

デモの実行

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

Icon Solid Transparent White Qiyu
お問い合わせ