Tạo thông báo đẩy trên trình duyệt khi chuyển Blog sang https cho các tên miền tùy chỉnh

Một tin rất vui gần đây cho cộng đồng người chơi blog đó là Blogger chính thức hỗ trợ giao thức https cho các Blog đang gắn tên miền tùy chỉnh. Việc cài đặt rất đơn giản chỉ cần đăng nhập Blogger qua địa chỉ https://draft.blogger.com sau đó chuyển tới phần cài đặt bật Tính khả dụng của HTTPS chuyển từ Không sang Có đợi ít phút làm mới lại trình duyệt khi nút Chuyển hướng HTTPS sáng lên thì bật sang Có là xong.

Sau khi đã chuyển địa chỉ Blog sang giao thức bảo mật https thì một trong những điều đầu tiên bạn cần nghĩ đến đó là tạo thông báo đẩy trên trình duyệt. Lưu ý thông báo chỉ xuất hiện trong trình duyệt FireFox và các trình duyệt lấy mã nguồn Chorme.

Vẫn là bài cũ soạn lại dựa trên dịch vụ OneSignal tuy nhiên chúng ta có điều chỉnh javascript chp 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 Web Push bấm GET STARTED

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

3. Trong bảng điều khiển chọn Add a new app

4. Đặt tên cho App rồi bấm Create tạo mới

5. Chọn mục Web Push rồi nhấn Next ở màn hình tiếp theo

6. Chọn Custom code trong màn hình tiếp theo

7. Trong mục Site Setup điền tên, địa chỉ Blog và link logo

8. Bước này chọn SAVE lưu lại

9. 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

10. Các bạn lấy appId ghép vào đoạn script dưới đây

Copy

<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

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é.