Sunday, November 3, 2024

Firebase cloud messaging set web push notify to Google Chrome & Safari

ใช้ firebase เป็น service ในการส่งเข้า web notify สำหรับ เครื่อง android

  • https://www.youtube.com/watch?v=ulYnmSbgeq8
  • https://www.youtube.com/watch?v=iz5arafmatc
  • https://www.youtube.com/watch?v=5gls_e1JyeY
สำหรับ IOS IPadOS
  • https://www.youtube.com/watch?v=G6n4FxuhiJo
  • https://firebase.blog/posts/2023/08/fcm-for-safari/
  • https://stackoverflow.com/questions/76493356/notification-requestpermission-not-prompting-allow-deny-on-ios-safari-16-5
  • https://www.xda-developers.com/how-enable-safari-notifications-iphone/
เพิ่มเติม
  • IOS สำคัญต้องมี manifesh.json => { "display": "standalone"  } หรือ { "display": "fullscreen" }
<link rel="manifest" href="https://mysite/path/manifest.json">
  • สำหรับตั้งค่า icon เมื่อเพิ่มเข้าหน้า home screen
<link rel="apple-touch-icon" href="https://mysite/path/images/logo_bg_white.png">
  • IOS หรือ IpadOS  ต้อง 16.4+ และ Safari 16.1+
  • อ้างอิง บน IPadOS 18.1, IOS 18.1
  • ตั้งค่าให้ safari Enable notification โดย Setting => Apps => Safari => Advanced => Feature Flags => Notifications
  • จากนั้น เปิด Safari เข้าไป site แล้ว share แบบ Add to Home Screen (เครื่องหมายชี้ขึ้น ข้างๆ เครื่องหมายบวกเพิ่ม tab) ถ้าไม่เพิ่ม to home screen จะ request permission ไม่ผ่าน denie ตลอด
  • โค้ดฝั่ง server ต้องสร้าง ปุ่มสำหรับ request permission (ลอง settimeout หรือ trigger click permission denied ทั้งหมด ต้องกดปุ่มเองเท่านั้นจริงจะ granted)

Popular Posts