/ / Cách gửi thông báo đẩy bằng JavaScript

Cách gửi thông báo đẩy bằng JavaScript

Thông báo JavaScript là một cách để gửi tin nhắn cho người dùng của bạn trong thời gian thực. Bạn có thể sử dụng chúng để thông báo về các cập nhật trang web, tin nhắn trò chuyện mới, email hoặc bất kỳ hoạt động truyền thông xã hội nào. Bạn cũng có thể sử dụng thông báo cho lời nhắc lịch (chẳng hạn như sắp có cuộc họp trên Google Meet hoặc Zoom).


Tìm hiểu cách tạo thông báo sự kiện bằng JavaScript và gửi chúng đến điện thoại hoặc trình duyệt web của bạn. Bạn sẽ đạt được điều này bằng cách sử dụng JavaScript phía máy khách được tích hợp sẵn—không yêu cầu thư viện bên ngoài!


Yêu cầu quyền gửi thông báo

Để tạo một thông báo, bạn cần gọi Thông báo lớp để tạo một đối tượng. Nó cung cấp cho bạn quyền truy cập vào các thuộc tính và phương thức khác nhau mà bạn có thể sử dụng để định cấu hình thông báo của mình. Nhưng trước khi tạo thông báo, trước tiên bạn cần yêu cầu người dùng cho phép.

Đoạn mã JavaScript sau sẽ yêu cầu quyền gửi thông báo cho người dùng. Các xin phep cuộc gọi sẽ trả về một thông báo cho biết trình duyệt có cho phép thông báo hay không:

 const button = document.querySelector('button')
  button.addEventListener("click", ()=> {
  Notification.requestPermission().then(permission => {
    alert(permission)
  })
})

Khi bạn nhấp vào nút, bạn có thể nhận được thông báo cho biết từ chối. Điều này có nghĩa là trình duyệt đã từ chối JavaScript gửi thông báo sự kiện. trạng thái cho phép là từ chối đối với trường hợp người dùng đã ngăn chặn rõ ràng các trang web gửi thông báo (thông qua cài đặt trình duyệt) hoặc người dùng đang lướt web ở chế độ ẩn danh.

Đối với những trường hợp như vậy, tốt hơn hết bạn nên tôn trọng quyết định của người dùng đối với các thông báo bị từ chối và bạn không nên làm phiền họ thêm nữa.

Gửi thông báo cơ bản

Bạn tạo một thông báo đẩy bằng cách tạo một Thông báo đối tượng với từ khóa mới. Để tìm hiểu sâu về lập trình hướng đối tượng, bạn có thể tham khảo hướng dẫn của chúng tôi về cách tạo các lớp trong JavaScript.

Vì bạn chỉ gửi thông báo nếu được cấp quyền, nên bạn cần đặt thông báo đó bên trong một nếu như kiểm tra.

 const button = document.querySelector('button')
button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      new Notification("Example notification")
    }
  })
})

Nhấp vào nút và bạn sẽ nhận được thông báo đẩy ở góc dưới cùng bên phải của trình duyệt web với nội dung được chỉ định.

Ảnh chụp màn hình thông báo trình duyệt trong Google Chrome

Đây là cách cơ bản nhất để tạo thông báo và nó hoạt động trên điện thoại cũng như trên máy tính của bạn. Hãy xem xét một số thuộc tính thông báo nâng cao.

Thuộc tính thông báo nâng cao

Ngoài tiêu đề thông báo, bạn cũng có thể chuyển đối số tùy chọn cho hàm tạo khi tạo đối tượng thông báo. Đối số tùy chọn này phải là một đối tượng. Tại đây, bạn có thể thêm một số tùy chọn để tùy chỉnh thông báo của mình.

tài sản cơ thể

Thuộc tính đầu tiên bạn nên biết là thân hình tài sản. Bạn sẽ sử dụng điều này để thêm nội dung vào thông báo của mình, thường là để truyền tải thêm thông tin dưới dạng văn bản. Đây là một ví dụ đơn giản:

 const button = document.querySelector('button')
button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      new Notification("Example notification", {
       body: "This is more text",
     })
    }
  })
})

Nếu bạn chạy mã này, nội dung văn bản sẽ hiển thị trong thông báo đẩy, bên dưới Thông báo ví dụ tiêu đề.

Thuộc tính dữ liệu

Thông thường, bạn có thể muốn thêm dữ liệu tùy chỉnh vào thông báo. Có thể bạn muốn hiển thị một thông báo lỗi cụ thể nếu quyền bị từ chối hoặc lưu trữ dữ liệu bạn nhận được từ một API. Đối với tất cả các trường hợp như vậy, bạn có thể sử dụng dữ liệu thuộc tính để thêm dữ liệu tùy chỉnh vào thông báo của bạn.

 button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      const notification = new Notification("Example notification", {
       body: "This is more text",
       data: {hello: "world"}
     })
    
     alert(notification.data.hello)
    }
  })
})

Bạn có thể truy cập dữ liệu từ dữ liệu thuộc tính tương tự như được hiển thị trong khối mã ở trên (bên trong báo động()).

