Web push บน iPhone และ iPad

ผู้ใช้ iPhone และ iPad บน iOS และ iPadOS 16.4 ขึ้นไปสามารถรับ web push notification จากเว็บไซต์ของคุณได้หลังจากเพิ่มเว็บไซต์ไปยังหน้าจอโฮม

web push ทำงานบน iPhone และ iPad เมื่อใด

Web push บน iOS และ iPadOS ทำงานเฉพาะกับเว็บไซต์ที่เปิดจากไอคอนบนหน้าจอโฮมเท่านั้น ในแท็บ Safari ปกติ เบราว์เซอร์จะไม่มี push ให้ใช้เลย ดังนั้น Web SDK จะเริ่มต้นทำงานโดยไม่มี push และผู้เยี่ยมชมจะไม่สามารถสมัครรับการแจ้งเตือนได้

เพื่อรับการแจ้งเตือน ผู้ใช้ต้องมี:

iPhone หรือ iPad ที่ใช้ iOS หรือ iPadOS 16.4 ขึ้นไป
เว็บไซต์ของคุณที่เพิ่มไปยังหน้าจอโฮมแล้วและเปิดจากไอคอนนั้น
การอนุญาตการแจ้งเตือนที่ให้ไว้เมื่อแตะบนเว็บไซต์ของคุณ

สิ่งที่เว็บไซต์ของคุณต้องมี

ผสานรวม Web SDK ด้วยวิธีเดียวกับเบราว์เซอร์บนเดสก์ท็อป จากนั้นเพิ่ม web app manifest:

ผสานรวม SDK และ service worker ตาม Web push SDK 3.0 หากเว็บไซต์ของคุณมี service worker ของตัวเองอยู่แล้ว ให้ทำตาม การรองรับ Progressive Web App

เพิ่ม web app manifest ที่ตั้งค่า display เป็น standalone หรือ fullscreen และลิงก์ไปยัง manifest นี้จากทุกหน้า:

{
  "name": "Example Store",
  "short_name": "Store",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

<link rel="manifest" href="/manifest.json">

ขอสิทธิ์การแจ้งเตือนเมื่อผู้ใช้แตะ iOS และ iPadOS จะแสดงกล่องโต้ตอบขอสิทธิ์เฉพาะเมื่อผู้ใช้ดำเนินการโดยตรงเท่านั้น ดังนั้นให้ใช้ Subscription widget หรือปุ่มที่เรียก Pushwoosh.subscribe():
```
<button onclick="Pushwoosh.subscribe()">Get notifications</button>
```

วิธีค้นหาผู้สมัครรับการแจ้งเตือนบน iPhone และ iPad ใน Pushwoosh

Pushwoosh ลงทะเบียนผู้สมัครรับการแจ้งเตือนทางเว็บบน iPhone และ iPad ภายใต้แพลตฟอร์ม Chrome ดังนั้นสถิติจะไม่แสดงผู้ใช้กลุ่มนี้แยกต่างหาก และไม่มี Tag เริ่มต้นใดที่ระบุอุปกรณ์ได้อย่างน่าเชื่อถือ

หากต้องการกำหนดเป้าหมายผู้สมัครรับการแจ้งเตือนกลุ่มนี้ ให้ตั้งค่า Tag ของคุณเองจากเว็บไซต์:

สร้าง Tag ที่กำหนดเอง ใน Control Panel ก่อนที่เว็บไซต์จะส่ง Tag นั้น เช่น Tag ประเภท String ชื่อ Web App Platform ยกเลิกการเลือกช่องทำเครื่องหมาย เฉพาะผู้ใช้ ซึ่งถูกเลือกไว้โดยค่าเริ่มต้น วิธีนี้จะสร้าง Tag แบบ ทั่วไป ที่จัดเก็บต่ออุปกรณ์

หากไม่ทำขั้นตอนนี้ setTags จะสร้าง Tag โดยอัตโนมัติเป็นแบบ เฉพาะผู้ใช้ ค่าของ Tag จะใช้ร่วมกันในทุกอุปกรณ์ที่มี User ID เดียวกัน ดังนั้นเมื่อเว็บไซต์เรียก registerUser เบราว์เซอร์บนเดสก์ท็อปของผู้ใช้ก็จะได้รับค่า ios ด้วย และจะได้รับข้อความที่คุณกำหนดเป้าหมายไปยังผู้สมัครรับการแจ้งเตือนบน iPhone และ iPad ด้วย Tag นี้

ตั้งค่า Tag เมื่อเว็บไซต์ทำงานจากหน้าจอโฮมบน iPhone หรือ iPad:

Pushwoosh.push((api) => {
  // iPadOS Safari reports a Mac user agent, so a touch screen marks an iPad
  const isIos = /iPhone|iPad/.test(navigator.userAgent)
    || (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
  const isIosHomeScreen = isIos && (window.navigator.standalone === true
    || window.matchMedia('(display-mode: standalone)').matches);

  if (isIosHomeScreen) {
    api.setTags({ 'Web App Platform': 'ios' });
  }
});

สมัครรับการแจ้งเตือนจาก iPhone หรือ iPad สำหรับทดสอบ
ตรวจสอบค่าของ Tag บนอุปกรณ์นั้นใน User Explorer setTags จะส่งคืนผลลัพธ์สำเร็จแม้ว่า Pushwoosh จะไม่ได้บันทึกค่า เช่น เมื่อปิดการสร้าง Tag อัตโนมัติสำหรับบัญชี ดังนั้นโค้ดเพียงอย่างเดียวจึงไม่ได้ยืนยันว่าค่าถูกบันทึกแล้ว
สร้างเซกเมนต์ จาก Tag นี้เพื่อส่งข้อความถึงผู้สมัครรับการแจ้งเตือนบน iPhone และ iPad เท่านั้น