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

Xem 0

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.

web-push-notifications

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

web-push-notifications-1

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

web-push-notifications-2

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

web-push-notifications-3

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

web-push-notifications-4

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

web-push-notifications-5

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

web-push-notifications-6

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

web-push-notifications-6

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

web-push-notifications-9

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

web-push-notifications-7

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

web-push-notifications-12

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

Tags: bảo mậtBlogcài đặtcodeđăng nhậptemplatescript
  1. blank
    Trả lời
    1. blank

      từ từ để nó đồng bộ lại em, em nhớ làm đúng như hướng dẫn trong bài em nhé :wink:

      Xóa
  2. blank
  3. blank

    cái này khi có bài mới tự nó thông báo hay phải cài đặt ạ

    Trả lờiXóa
  4. blank

    Của em sao nó vẫn hiện hình cái chuông vậy ạ? Link Blog: https://goo.gl/mvo63w

    Trả lờiXóa

Phổ biến trong tuần

Tin mới

  • Monarque Hotel 4* Đà Nẵng
    Monarque Hotel 4* Đà Nẵng

    *Monarque Hotel là một trong những ks hoang gia tốt ở Đà Nẵng. Ks tọa lạc trên đường Võ Nguyên Gíap nằm ngay bãi tắm Mỹ Khê thơ mộng, đây cũng là bãi...

  • Chez Carole Resort 4* Phú Quốc
    Chez Carole Resort 4* Phú Quốc

    *Với một vị trí tuyệt đẹp trên đảo PQ khu nghĩ dưỡng Chez Carole là nơi vô cùng lý tưởng cho kỳ nghĩ của bạn khi đến với đảo ngọc. Chez Carole đc xây...

  • Saphir Hotel 4* Đà Lạt
    Saphir Hotel 4* Đà Lạt

    *Đà Lạt lun là điểm đến lý tưởng dành cho mọi du khách. Còn gì tuyệt vời hơn khi đc trải qua một kỳ nghĩ thú vị tại Tp sương mù với những cảnh sắc...

  • Lazi Beach Resort 4* Bình Thuận
    Lazi Beach Resort 4* Bình Thuận

    *Lazi Beach được xây dựng trên khu bờ biển với những nét độc đáo hiếm nơi nào có được. Những thảm co xanh trải dài dọc bờ biển, những thân cây dương...

  • Resort 5* Mer Perle Hòn Tằm
    Resort 5* Mer Perle Hòn Tằm

    *Mer Perle Hòn Tằm  là resort tọa lạc trên đảo hòn tằm giữa vịnh Nha Trang, khoảng không gian hoang sơ với những thảm cỏ xanh mướt và bờ cát...

  • Rong Biển Chiên Tỏi
    Rong Biển Chiên Tỏi

    *Thành Phần: -Tỏi tươi -Rong biển -Dầu ăn -Thịt sấy khô (nếu có) *Cách làm: -Cho dầu ăn vào chảo, sau khi nóng nổi tiêm li ti cho tỏi vào phi...

  • Bài 3 : Tính Chu Vi Và Diện Tích Hình Chữ Nhật
    Bài 3 : Tính Chu Vi Và Diện Tích Hình Chữ Nhật

    Trong các môn học , bài viết này liên quan đến môn toán học của các bạn . Các bạn cần nhớ đến công thức tính chu vi và diện tích của hình như nhật ....

  • Mẹo : Gõ Tiếng Việt Trong Game Không Lỗi Skill (Kỹ Năng) W
    Mẹo : Gõ Tiếng Việt Trong Game Không Lỗi Skill (Kỹ Năng) W

    Đôi Nét Về Bộ Gõ "GoTiengViet" Đây là bộ gõ nằm trong danh sách các bộ gõ có thể thể gõ tiếng Việt trong game mà không bị lỗi kỹ năng W ....

  • Tải Bộ Cài Windows 10 Pro Lite Version 1803 - Phiên Bản Dành Cho Máy Cấu Hình Thấp
    Tải Bộ Cài Windows 10 Pro Lite Version 1803 - Phiên Bản Dành Cho Máy Cấu Hình Thấp

    Ưu Điểm Của Windows 10 Pro Lite 1803Thích hợp cho máy tính văn phòng, máy tính cài phòng gameThích hợp cho máy tính và laptop có cấu hình thấpMáy có...

  • Internet 5G: Thay thế tốc độ cao cho cáp?
    Internet 5G: Thay thế tốc độ cao cho cáp?

    I.Wifi 5G Là Gì ? Tương tự như cách bạn kết nối WiFi ở nhà ngay bây giờ, thông qua một dịch vụ không dây hiện có như vệ tinh hoặc kết nối có dây...