Bạn cũng có thể liên kết người nghe sự kiện với thông báo của mình. Ví dụ: trình xử lý sự kiện sau đây sẽ thực thi bất cứ khi nào bạn đóng thông báo đẩy. Chức năng gọi lại chỉ ghi nhật ký thông báo tùy chỉnh.

 const notification = new Notification("Example notification", { 
  body: "This is more text",
  data: {hello: "world"}
})

notification. addEventListener("close", e => {
  console.log(e.target.data.hello)
})

Đây là một cách tuyệt vời để truyền dữ liệu nếu bạn cần làm gì đó khi ai đó đóng thông báo hoặc nhấp vào thông báo đó. ngoài đóng sự kiện (thực thi khi bạn đóng thông báo), bạn nên ghi nhớ những người nghe sự kiện này:

  • trình diễn: Thực hiện khi thông báo hiển thị.
  • nhấp chuột: Thực thi khi người dùng nhấp vào bất kỳ đâu trong thông báo.
  • lỗi: Thực thi khi bạn từ chối quyền gửi thông báo của JavaScript.

Thuộc tính biểu tượng

Các biểu tượng thuộc tính là để thêm biểu tượng vào thông báo đẩy. Giả sử bạn có một logo biểu tượng có tên logo.png trong thư mục hiện tại, bạn có thể sử dụng nó trong thông báo của mình như sau:

 const notification = new Notification("Example notification", { 
  icon: "logo.png"
})

Nếu bạn đang gặp khó khăn trong việc liên kết đến các tệp của mình, thì bạn cần hiểu cách hoạt động của các URL tương đối và URL tuyệt đối.

Khi bạn lưu tệp, làm mới trình duyệt và nhấp vào nút, thông báo sẽ có hình ảnh hiển thị ở phía bên trái của tiêu đề và nội dung.

Ảnh chụp màn hình thông báo trình duyệt trong Google Chrome

Thuộc tính thẻ

Khi bạn đặt nhãn thuộc tính trong thông báo của bạn, về cơ bản, bạn đang cung cấp cho thông báo một ID duy nhất. Hai thông báo không thể tồn tại cùng nhau nếu chúng có cùng một thẻ. Thay vào đó, thông báo mới nhất sẽ ghi đè lên thông báo cũ hơn.

Xem xét ví dụ nút trước của chúng tôi (không có thẻ). Nếu bạn bấm nhanh vào nút ba lần liên tiếp, ba thông báo sẽ xuất hiện và chúng sẽ xếp chồng lên nhau. Bây giờ, giả sử bạn đã thêm thẻ sau vào thông báo:

 const notification = new Notification("Example notification", { 
  body: "This is more text",
  tag: "My new tag"
})

Nếu bạn bấm vào nút một lần nữa, sẽ chỉ có một hộp thông báo xuất hiện. Mỗi lần nhấp tiếp theo sẽ ghi đè lên thông báo trước đó, do đó, chỉ một thông báo sẽ hiển thị bất kể bạn nhấp vào nút bao nhiêu lần. Điều này hữu ích nếu bạn muốn thêm dữ liệu động (như Math.random()) đến cơ thể:

 const notification = new Notification("Example notification", { 
  body: Math.random()
  icon: "logo.png",
  tag: "My body tag"
})

Mỗi khi bạn nhấp vào nút, một số mới sẽ xuất hiện. Sử dụng thuộc tính thẻ nếu bạn muốn ghi đè thông báo hiện tại bằng thông tin mới bên trong thông báo đó. Ví dụ: trong ứng dụng nhắn tin, bạn có thể sử dụng thuộc tính thẻ để ghi đè thông báo bằng tin nhắn mới.

Một ví dụ về thông báo đẩy bằng JavaScript

Ví dụ sau phát hiện bất cứ lúc nào bạn mất tiêu điểm trên trang của mình (nghĩa là khi bạn đóng trang hoặc mở một tab mới). Trong trường hợp này, mã sẽ gửi thông báo yêu cầu bạn quay lại:

 let notification
document.addEventListener("visibility-change", ()=> {
  if(document.visibilityState === "hidden") {
    notification = new Notification("Come back please", {
      body: "Don't leave just yet :("
      tag: "Come Back"
    })
  } else {
    notification.close()
  }
})

Bất cứ khi nào bạn mất tập trung vào trang đó, bạn sẽ nhận được thông báo yêu cầu quay lại trang đó. Nhưng một khi bạn trở lại trang, khác khối thực thi, đóng thông báo đẩy. Kỹ thuật này là tuyệt vời trong các tình huống mà bạn muốn cung cấp cho người dùng một số loại thông tin sau khi rời khỏi trang của bạn.

Tìm hiểu thêm về JavaScript

Thông báo sự kiện chỉ là một trong vô số tính năng bạn có thể tìm thấy trong JavaScript. Để thực sự giỏi với các thông báo, trước tiên bạn phải nắm được các tính năng ngôn ngữ cơ bản và cú pháp của JavaScript. Xây dựng các trò chơi đơn giản là một trong những cách giúp bạn nâng cao kỹ năng của mình và làm quen với các khái niệm cơ bản của ngôn ngữ.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *