Shopifyストア Web Push SDK 導入ガイド

概要

本ガイドでは、Shopifyで構築したストアにWeb Push SDKを導入し、ブラウザプッシュ通知を有効にする方法を説明します。

前提条件

• Shopifyストアの管理者権限
• Web Push SDKファイル（webSdk.produce.min.3.3.4.js、sw.produce.min.3.3.4.js）
• Shopifyテーマ編集の基本操作の理解

導入手順

Shopifyテーマエディタから追加（推奨）

1. SDKファイルをShopifyにアップロード

1. Shopify管理画面にログイン
2. オンラインストア > テーマ を開く
3. 使用中のテーマの 操作 をクリックし、コードを編集 を選択
4. アセット フォルダで 新しいアセットを追加 をクリック
5. webSdk.produce.min.3.3.4.js（メインSDKファイル）をアップロード
6. sw.produce.min.3.3.4.js（Service Workerファイル、プッシュ用）をアップロード
7. アセットURLを控える（例：{{ 'webSdk.produce.min.3.3.4.js' | asset_url }} と {{ 'sw.produce.min.3.3.4.js' | asset_url }}）

重要: sw.produce.min.3.3.4.js はバックグラウンドでプッシュメッセージを処理するService Workerファイルです。SDK初期化時にこのファイルのパスを正しく設定してください。

2. SDKを読み込み、初期化する

1. テーマエディタで theme.liquid を開く
2. </head> タグの直前に以下のコードを追加：

              
              <script>
  (function() {
    function initializeSDK() {
      const visitorId = getFingerprint();

      if (typeof window.MTpushInterface !== 'undefined') {
        MTpushInterface.mtPush.onDisconnect(function () {
          console.log("onDisconnect");
        });

        MTpushInterface.onMsgReceive((msgData) => {
          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.produce.min.3.3.4.js" | asset_url }}',
        });
      }
    }

    window.MTpushInterfaceReady = initializeSDK;
  })();
</script>
{{ 'webSdk.produce.min.3.3.4.js' | asset_url | script_tag }}

            

動作確認

1. SDKの読み込み確認

1. ストアのページを開く
2. 右クリック > 検証 または F12
3. コンソールでSDKの読み込みメッセージを確認
4. window.MTpushInterface を入力し、定義されているか確認

2. プッシュのテスト

1. サイトがHTTPSで提供されていること（Webプッシュの要件）
2. ブラウザにプッシュ許可のプロンプトが表示されるか確認（自動リクエストを有効にしている場合）

3. Service Workerの登録確認

1. 開発者ツール（F12）を開く
2. Application タブを開く
3. 左メニューの Service Workers を開く
4. sw.produce.min.3.3.4.js が登録されているか確認
5. エラーがある場合はコンソールを確認

トラブルシューティング

よくある問題と対処

Q1: SDKが読み込まれない

• パス: asset_url が正しく解決されているか確認
• ネットワーク: JSファイルがダウンロードされているか確認
• アセット: Shopifyアセットでファイルが参照可能か確認

Q2: 初期化に失敗する

• 読み込み順: SDKスクリプトが初期化コードより先に実行されているか確認
• HTTPS: WebプッシュはHTTPS環境が必須
• ブラウザ: Webプッシュ対応ブラウザか確認
• swUrl: 正しく設定し、Service WorkerのURLがアクセス可能か確認
• アセット: sw.produce.min.3.3.4.js がアセットにアップロードされているか確認

Q4: Service Workerの登録に失敗する

• swUrl: {{ 'sw.produce.min.3.3.4.js' | asset_url }} で正しいURLを指定
• アクセス: ブラウザでService WorkerのURLを直接開き、ファイルがダウンロードできるか確認
• Application > Service Workers: 登録状態を確認
• HTTPS: Service WorkerはHTTPS環境が必須（localhostを除く）