API Thông báo chịu trách nhiệm hiển thị các thông báo của hệ thống người dùng. Đó là giao diện mà trình duyệt hiển thị cho nhà phát triển để cho phép hiển thị thông báo cho người dùng, với sự cho phép của họ, ngay cả khi trang web không mở trong trình duyệt
Giới thiệu về API thông báo
CácAPI thông báolà giao diện mà trình duyệt hiển thị cho nhà phát triển để cho phéphiển thị thông báo cho người dùng, với sự cho phép của họ, ngay cả khi trang web / ứng dụng web không mở trong trình duyệt.
Những thông báo đó nhất quán và có nguồn gốc, có nghĩa là người nhận đã quen với giao diện người dùng và trải nghiệm người dùng của chúng, là trên toàn hệ thống và không dành riêng cho trang web của bạn.
Kết hợp vớiAPI đẩycông nghệ này có thể là một cách thành công để tăng mức độ tương tác của người dùng và nâng cao khả năng của ứng dụng của bạn.
API thông báo tương tác nhiều vớiNhân viên dịch vụ, vì chúng được yêu cầu cho Thông báo đẩy. Bạncó thểsử dụng API Thông báo mà không có Đẩy, nhưng các trường hợp sử dụng của nó bị hạn chế.
if (window.Notification && Notification.permission !== "denied") {
Notification.requestPermission((status) => {
// status is "granted", if accepted by user
var n = new Notification('Title', {
body: 'I am the body text!',
icon: '/path/to/icon.png' // optional
})
})
}
n.close()
Quyền
Để hiển thị thông báo cho người dùng, bạn phải có quyền làm như vậy.
CácNotification.requestPermission()
cuộc gọi phương thức yêu cầu quyền này.
Bạn có thể gọi
Notification.requestPermission()
trong biểu mẫu rất đơn giản này và nó sẽ hiển thị một bảng cấp quyền cho phép - trừ khi quyền đã được cấp trước đó.
Để thực hiện điều gì đó khi người dùng tương tác (cho phép hoặc từ chối), bạn có thể đính kèm một hàm xử lý vào nó:
const process = (permission) => {
if (permission === "granted") {
// ok we can show the permission
}
}
Notification.requestPermission((permission) => {
process(permission)
}).then((permission) => {
process(permission)
})
Xem cách chúng tôi vượt qua trong một cuộc gọi lại và chúng tôi cũng mong đợi mộtlời hứa. Điều này là do các triển khai khác nhau củaNotification.requestPermission()
được thực hiện trong quá khứ, mà bây giờ chúng tôi phải hỗ trợ vì chúng tôi không biết trước phiên bản nào đang chạy trong trình duyệt. Vì vậy, để giữ mọi thứ ở một vị trí duy nhất, tôi đã trích xuất xử lý quyền trongprocess()
chức năng.
Trong cả hai trường hợp, hàm đó được thông qua mộtpermission
chuỗi có thể có một trong các giá trị sau:
granted
: người dùng đã chấp nhận, chúng tôicó thểhiển thị một sự cho phépdenied
: người dùng bị từ chối, chúng tôikhông thểhiển thị bất kỳ sự cho phép nào
Các giá trị đó cũng có thể được truy xuất khi kiểm traNotification.permission
thuộc tính mà - nếu người dùng đã cấp quyền - sẽ đánh giágranted
hoặc làdenied
, nhưng nếu bạn chưa gọiNotification.requestPermission()
tuy nhiên, nó sẽ giải quyếtdefault
.
Tạo thông báo
CácNotification
đối tượng tiếp xúc bởiwindow
trong trình duyệt cho phép bạn tạo thông báo và tùy chỉnh giao diện của nó.
Đây là ví dụ đơn giản nhất, hoạt động sau khi bạn yêu cầu quyền:
Notification.requestPermission()
new Notification('Hey')
Bạn có một số tùy chọn để tùy chỉnh thông báo.
Thêm một cơ thể
Đầu tiên, bạn có thể thêm nội dung, thường được hiển thị dưới dạng một dòng:
new Notification('Hey', {
body: 'You should see this!'
})
Thêm hình ảnh
Bạn có thể thêm một thuộc tính biểu tượng:
new Notification('Hey', {
body: 'You should see this!',
icon: '/user/themes/writesoftware/favicon.ico'
})
Có thể tìm thấy nhiều tùy chọn tùy chỉnh hơn, với các thuộc tính dành riêng cho nền tảng tạihttps://developer.mozilla.org/docs/Web/API/Notification
Đóng thông báo
Bạn có thể muốn đóng một thông báo sau khi bạn mở nó.
Để làm như vậy, hãy tạo tham chiếu đến thông báo bạn mở:
const n = new Notification('Hey')
và sau đó bạn có thể đóng nó sau bằng cách sử dụng:
n.close()
hoặc với thời gian chờ:
setTimeout(n.close(), 1 * 1000)
Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript
Các hướng dẫn khác về trình duyệt:
- Một số thủ thuật hữu ích có sẵn trong HTML5
- Cách tôi làm cho một trang web dựa trên CMS hoạt động ngoại tuyến
- Hướng dẫn hoàn chỉnh về ứng dụng web tiến bộ
- API tìm nạp
- Hướng dẫn API đẩy
- API nhắn tin kênh
- Hướng dẫn Nhân viên Dịch vụ
- Hướng dẫn API bộ nhớ cache
- Hướng dẫn API thông báo
- Đi sâu vào IndexedDB
- API Bộ chọn: querySelector và querySelectorAll
- Tải JavaScript hiệu quả với trì hoãn và không đồng bộ
- Mô hình đối tượng tài liệu (DOM)
- API lưu trữ web: lưu trữ cục bộ và lưu trữ phiên
- Tìm hiểu cách hoạt động của HTTP Cookies
- API lịch sử
- Định dạng hình ảnh WebP
- XMLHttpRequest (XHR)
- Hướng dẫn chuyên sâu về SVG
- URL dữ liệu là gì
- Lộ trình tìm hiểu Nền tảng Web
- CORS, Chia sẻ tài nguyên đa nguồn gốc
- Nhân viên web
- Hướng dẫn requestAnimationFrame ()
- Doctype là gì
- Làm việc với Bảng điều khiển DevTools và API Bảng điều khiển
- API tổng hợp giọng nói
- Cách chờ sự kiện DOM sẵn sàng bằng JavaScript thuần túy
- Cách thêm lớp vào phần tử DOM
- Cách lặp qua các phần tử DOM từ querySelectorAll
- Cách xóa một lớp khỏi phần tử DOM
- Cách kiểm tra xem một phần tử DOM có một lớp hay không
- Cách thay đổi giá trị nút DOM
- Cách thêm sự kiện nhấp chuột vào danh sách các phần tử DOM được trả về từ querySelectorAll
- WebRTC, API web thời gian thực
- Cách lấy vị trí cuộn của một phần tử trong JavaScript
- Cách thay thế một phần tử DOM
- Cách chỉ chấp nhận hình ảnh trong trường tệp đầu vào
- Tại sao sử dụng phiên bản xem trước của trình duyệt?
- Đối tượng Blob
- Đối tượng tệp
- Đối tượng FileReader
- Đối tượng FileList
- ArrayBuffer
- ArrayBufferView
- Đối tượng URL
- Mảng đã nhập
- Đối tượng DataView
- API BroadcastChannel
- API luồng
- Đối tượng FormData
- Đối tượng Điều hướng
- Cách sử dụng API vị trí địa lý
- Cách sử dụng getUserMedia ()
- Cách sử dụng API Kéo và Thả
- Cách làm việc với tính năng cuộn trên các Trang Web
- Xử lý các biểu mẫu trong JavaScript
- Sự kiện bàn phím
- Sự kiện chuột
- Chạm vào sự kiện
- Cách xóa tất cả phần tử con khỏi phần tử DOM
- Cách tạo thuộc tính HTML bằng vanilla Javascript
- Làm cách nào để kiểm tra xem một hộp kiểm đã được chọn bằng JavaScript hay chưa?
- Cách sao chép vào khay nhớ tạm bằng JavaScript
- Cách tắt một nút bằng JavaScript
- Cách làm cho một trang có thể chỉnh sửa trong trình duyệt
- Cách lấy giá trị chuỗi truy vấn trong JavaScript với URLSearchParams
- Cách xóa tất cả CSS khỏi một trang cùng một lúc
- Cách sử dụng insertAdjacentHTML
- Safari, cảnh báo trước khi thoát
- Cách thêm hình ảnh vào DOM bằng JavaScript
- Cách đặt lại biểu mẫu
- Cách sử dụng Google Fonts