Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp

Cập nhật: 12/09/2019 Bởi Duy... - A- A+

Thông báo đẩy (Push Notification) hiện nay đang được rất nhiều website áp dụng để gửi thông báo quan trọng cho các khách hàng truy cập vào website ngay trên tại trình duyệt, điều này trở nên phổ biến khi FireFox và Google Chrome bắt đầu hỗ trợ kiểu thông báo này, vì vốn thông báo đẩy được hình thành trên các hệ điều hành điện thoại trước.
Nhìn chung việc sử dụng thông báo đẩy có lợi và tối ưu hơn là các hình thức gửi thông tin khác như Email hay tin nhắn, bởi vì nó đập ngay vào mắt người dùng khi họ mở trình duyệt hoặc mở thiết bị di động. Nếu bạn thực hiện kinh doanh trên website thì nó là một cách rất tối ưu để mời gọi khách hàng quay trở lại website.

Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
Vẫn là thủ thuật cũ dựa trên dịch vụ OneSignal tuy nhiên chúng ta có điều chỉnh javascript cho phép chỉ xuất hiện hộp thông báo bên dưới địa chỉ https bên góc trái trình duyệt thay xuất hiện biểu tượng hình cái chuông dưới góc phải.

Các bước thực hiện như sau

1. Truy cập địa chỉ https://onesignal.com chọn mục Start for Free.
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
2. Đăng ký mới hoặc đăng nhập dựa vào tài khoản có sẵn của các dịch vụ Github, Google, Facebook, mình sử dụng Github cho nhanh
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
3. Trong bảng điều khiển chọn ADD APP
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
4. Đặt tên cho App rồi bấm ADD APP để tạo.
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
5. Chọn mục Web Push rồi nhấn Next ở màn hình tiếp theo.
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
6. Chọn Custom code trong màn hình tiếp theo.
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
7. Trong mục Site Setup điền tên, địa chỉ Blog và link logo xong rồi bấn Save để lưu lại.
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
8. Khi trình duyệt chuyển qua trang mới các bạn tìm đến mục COPY CODE các bạn chỉ cần lấy phần appId thôi.
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
10. Các bạn lấy appId ghép vào đoạn script dưới đây
<link href='/manifest.json' rel='manifest'/>
<script async='' src='https://cdn.onesignal.com/sdks/OneSignalSDK.js'></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "tên appId",
      autoRegister: true,
      notifyButton: {
        enable: false,
      },
    });
  });
</script>
11. Bước cuối các bạn vào chỉnh sửa template tìm đến thẻ </head> và đặt đoạn script ngay trên nó rồi lưu lại là xong
Tạo thông báo đẩy trên trình duyệt cho web/blog khi bật https nhìn chuyên nghiệp
Các bạn để lại nhận xét bên dưới nếu gặp khó khăn phần nào nhé.

@ngylduy, @688.in, @ngylduy, @ngylduy