Hướng dẫn cài đặt Web Push với 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.

Hướng dẫn cài đặt Web push Notification bằng Onesignal cho website Haravan

Bước 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

Bước 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.

Bước 3 Thiết lập hiển thị lời nhắc nhở (Permission Prompt Setup):

Có 2 loại lời nhắc cấp phép chính là Push Prompt và Email/Phone Prompt

1. Push Prompt có 4 dạng hiển thị

Push Slide Prompt

Subscription Bell

Custom link

Native Prompt: không khuyến khích cài đặt vì đa số các trình duyệt sẽ ẩn thông báo này nếu người dùng thường xuyên chọn từ chối (deny/block).

2. Email/Phone Prompt

Bước 4 Thiết lập 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.

Bước 5: Chọn Save để hoàn tất việc thiết lập App Setting. 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ị: