Xin chào,

Lần này chúng ta sẽ tìm hiểu về thông báo trên web và cách gửi chúng.

Trước khi bắt đầu, tôi muốn nhấn mạnh rằng đây sẽ là một bài viết bắt đầu đơn giản, có lẽ tôi sẽ viết một bài chi tiết sau.

Giới thiệu

API Notificationtồn tại trong windowđối tượng và đó là một phương pháp phổ biến để kiểm tra tính khả dụng của API.

//check if the Notification API available in the window object
if(window.Notification) {
  //all other Notification API calls
}

1. requestPermission() trả về một lời hứa.
2. Thông báo () chính nó.

Tạo 2 tệp có tên là index.htmlvàscript/app.js

index.html

Tệp này tự giải thích, chúng tôi sẽ có 2 nút đầu tiên là để nhận quyền truy cập thông báo và nút thứ hai là gửi thông báo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Notification</title>
  </head>
  <body>
    <h1>
      Notionfications in web?
    </h1>
    <button id="get-noti-access-btn">
      Get Notionfication Access
    </button>
    <button id="send-noti-btn">
      Send Notionfication
    </button>
  </body>
  <script src="./script/app.js"></script>
</html>

app.js

Tệp này chịu trách nhiệm nhận quyền thông báo từ người dùng và gửi thông báo mẫu.

//block 1
const requestBtn = document.querySelector("#get-noti-access-btn");
const sendNotiBtn = document.querySelector("#send-noti-btn");

//block 2
const getNotificationAccess = () => {
  console.log("get noti access");
  if (window.Notification) {
    Notification.requestPermission().then((permission) => {
      console.log(permission);
    });
  } else {
    console.log("No noti avaialble in browser");
  }
};

//block 3
const sendNotification = () => {
  console.log("send noti");
  setTimeout(() => {
    const notification = new Notification("hello");
  }, 5000);
};

//block 4
requestBtn.addEventListener("click", (e) => {
  e.preventDefault();
  getNotificationAccess();
});

sendNotiBtn.addEventListener("click", (e) => {
  e.preventDefault();
  sendNotification();
});

1. Trong khối Đầu tiên, block 1chúng tôi đang khởi tạo các phần tử DOM (các nút).
2. Block 2có chức năng getNotificationAccessnhận quyền truy cập thông báo và trong quá trình thực thi, lời nhắc để nhận được sự chấp thuận của người dùng sẽ xuất hiện như trong ảnh chụp màn hình bên dưới.

Đối permissionsố trong then()sẽ trả về các chuỗi sau

• granted→ người dùng đã nhấp vào Cho phép.
• denied→ người dùng nhấp vào Chặn.
• default→ người dùng không được phép cũng không bị chặn. (xử lý điều này như bị từ chối)

3. Khối 3 có sendNotificationchức năng tạo thông báo.

Để mô phỏng một quá trình chạy dài, chúng tôi đang sử dụng setTimeoutchức năng và tạo thông báo mới bên trong nó.

const x = new Notification("Hello")→ dòng này sẽ tạo một thông báo và kích hoạt nó.

4. Khối 4 gắn trình lắng nghe sự kiện vào các nút tương ứng.

Chạy mã và cảnh báo.

1. Trước hết, bạn có thể không kiểm tra ứng dụng này trong một số IDE trực tuyến nhưng trong một số IDE, bạn phải mở bản xem trước trong cửa sổ mới để ứng dụng này hoạt động.
2. Bạn cũng không thể chạy cái này trong máy chủ cục bộ của mình vì để có thể đẩy thông báo, trang web phải có SSLvà HTTPS. Có thể có một số cách giải quyết.

Bất kỳ sai lầm hoặc lỗi trong ví dụ xin vui lòng cho tôi biết.

Tôi sẽ liên kết bài đăng chuyên sâu Notificationvề API tại đây nếu tôi nghĩ ra một bài đăng trong tương lai.