# การกำหนดค่า Web Push ในการเริ่มส่งการแจ้งเตือนแบบ web push ด้วย Pushwoosh คุณต้องกำหนดค่าแพลตฟอร์ม web push ของคุณและเปิดใช้งานข้อความแจ้งให้สมัครรับข้อมูลที่แสดงต่อผู้ใช้ ในการเริ่มการกำหนดค่า ไปที่ **การตั้งค่า > การกำหนดค่าแพลตฟอร์ม > การแจ้งเตือนแบบ Web Push** และคลิก **กำหนดค่า** ![กำหนดค่าการแจ้งเตือนแบบ web push](/web-configuration-1.webp) ## กำหนดค่า web push สำหรับเบราว์เซอร์ทั้งหมด (ยกเว้น Safari เวอร์ชันเก่า) การกำหนดค่านี้ใช้ได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด รวมถึง Safari เวอร์ชันล่าสุด ซึ่งตอนนี้รองรับการแจ้งเตือนแบบ web push โดยตรง **หมายเหตุ:** Safari เวอร์ชันเก่า (macOS 10.14–12) ต้องการการตั้งค่าแยกต่างหาก คุณสามารถกำหนดค่าได้ในส่วนเฉพาะ เรียนรู้เพิ่มเติม ในการเริ่มการตั้งค่า คลิก **กำหนดค่า** ใต้ **การกำหนดค่าเบราว์เซอร์ทั้งหมด** ![กำหนดค่า web push สำหรับเบราว์เซอร์ทั้งหมด](/web-configuration-2.webp) ในหน้าต่างการกำหนดค่า เลือกหนึ่งในตัวเลือกต่อไปนี้: * **สร้างการกำหนดค่า push ใหม่** แนะนำหากคุณไม่เคยตั้งค่าการแจ้งเตือนแบบ web push ผ่านบริการอื่นมาก่อน Pushwoosh จะสร้างคู่คีย์ VAPID ใหม่ให้โดยอัตโนมัติ * **ใช้การกำหนดค่าที่มีอยู่** เลือกตัวเลือกนี้หากคุณมีคีย์ VAPID อยู่แล้ว เช่น จาก Firebase และต้องการใช้ต่อไปโดยไม่ต้องขอให้ผู้ใช้สมัครรับข้อมูลอีกครั้ง ### สร้างการกำหนดค่า push ใหม่ เลือก **สร้างการกำหนดค่า push ใหม่** หากคุณไม่เคยตั้งค่าการแจ้งเตือนแบบ web push กับบริการอื่นมาก่อน Pushwoosh จะสร้างคีย์ VAPID (Voluntary Application Server Identification) ที่จำเป็นให้คุณโดยอัตโนมัติ
VAPID keys คืออะไร? VAPID keys คือคู่คีย์สาธารณะ-ส่วนตัวที่ใช้ใน Web Push Protocol เพื่อยืนยันตัวตนของเซิร์ฟเวอร์แอปพลิเคชันเมื่อส่งการแจ้งเตือนแบบ push ไปยังเว็บเบราว์เซอร์ **คีย์สาธารณะ (public key)** จะถูกแชร์กับเบราว์เซอร์เมื่อผู้ใช้สมัครรับการแจ้งเตือน **คีย์ส่วนตัว (private key)** จะอยู่บนเซิร์ฟเวอร์ของคุณและใช้เพื่อลงนามในแต่ละข้อความที่คุณส่งอย่างปลอดภัย
คลิก **กำหนดค่า** เพื่อสร้างและใช้คีย์ ![สร้างการกำหนดค่า push ใหม่](/web-configuration-3.webp) เมื่อสร้างแล้ว Pushwoosh จะใช้คีย์เหล่านี้ในการกำหนดค่า SDK โดยอัตโนมัติ [เรียนรู้เพิ่มเติมเกี่ยวกับการผสานรวม Web Push SDK](/th/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/) ### ใช้การกำหนดค่าที่มีอยู่ หากคุณมีคีย์ VAPID อยู่แล้ว (เช่น ที่สร้างผ่าน Firebase) คุณสามารถนำมาใช้ใหม่เพื่อตั้งค่าการแจ้งเตือนแบบ web push ใน Pushwoosh ได้ สำหรับขั้นตอนนี้: 1. เลือก **ใช้การกำหนดค่าที่มีอยู่** 2. ในช่อง **Web Push Certificate** ให้ป้อน **VAPID public key** ของคุณ 3. ในช่อง **Web Push Private Key** ให้ป้อน **VAPID private key** ของคุณ 4. คลิก **กำหนดค่า** เพื่อบันทึกและใช้การตั้งค่า ![ใช้การกำหนดค่าที่มีอยู่](/web-configuration-4.webp) #### วิธีค้นหา VAPID keys ใน Firebase หากคุณกำลังย้ายจาก Firebase และต้องการใช้ VAPID keys ที่มีอยู่ของคุณใหม่ ให้ทำตามขั้นตอนเหล่านี้เพื่อค้นหา ##### Web Push certificate 1. ใน **Firebase** ไปที่ **Project Settings → Cloud Messaging** 2. เลื่อนลงไปที่ส่วน **Web Configuration** และคัดลอกคู่คีย์ที่มีอยู่ ![ค้นหา Web Push certificate](/web-configuration-6.webp) 3. วางลงในช่อง **Web Push Certificate** ในฟอร์มการกำหนดค่าเว็บของ Pushwoosh ![วางลงในช่อง **Web Push Certificate**](/web-configuration-7.webp) ##### Web Push private key 1. ใน **Firebase Console** ไปที่ **Project Settings → Cloud Messaging → Web Configuration** 2. คลิก **เมนูสามจุด** ใต้ **Actions** ถัดจากคู่คีย์และเลือก **Show private key** คีย์นี้จำเป็นเพื่อให้แน่ใจว่าการแจ้งเตือนแบบ Web Push ทำงานได้อย่างถูกต้อง ![ค้นหา Web Push private key](/web-configuration-8.webp) 3. คัดลอกคีย์ที่แสดงไปยังคลิปบอร์ดของคุณ 4. ในฟอร์ม **Pushwoosh Web Configuration** วางลงในช่อง **Web Push Private Key** ![วาง Web Push private key](/web-configuration-9.webp) 5. คลิก **Apply** เพื่อบันทึกการเปลี่ยนแปลงของคุณ ### กำหนดค่า web push ใหม่ หากคุณได้ตั้งค่าการแจ้งเตือนแบบ web push แล้ว แต่ต้องการอัปเดตข้อมูลประจำตัวของคุณ (เช่น การแทนที่ VAPID keys) นี่คือวิธีทำ: 1. คลิก **Reconfigure** ใต้ **การกำหนดค่าเบราว์เซอร์ทั้งหมด** ![กำหนดค่า web push ใหม่](/web-configuration-5.webp) 2. ในป๊อปอัปที่ปรากฏขึ้น ให้ป้อน VAPID keys ใหม่ของคุณ: * **Web Push Certificate**: VAPID public key ใหม่ของคุณ * **Web Push Private Key**: VAPID private key ใหม่ของคุณ 3. คลิก **กำหนดค่า** เพื่อบันทึกการเปลี่ยนแปลง ### กำหนดค่าข้อความแจ้งให้สมัครรับข้อมูล ในการส่งการแจ้งเตือนแบบ push ผู้ใช้ต้องให้สิทธิ์อย่างชัดเจนผ่านข้อความแจ้งเตือนระดับระบบของเบราว์เซอร์ หากไม่ได้รับอนุญาตนี้ จะไม่สามารถส่งการแจ้งเตือนได้ เนื่องจากการเปลี่ยนแปลงนโยบายล่าสุดของ Chrome และ Firefox ป๊อปอัปขออนุญาตดั้งเดิมจะปรากฏขึ้นได้ก็ต่อเมื่อผู้ใช้โต้ตอบกับหน้าเว็บ (เช่น โดยการคลิกปุ่ม) เพื่อให้เป็นไปตามข้อกำหนดนี้ Pushwoosh จะแสดง [วิดเจ็ตข้อความแจ้งให้สมัครรับข้อมูล (Subscription Prompt widget)](/th/developer/guides/messaging-channels/subscription-prompt/) โดยค่าเริ่มต้น วิดเจ็ตนี้จะกระตุ้นให้ผู้ใช้เลือกเข้าร่วม และเมื่อตกลง จะเรียกใช้ข้อความแจ้งเตือนดั้งเดิมของเบราว์เซอร์ ในการปรับแต่งข้อความและลักษณะของข้อความแจ้งเตือน คลิก **Settings** ![กำหนดค่าข้อความแจ้งให้สมัครรับข้อมูล](/web-configuration-16.webp) #### ประเภทของข้อความแจ้งเตือน มีข้อความแจ้งให้สมัครรับข้อมูลสองประเภทให้เลือก: * **วิดเจ็ตเริ่มต้น** จัดทำโดย Pushwoosh และแสดงโดยอัตโนมัติ [เรียนรู้วิธีปรับแต่งวิดเจ็ตเริ่มต้น](/th/developer/guides/messaging-channels/subscription-prompt/default-widget/) * **วิดเจ็ตที่กำหนดเอง** ใช้วิดเจ็ตที่คุณออกแบบเอง [เรียนรู้เพิ่มเติม](/th/developer/guides/messaging-channels/subscription-prompt/custom-subscription-widget/) > **หมายเหตุ:** เนื่องจากข้อจำกัดของแพลตฟอร์ม การเปลี่ยนแปลงวิดเจ็ตอาจใช้เวลาถึง 30 นาทีจึงจะปรากฏ หากการเปลี่ยนแปลงไม่แสดงผล โปรดติดต่อทีมสนับสนุนของ Pushwoosh ### การกำหนดค่า Safari (macOS 10.14–12) เพื่อรองรับการแจ้งเตือนแบบ push ใน Safari เวอร์ชันเก่า (macOS 10.14–12) คุณต้องทำกระบวนการกำหนดค่าแยกต่างหากโดยใช้ข้อมูลประจำตัว Apple Developer ของคุณ ขั้นตอนนี้จำเป็นสำหรับเวอร์ชันเก่าเหล่านี้เท่านั้น เนื่องจาก Safari เวอร์ชันใหม่ (macOS Ventura และใหม่กว่า) รองรับการตั้งค่า web push มาตรฐานที่รวมอยู่ใน [การกำหนดค่าเบราว์เซอร์ทั้งหมด](#configure-web-push-for-all-browsers-except-older-safari-versions) #### รับข้อมูลประจำตัวที่จำเป็นจาก Apple 1. ไปที่ส่วน [Certificates, Identifiers & Profiles](https://developer.apple.com/account/overview.action) ของ Apple Developer Portal 2. เพิ่มใบรับรองใหม่ ตัวเลือกเพิ่มใบรับรองใหม่ใน Apple Developer Portal 3. เลือกประเภท **Website Push ID Certificate** และคลิก **Continue** การเลือกประเภท Website Push ID Certificate ใน Apple Developer Portal 4. เลือก **Website Push ID** - สตริงโดเมนย้อนกลับที่ไม่ซ้ำกันของคุณ เช่น _web.com.example.domain_ (ต้องขึ้นต้นด้วย _web._) การเลือก Website Push ID ใน Apple Developer Portal 5. อัปโหลด **Certificate Signing Request** หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการสร้าง Certificate Signing Requests โปรดดูบทความ [Developer Account Help](https://developer.apple.com/help/account/create-certificates/create-a-certificate-signing-request) 6. หลังจากนั้น ให้ดาวน์โหลดใบรับรองการแจ้งเตือนแบบ push ดาวน์โหลดใบรับรองการแจ้งเตือนแบบ push จาก Apple Developer Portal #### กำหนดค่า Safari ใน Pushwoosh 1. คลิก **กำหนดค่า** ใต้ **การกำหนดค่า Safari** ![กำหนดค่า Safari ใน Pushwoosh](/web-configuration-11.webp) 2. กรอกข้อมูลในช่องต่อไปนี้ในฟอร์มการกำหนดค่า: | | | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------- | | **ชื่อเว็บไซต์** | ชื่อเว็บไซต์ของคุณที่ปรากฏในข้อความแจ้งเตือนแบบ push | | **โดเมนที่ได้รับอนุญาต** | รายการโดเมนที่ได้รับอนุญาตให้ขอสิทธิ์การแจ้งเตือน (หนึ่งโดเมนต่อบรรทัด) | | **เทมเพลต URL** | URL ที่จะเปิดเมื่อผู้ใช้คลิกการแจ้งเตือน รองรับตัวยึดตำแหน่งเช่น `%@` เพื่อแทรกค่าไดนามิก ตัวอย่าง: `https://yourwebsite.com/%@` | | **ไอคอนเว็บไซต์** | อัปโหลดภาพ PNG สี่เหลี่ยมจัตุรัส (256×256 px) Pushwoosh จะปรับขนาดโดยอัตโนมัติสำหรับอินเทอร์เฟซต่างๆ | | **ไฟล์คีย์** | อัปโหลดใบรับรอง `.p12` ที่ส่งออกจากบัญชี Apple Developer ของคุณ | | **รหัสผ่านคีย์ส่วนตัว** | รหัสผ่านที่ใช้เมื่อส่งออกไฟล์ `.p12` | ![กรอกฟอร์มการกำหนดค่า Safari](/web-configuration-12.webp) 3. คลิก **กำหนดค่า** เพื่อบันทึกการเปลี่ยนแปลงของคุณ Pushwoosh จะสร้าง push package พร้อมชุดไอคอน, website JSON dictionary และไฟล์ manifest ที่ Safari ร้องขอจากเซิร์ฟเวอร์โดยอัตโนมัติ คุณสามารถดาวน์โหลดได้ทุกเมื่อที่ต้องการ