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
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. Nhập thông tin cá nhân hóa tài khoản OneSignal và tạo app
- Nhập thông tin về người tại tài khoản
- Nhập thông tin về doanh nghiệp
- Nhập tên website của bạn hoặc tên app muốn tạo -> chọn Create
Sau khi tạo hoàn tất, pop up hướng dẫn sẽ hiển thị, bạn có thể chọn bỏ qua
3. TẠO APP VÀ SETUP:
Khi đã hoàn tất tạo app, bạn sẽ thấy trên app đã tạo trên danh sách Your apps
Chọn vào app để tạo để bắt đầu thiết lập app
Chọn Activate tại mục Website
Trong mục Web Configuration:
- 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 6: Tải file OneSignal SDK files
Hệ thống trả về file .zip bạn cần giải nén thành file .js . Sau đó, chọn Go back ở cuối trang để quay lại phần thiết lập trước đó.
Bước 7: Bạn vào trang admin Haravan dùng quyền Chủ sở hữu tại trang quản trị. Vào mục Apps > Cài đặt app Haravan Service Worker: https://serviceworker-apps.haravan.com/serviceworker/install
Tiến hành tải file .js ở bước 6 lên hệ thống:
Chọn Nhập File:
Sau khi hệ thống load thành công sẽ sinh ra một đường link:
Bước 8: Quay lại trang OneSignal, vào mục 5 Advandced Push Settings (Optional), copy đoạn link đã có ở bước 7
Thực hiện chèn nội dung như ảnh sau, chọn Save để hoàn tất:
Bước 9: Tại trang tiếp theo, mục 7. Add Code to Site chọn Copy đoạn code được cung cấp
Sau đó add code được cung cấp vào website, 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ị:
Lưu ý: Nếu bạn không rành về code, vui lòng gửi nội dung code và vị trí bạn muốn hiển thị cho kỹ thuật để được hỗ trợ gắn chính xác.
Sau đó bấm Finish là xong
Kết quả:
