- vừa được xem lúc

Code dạo siêu tốc - Một số trang web đã làm Desktop Notification như thế nào?

0 0 20

Người đăng: Cảnh Sát Chính Tả

Theo Viblo Asia

Nếu bạn có truy cập các trang web ví dụ như Facebook, Zalo, Twitter, *** hub,..etc.. sẽ thường thấy có một ô cho phép yêu cầu trình duyệt lưu mật khẩu và một ô khác là "Cho phép chrome gửi thông báo" (đại loại thế).

Khi bạn bấm vào cho phép thì sau này các thông báo sẽ được hiển thị phía dưới góc phải màn hình cùng với đó là tiếng thông báo khá là khó chịu, riêng mình thì auto tắt ?

Bài viết siêu tốc này mình sẽ giới thiệu cách để các bạn tự tạo một mẩu thông báo như vậy cho trang web của mình, yên tâm là code siêu tốc nên bài viết siêu ngắn, chỉ khoảng 2 - 3p đọc thôi

Chuẩn bị nguyên liệu

  • VS Code hoặc Sublime hoặc Vim hoặc Word cho bạn nào thích chế độ hardcore ?
  • Chrome, hoặc bất cứ trình duyệt nào chạy lõi Chromium. Lý do là các trình duyệt lõi Chromium tự bản thân nó có một bộ các công cụ Javascript để tương tác với máy tính của bạn, nếu bạn nào đã từng làm Extension cho Chrome chắc sẽ biết điều này. Với các trình duyệt không sử dụng lõi Chromium có thể chức năng này sẽ được xử lý bằng cách khác.

Code thôi

Đầu tiên các bạn cần cái gì đó mà các bạn có thể kích hoạt thông báo, mình sẽ chỉ tạo ra một trang HTML đơn giản như sau:

index.html

<html lang="en"> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="noti.js"></script> <title>Simple Chrome Desktop Notification</title> </head> <body> <button id="btn-show-notification">Notify Me!</button> </body>
</html>

Chỉ đơn giản là show ra cái button để tạo ra sự kiện hiện thông báo thôi chứ không có gì nhiều

noti.js

$(document).ready(function () { $(document).on('DOMContentLoaded', function () { // Yêu cầu cấp quyền cho phép bật thông báo  if (!Notification) { console.log('Desktop notifications are not available in your browser.'); return; } // Ở trên mình có nói Chromium cung cấp một bộ công cụ JS, Notification chính là một trong những Object như thế  if (Notification.permission !== 'granted') { Notification.requestPermission(); } }); function showNotification() { if (Notification.permission !== 'granted') { Notification.requestPermission(); } else { // Các options sẽ được hiển thị trên noti const options = { body: 'Simple Chrome Desktop Notification', dir: 'ltr', image: 'image.jpg' }; const notification = new Notification('Notification', options); notification.onclick = function () { // Khi user bấm vào noti thì sẽ được chuyển hướng đến đâu window.open('https://www.google.com'); }; } } $('#btn-show-notification').on('click', showNotification);
});

Chạy Code

Sau khi code xong, các bạn chạy file HTML với localhost rồi bấm vào nút sẽ được kết quả như sau

Chốt

Đó rất đơn giản dễ làm, không tốn nhiều thời gian đọc lắm nhỉ

Code dạo siêu tốc - Siêu tốc như code dạo!

Bình luận

Bài viết tương tự

- vừa được xem lúc

MOSH: Kẻ hủy diệt SSH

Lời nói đầu. Lời đầu tiên xin được xin chào cả nhà, đã lâu lắm rồi mình không viết blog nay May Fest mà người iu mình thích cái áo viblo quá nên xin phép nổ phát súng trên Viblo về Mosh - thứ khá hay

0 0 126

- vừa được xem lúc

Vòng đời và trạng thái của Thread

A. Giới thiệu.

0 0 117

- vừa được xem lúc

Giải quyết vấn đề N+1 trong quan hệ cha - con vô tận bằng Eager Loading

Vấn đề. Trong khi phát triển ứng dụng, chắc hẳn các bạn đã gặp phải trường hợp đệ quy cha-con trong khi phát triển các dự án, ví dụ như cây thư mục như sau:.

0 0 172

- vừa được xem lúc

Bạn tổ chức thư mục views cho các dự án Laravel như thế nào?

Hầu hết các ứng dụng Laravel có rất nhiều views. Một ứng dụng nhỏ sẽ không xảy ra vấn đề gì cả, tuy nhiều nếu dự án lớn dần theo thời gian, chúng ta sẽ gặp bế tắc trong việc tổ chức và sắp xếp các vie

0 0 189

- vừa được xem lúc

Sự khác nhau giữa những điều tưởng giống nhau - Phần 3

Hôm nay, để tiếp tục cho series so sánh, hãy cùng mình khám phá thêm 2 địa danh mới khá nổi tiếng của Việt Nam mình đó là Cù Lao Chàm và đảo Lý Sơn. .

0 0 99

- vừa được xem lúc

Một số thuật toán sắp xếp

Chắc hẳn ngồi trên ghế giảng đường đại học thì ai cũng sẽ được làm quen với thuật toán. Nghe thì thật là trừu tượng và mơ hồ, nhưng để tối ưu hóa những bài toán đặt ra thì bắt buộc các bạn phải học đế

0 0 156