1. Khái niệm Push Notification và Onesignal

Push notification là những tin nhắn do server đẩy xuống client thông qua một cổng cloud message nào đó rồi từ cổng này sẽ thông báo xuống máy chúng ta là có thông báo mới và hiển thị chúng. Chính vì vậy nên phải có Internet thì mới push notification được.

Tại sao sử dụng Push Notification

  • Gửi thông báo với người dùng ngay trên trình duyệt trong thời gian hiện tại.

  • Tiếp cận người dùng ở mọi nơi trên web.

  • Xây dựng hệ thống thông báo mà không cần phải xây dựng một ứng dụng cho điện thoại.

  • Nhận được tỷ lệ nhấp chuột cao hơn email và nhiều lượt truy cập trang hơn.

Browser push notification

Tương tự như push notification, browser push notification sẽ gửi request xuống browser thông qua một cổng cloud message nào đó (gọi là endpoint) để hiển thị thông báo.

2. Cách cài đặt Web push Notification bằng Onesignal cho website Haravan:

 2.1  ĐĂNG KÝ TÀI KHOẢN ONESIGNAL

Kế đến là cần phải đăng ký một tài khoản tại https://onesignal.com/

 Có thể đăng ký mới hoặc đăng nhập bằng những mạng xã hội thông dụng như:

  • Github

  • Google

  • Facebook

2.2  TẠO APP VÀ SETUP

Sau khi đã có tài khoản trên OneSignal, bước tiếp theo là tạo ra một app trên OneSignal để chúng ta có thể cấu hình được Plugin mà chúng ta đã cài trước.

Nhập tên app hoặc website của bạn và chọn nền tảng bạn dùng cho app này

Trong mục App Settings:

  • Choose Integration: mục chọn cách mà chúng ta sẽ cài đặt cho website để kết nối đến server của OneSignal, ở đây chúng ta sử dụng Haravan do đó các bạn hãy chọn Typical Site
  • Site Setup:
  • Site name: Tên hiển thị OneSignal trên website.
  • Site url: địa chỉ website mà bạn cần cài đặt OneSignal.
  • Default icon url: icon hiển thị cho OneSignal khi chạy trên website.

Permission Prompt Setup: là phần setup hiển thị cho OneSignal. Ở đây thì mình demo add luôn cả hai dạng này.

Có hai dạng hiển thị Notification khi người dùng truy cập vào website:

  • Slide Prompt

  • Subscription Bell

 

 

Welcome Notification: Là phần hiển thị thông báo khi người dùng đã đăng ký nhận thông tin website thành công.

 

Sau khi đã hoàn thành điền thông tin và cài đặt trong phần App Setting hoàn tất. Bạn chọn Save. Bạn sẽ được điều hướng sang trang Web Configuration và chọn Copy đoạn code được cung cấp. 

Sau đó add code được cung cấp vào website:

Lưu ý: Add vào thẻ <head> ở theme.liquid nếu muốn hiển thị ở đầu trang hoặc tùy vào vị trí muốn hiển thị:

 Sau đó bấm Finish là xong

Kết quả: