SDK บนหน้าพรีแลนดิ้งของคุณ

โดยทั่วไปผู้เยี่ยมชมจะมาลงที่หน้าพรีแลนดิ้ง แล้วจึงเดินทางต่อไปยังหน้าร้านค้า PWA ซึ่งเป็นที่อยู่ของปุ่มติดตั้ง แต่ทั้งการติดตั้งและการสมัครรับการแจ้งเตือน Push สามารถเปิดใช้งานได้ บนหน้าพรีแลนดิ้งของคุณเองทันที: คุณเชื่อมต่อ Browser SDK และเรียกใช้เมธอดต่าง ๆ ผ่านปุ่มของคุณเอง ผู้เยี่ยมชมจึงสามารถติดตั้งแอปและสมัครรับการแจ้งเตือน Push ได้โดยไม่ต้องออกจากหน้าพรีแลนดิ้ง

ผู้เยี่ยมชมไม่จำเป็นต้องติดตั้งแอปสำหรับขั้นตอนนี้ เนื่องจากการสมัครรับการแจ้งเตือน Push ทำงานได้โดยไม่ต้องติดตั้งแอป

สิ่งที่ต้องเตรียมไว้ก่อน

• หน้าพรีแลนดิ้งที่อัปโหลดขึ้น Qubix แล้ว นั่นคือหน้าเว็บของคุณในส่วน Websites — อัปโหลดในลักษณะเดียวกับเว็บไซต์ทั่วไป (ดู การอัปโหลดเว็บไซต์)
• โดเมนที่ตั้งค่าและใช้งานได้แล้ว หน้าพรีแลนดิ้งต้องให้บริการบนโดเมนที่ตั้งค่าไว้ใน Qubix และอยู่ในสถานะใช้งานได้ (ดู Domains) ซึ่งเป็นข้อกำหนดที่จำเป็น เนื่องจากการติดตั้งและ Push จะทำงานได้เฉพาะเมื่อหน้าเว็บและที่อยู่ของ Service SDK อยู่บนโดเมนเดียวกัน
• PWA ที่สร้างแล้ว — คุณจะต้องใช้ตัวระบุ (pwaId) จากการ์ดในส่วน PWA Apps

วิธีการเชื่อมต่อ

1. ในโค้ดของหน้าพรีแลนดิ้ง ให้กำหนดค่า config และโหลดสคริปต์ SDK โดย config ต้องอยู่ ก่อน สคริปต์:

   index.htmlHTML

   <script>
     window.pwaConfig = {
       pwaId: 'YOUR-PWA-ID',
       domain: 'your-domain.com',
     }
   </script>
   <script src="https://your-domain.com/sdk.js" defer></script>

   คีย์ Push จะถูกฝังเข้าไปใน /sdk.js โดยอัตโนมัติ — คุณไม่จำเป็นต้องเพิ่มด้วยตนเอง รายละเอียดทั้งหมดของฟิลด์ต่าง ๆ อยู่ใน Browser SDK reference

2. เตรียม SDK สำหรับการติดตั้ง — เพียงครั้งเดียวเมื่อหน้าเว็บโหลด การเรียกใช้นี้จะลงทะเบียนส่วน Service และแนบ App Manifest:

   JavaScript

   sdk.pwa.init()

3. เชื่อมการติดตั้งเข้ากับปุ่มของคุณเอง:

   HTML

   <button id="install">Install the app</button>
   <script>
     document.getElementById('install').addEventListener('click', () => {
       sdk.pwa.install()
     })
   </script>

4. เชื่อมการสมัครรับการแจ้งเตือน Push เข้ากับปุ่มของคุณเอง (หรือเรียกใช้ในช่วงเวลาที่เหมาะสม):

   JavaScript

   await sdk.subscribePush()

เสร็จสิ้น — การติดตั้งและการสมัครรับการแจ้งเตือนเกิดขึ้นบนหน้าเว็บของคุณ โดยไม่มีการส่งผู้เยี่ยมชมไปยังหน้าร้านค้า

เคล็ดลับ

หากบางสถานการณ์จำเป็นต้องใช้หน้าร้านค้า sdk.showStore() จะเปิดหน้านั้นขึ้นมา อย่าเรียกใช้เมธอดนี้หากต้องการให้ผู้เยี่ยมชมอยู่บนหน้าพรีแลนดิ้งของคุณ

เบราว์เซอร์แสดงการติดตั้ง

แสดงปุ่มติดตั้งเฉพาะเมื่อการติดตั้งพร้อมใช้งานจริง — ตรวจสอบด้วย sdk.pwa.canInstall() เบราว์เซอร์ไม่ได้อนุญาตให้แสดง Prompt การติดตั้งในทุกกรณี: ต้องใช้การเชื่อมต่อที่ปลอดภัย (HTTPS) และโดยปกติต้องมีการกระทำจากผู้เยี่ยมชมบนหน้าเว็บด้วย นั่นคือเหตุผลที่ทั้งการติดตั้งและการสมัครรับการแจ้งเตือนมักจะผูกไว้กับการแตะปุ่มอย่างชัดเจน แทนที่จะเรียกใช้ทันทีเมื่อโหลดหน้า

ตรวจสอบ

เปิดหน้าพรีแลนดิ้งบนโทรศัพท์และแตะปุ่มของคุณ — เบราว์เซอร์จะแสดง Prompt การติดตั้งและ Prompt การแจ้งเตือน ผลลัพธ์จะปรากฏในรายงาน: อีเวนต์ install_accepted, push_allow และอีเวนต์อื่น ๆ จะปรากฏใน event stream

ขั้นตอนถัดไป

Browser SDK reference

All Browser SDK methods and events.

Uploading a website

How to upload a prelanding to Qubix.

Push campaigns

Sending notifications to those who subscribed.