Ví dụ thông báo trên màn hình Chrome [đã đóng]

Làm thế nào để một người sử dụng thông báo trên màn hình Chrome ? Tôi muốn sử dụng nó trong mã của riêng tôi.

Cập nhật : Đây là một bài đăng blog giải thích các thông báo webkit với một ví dụ.

Trong các trình duyệt hiện đại, có hai loại thông báo:

• Thông báo trên màn hình - đơn giản để kích hoạt, hoạt động miễn là trang được mở và có thể tự động biến mất sau vài giây
• Thông báo cho nhân viên phục vụ - phức tạp hơn một chút, nhưng chúng có thể hoạt động ở chế độ nền (ngay cả sau khi trang bị đóng), vẫn tồn tại và các nút hành động hỗ trợ

Cuộc gọi API có cùng tham số (ngoại trừ các hành động - không khả dụng trên các thông báo trên máy tính để bàn), được ghi lại rõ ràng trên MDN và cho nhân viên dịch vụ, trên trang web Cơ bản về Web của Google .

Dưới đây là một ví dụ hoạt động về thông báo trên màn hình cho Chrome, Firefox, Opera và Safari. Lưu ý rằng vì lý do bảo mật, bắt đầu với Chrome 62, quyền cho API thông báo có thể không còn được yêu cầu từ iframe có nguồn gốc chéo , vì vậy chúng tôi không thể giới thiệu điều này bằng đoạn mã của StackOverflow. Bạn sẽ cần lưu ví dụ này trong tệp HTML trên trang web / ứng dụng của bạn và đảm bảo sử dụng localhost://hoặc HTTPS.

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});


function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}

 <button onclick="notifyMe()">Notify me!</button>

Chúng tôi đang sử dụng API thông báo W3C . Đừng nhầm lẫn điều này với API thông báo tiện ích mở rộng của Chrome , khác với API . Thông báo tiện ích mở rộng của Chrome rõ ràng chỉ hoạt động trong các tiện ích mở rộng của Chrome và không yêu cầu bất kỳ sự cho phép đặc biệt nào từ người dùng.

Thông báo W3C hoạt động trong nhiều trình duyệt (xem hỗ trợ về caniuse ) và yêu cầu sự cho phép của người dùng. Như một cách thực hành tốt nhất, đừng yêu cầu sự cho phép này ngay lập tức. Trước tiên hãy giải thích cho người dùng lý do tại sao họ muốn có thông báo và xem các mẫu thông báo đẩy khác .

Lưu ý rằng Chrome không tôn trọng biểu tượng thông báo trên Linux, do lỗi này .

Từ cuối cùng

Hỗ trợ thông báo đã liên tục thay đổi, với các API khác nhau bị phản đối trong những năm qua. Nếu bạn tò mò, hãy kiểm tra các chỉnh sửa trước đây của câu trả lời này để xem những gì đã từng hoạt động trong Chrome và để tìm hiểu câu chuyện về các thông báo HTML phong phú.

Bây giờ tiêu chuẩn mới nhất là tại https://notifying.spec.whatwg.org/ .

Về lý do tại sao có hai cuộc gọi khác nhau cho cùng một hiệu ứng, tùy thuộc vào việc bạn có làm nhân viên dịch vụ hay không - hãy xem vé này tôi đã nộp trong khi tôi làm việc tại Google .

Xem thêm notify.js để biết thư viện trợ giúp.

Kiểm tra thiết kế và đặc tả API (vẫn là bản nháp) hoặc kiểm tra nguồn từ (trang không còn khả dụng) để biết ví dụ đơn giản: Đây chủ yếu là một cuộc gọi đến window.webkitNotifications.createNotification.

Nếu bạn muốn có một ví dụ mạnh mẽ hơn (bạn đang cố gắng tạo tiện ích mở rộng Google Chrome của riêng mình và muốn biết cách xử lý các quyền, bộ nhớ cục bộ và như vậy), hãy xem Tiện ích mở rộng Trình thông báo của Gmail : tải xuống tệp crx thay vì cài đặt nó, giải nén nó và đọc mã nguồn của nó.

Có vẻ như window.webkitNotificationsđã bị phản đối và loại bỏ. Tuy nhiên, có một API mới và dường như nó cũng hoạt động trong phiên bản Firefox mới nhất.

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Whatever the user answers, we make sure we store the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  } else {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen

Tôi thích: http://www.html5rocks.com/en/tutorials/notifying/quick/#toc-examples nhưng nó sử dụng các biến cũ, vì vậy bản demo không hoạt động nữa. webkitNotificationstại là Notification.

Tôi đã thực hiện gói thông báo đơn giản này. Nó hoạt động trên Chrome, Safari và Firefox.

Có lẽ trên Opera, IE và Edge cũng vậy nhưng tôi chưa thử nghiệm nó.

Chỉ cần lấy tệp notify.js từ đây https://github.com/gravmatt/js-notify và đưa nó vào trang của bạn.

Nhận nó trên Bower

$ bower install js-notify

Đây là cách nó hoạt động:

notify('title', {
    body: 'Notification Text',
    icon: 'path/to/image.png',
    onclick: function(e) {}, // e -> Notification object
    onclose: function(e) {},
    ondenied: function(e) {}
  });

Bạn phải đặt tiêu đề nhưng đối tượng json làm đối số thứ hai là tùy chọn.

Đây là tài liệu hay về API,

https://developer.chrome.com/apps/notifying

Và, giải thích video chính thức của Google,

https://developers.google.com/live/shows/83992232-1001

Notify.js là một trình bao bọc xung quanh các thông báo webkit mới. Nó hoạt động khá tốt.

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifying-api/

<!DOCTYPE html>

<html>

<head>
<title>Hello!</title>
<script>
function notify(){

if (Notification.permission !== "granted") {
Notification.requestPermission();
}
 else{
var notification = new Notification('hello', {
  body: "Hey there!",
});
notification.onclick = function () {
  window.open("http://google.com");
};
}
}
</script>
</head>

<body>
<button onclick="notify()">Notify</button>
</body>