คู่มือการเชื่อมต่อ Web Push SDK สำหรับร้าน Shopify

ภาพรวม

คู่มือนี้อธิบายวิธีเชื่อมต่อ Web Push SDK เข้ากับร้านที่สร้างด้วย Shopify เพื่อเปิดใช้การแจ้งเตือน push ผ่านเบราว์เซอร์

ข้อกำหนดเบื้องต้น

• สิทธิ์ผู้ดูแลร้าน 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 สำหรับ push)
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 ที่จัดการข้อความ push ในพื้นหลัง ต้องกำหนด path ให้ถูกต้องเมื่อเริ่มต้น SDK

2. เพิ่มสคริปต์ SDK และเริ่มต้น 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("ได้รับข้อความ push:", msgData);
        });

        MTpushInterface.init({
          appkey: "",
          user_str: visitorId,
          fail(err) {
            console.log("เริ่มต้น push ล้มเหลว", err);
          },
          success(data) {
            console.log("เริ่มต้น push สำเร็จ", 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. ทดสอบ push

1. ไซต์ต้องให้บริการผ่าน HTTPS (จำเป็นสำหรับ web push)
2. ตรวจสอบว่าเบราว์เซอร์แสดงคำขออนุญาต push หรือไม่ (ถ้าเปิดใช้)

3. ตรวจสอบการลงทะเบียน Service Worker

1. เปิด DevTools (F12)
2. ไปที่แท็บ Application
3. ทางซ้าย เลือก Service Workers
4. ยืนยันว่า sw.produce.min.3.3.4.js ลงทะเบียนแล้ว
5. ถ้ามีข้อผิดพลาด ดูที่คอนโซล

การแก้ปัญหา

ปัญหาที่พบบ่อยและแนวทางแก้

Q1: SDK ไม่โหลด

• Path: ตรวจสอบว่า asset_url ถูกต้อง
• เครือข่าย: ตรวจสอบว่าไฟล์ JS ดาวน์โหลดได้
• แอสเซ็ต: ตรวจสอบว่าไฟล์เข้าถึงได้ในแอสเซ็ต Shopify

Q2: เริ่มต้นไม่สำเร็จ

• ลำดับ: สคริปต์ SDK ต้องรันก่อนโค้ด init
• HTTPS: Web push ใช้ได้เฉพาะกับ HTTPS
• เบราว์เซอร์: ตรวจสอบการรองรับ web push
• swUrl: ตั้งค่าให้ถูกต้อง และให้ path ไฟล์ SW เข้าถึงได้
• แอสเซ็ต: ยืนยันว่า sw.produce.min.3.3.4.js อัปโหลดในแอสเซ็ตแล้ว

Q4: ลงทะเบียน Service Worker ล้มเหลว

• swUrl: ใช้ {{ 'sw.produce.min.3.3.4.js' | asset_url }} สำหรับ URL ที่ถูกต้อง
• การเข้าถึง: เปิด URL ของ Service Worker ในเบราว์เซอร์และยืนยันว่าไฟล์ดาวน์โหลดได้
• Application > Service Workers: ดูสถานะการลงทะเบียน
• HTTPS: Service Worker ต้องใช้ HTTPS (ยกเว้น localhost)