Tạo Push Notification Website Với Onesignal – Gửi Thông Báo Đến Người Dùng Giống Facebook

Tạo Push Notification Website Với Onesignal – Gửi Thông Báo Đến Người Dùng Giống Facebook

Hôm nay tôi sẻ hướng dẫn các bạn tạo Push Notification cho website của mình với bên thứ Onesignal cho những website chưa dùng HTTPS. Tức là gửi thông ...

[PHP Basic] Bài 04: Khai Báo Biến Và Sử Dụng Biến Trong PHP
[PHP Basic] Bài 03: Cú Pháp Cơ Bản Trong Lập Trình Code PHP (Tag PHP)
[PHP Basic] Bài 01: Giới Thiệu Ngôn Ngữ Lập Trình PHP

Hôm nay tôi sẻ hướng dẫn các bạn tạo Push Notification cho website của mình với bên thứ Onesignal cho những website chưa dùng HTTPS. Tức là gửi thông báo đến người dùng tương tự như thông báo tin nhắn,… của Facebook hiện nay.

1. Push Notification Website là gì?

Push Notification Website tức là: bạn là admin website, bạn muốn gửi thông báo đến người dùng thông qua trình duyệt web với những thông báo mới cập nhất trên website của mình với người dùng đã đắng ký nhận thông báo từ website của bạn. Khi người dùng nhận được thông báo họ có thể click vào thông báo để đến được website của bạn.

Chức năng Push Notification Website đang được rất ưa chuộng hiện nay và đã được nhiều website lớn ứng dụng như ông trùm mạng xã hội Facebook như tin nhắn mới,…

Đặc biệt với Push Notification Website cho phép bạn gửi thông báo đến người dùng khi người dùng không mở website và trình duyệt.

Điều này sẻ giúp website bạn thân thiện hơn với người dùng vì nó hiện ngay trên màng hình máy tính hoặc điện thoại bất cứ lúc nào, phải có internet nhé, không có thì cũng bó tay luôn 🙂 .

Ví dự rất đơn giản bạn sẻ hình dung được chức năng Push Notification Website này ở hình dưới đây. Và Push Notification Website tôi đang thí điểm ở website ovuinhi.com.

Push Notification Website ovuinhi.com

Để sử dụng chức năng Push Notification Website đồi hỏi website của bạn phải được bật SSL (HTTPS) tức là phương thức bảo mật website. Nhưng hôm nay tôi sẻ giới thiệu các bạn một website trung gian đó là OneSignal để làm chức năng Push Notification Website tuyệt với và đặc biệt là hoàn toàn miễn phí nhé.

Demo thực tế trên website: ovuinhi.com

2. Hướng dẫn làm chức năng Push Notification cho website Website với Onesignal

Bước 1: Đăng ký tài khoản miễn phí trên website onesignal.com, bạn có thể tạo tài khoản mới hoặc dùng tài Github, Facebook, Google nếu có.

Đăng ký tài khoản miễn phí trên website onesignal.com làm push notification website

Đăng ký tài khoản miễn phí trên onesignal.com

Lăng chuột xuống đến cuối website onesignal.com bạn sẻ thấy button SIGN UP FREE, rồi bạn click vào sẻ có form đắng ký như hình trên.

Đăng ký xong vào email để kích hoạt tài khoản nhé, nếu dùng cách đăng ký thông qua tài khoản Github, Facebook, Google thì không cần.

Bước 2: Tạo một ứng dụng mới để làm chức năng Push Notification Website với onesignal

Tạo một ứng dụng mới

Click vào để tạo một ứng dụng mới để làm chức năng Push Notification Website với onesignal. Sẻ có một hộp thoại hiện lên bạn nhập tên cho ứng dụng sẻ tạo. Tốt nhất nên đặt tên website mình muốn làm chức năng Push Notification Website cho dẻ quản lý nhé. Xem hình phí dưới

Đặt tên ứng dụng mới

Tiếp đến bạn sẻ chọn nền tảng để cấu hình cho ứng dụng mới tạo. Ở đậy chúng ta chọn Push Website tiếp đến click button Next để tiếp tục.

Chọn nền tảng để cấu hình cho ứng dụng Push Website

Tiếp đến bạn sẻ chọn một trong 2 nhóm trình duyệt website đang thông dụng nhất hiện nay, nhóm 1: Google Chrome và Firefox, nhóm 2: Safari, không được chọn tất cả thật đáng tiết, Tài khoản pro thì có thể đầy, miễn phí phải chiệu thôi nhé. Xem hình dưới.

Chọn một trong 2 nhóm trình duyệt website để hiển thị Push Notification

Tùy theo lượng khách của mối trình duyệt web để bạn chọn nhóm trình duyệt này nhé. Ở đây tôi chon Google Chrome và Firefox.

Tiếp đến là cấu hình website của bạn icon mặt đình hiện thị cho chức năng Push Notification Website Với Onesignal. Phần này quan trọng lắm đó nhé.

Cấu hình icon mặt đình hiện thị cho chức năng Push Notification Website

Lăng chuột xuống tí sẻ có phần cấu hình subdomain kết thức chức năng Push Notification Website với onesignal. Thất chất bạn sẻ có một subdomian có HTTPS, thông qua subdomian này bạn sẻ Push Notification Website cho người dùng lên website chính của bạn.

Ở đây tôi đăng ký subdoman: https://jacksonit.onesignal.com

Và cuối cùng chọn mục tiêu SKD của bạn: Website Push, WordPress, Server API tùy theo bạn sử dụng cho website của mình.

3. Tích hợp code chức năng Push Notification Website với Onesignal vào website

appId: “2492125e-46fc-4a24-bd5a-84c1cfc4c079” => bạn thay thế với Your App ID của bạn nhé.
subdomainName: ‘ovuinhi.onesignal.com‘  => Bạn thay thế với subdomain bạn vừa đăng khí với onesignal.

4. Kết quả hiện ra trên website khi đã tích hợp đoạn javascript trên.

Kết quả hiện ra trên website chức năng Push Notification

Người dùng sẻ click vào icon thông báo màu đỏ để đăng ký nhận thông báo của website này. Icon nhỏ gòn và rất đẹp mắt đúng không nào. Tiếp đến mình sẻ hướng dẫn các bạn tạo một thông báo và push thông báo đó đến với người dùng đã đăng ký nhé.

5. Hướng dẫn tạo một Notification trên website onesignal và push Notification đến người dùng.

Các bạn login tai khoản vào website onesignal.com và tìm đến menu New Message ở bên trái website.

Thêm thông báo mới và push notification

Nhập URL bạn muốn người dùng click vào thông báo sẻ đến

Nhập URL bạn muốn người dùng
click vào thông báo sẻ đến

Tiếp đến bạn click vào button Preview để xem lại thông báo nhé. Nếu website của bạn chưa ai đăng ký thì không click vào button Preview được đâu, nó sẻ thông báo lỗi, giải pháp là tự đăng ký luôn cho chính mình nhé.

Tiếp đến click vào button Send để Push Notification đến cho người dùng. Mọi tay quá rồi. Mình kết thức bài viết tại đây nhé. Bài viết tiếp theo sẻ hướng dẫn Push Notification cho website đã có HTTPS 🙂  bye bye.

Bình Luận