ตัวอย่างการแจ้งเตือนบนเดสก์ท็อป Chrome [ปิด]

หนึ่งใช้การแจ้งเตือนบนเดสก์ท็อปของ Chromeอย่างไร ฉันต้องการใช้สิ่งนั้นในรหัสของฉันเอง

อัปเดต : นี่คือโพสต์บล็อกที่อธิบายการแจ้งเตือน webkit พร้อมตัวอย่าง

ในเบราว์เซอร์สมัยใหม่มีการแจ้งเตือนสองประเภท:

• การแจ้งเตือนบนเดสก์ท็อป - ง่ายต่อการเปิดใช้งานทำงานตราบเท่าที่หน้าเปิดอยู่และอาจหายไปโดยอัตโนมัติภายในสองสามวินาที
• การแจ้งเตือนผู้ปฏิบัติงานบริการ - มีความซับซ้อนเพิ่มขึ้นเล็กน้อย แต่สามารถทำงานในพื้นหลังได้ (แม้หลังจากปิดหน้า) จะคงอยู่และสนับสนุนปุ่มการทำงาน

โทร API ใช้พารามิเตอร์เดียวกัน (ยกเว้นสำหรับการดำเนินการ - ไม่สามารถใช้ได้กับการแจ้งเตือนสก์ท็อป) ซึ่งมีเอกสารที่ดีพอในMDNและพนักงานบริการบนGoogle เว็บความรู้พื้นฐานเว็บไซต์

ด้านล่างนี้เป็นตัวอย่างการทำงานของการแจ้งเตือนทางเดสก์ท็อปสำหรับ Chrome, Firefox, Opera และ Safari โปรดทราบว่าด้วยเหตุผลด้านความปลอดภัยที่เริ่มต้นด้วย Chrome 62 การอนุญาตสำหรับ API การแจ้งเตือนอาจไม่ได้รับการร้องขอจาก iframe ที่มาข้ามดังนั้นเราจึงไม่สามารถสาธิตสิ่งนี้โดยใช้ตัวอย่างโค้ดของ StackOverflow คุณจะต้องบันทึกตัวอย่างนี้ในไฟล์ HTML บนเว็บไซต์ / แอปพลิเคชันของคุณและตรวจสอบให้แน่ใจว่าใช้localhost://หรือ 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>

เรากำลังใช้API การแจ้งเตือนของ W3C อย่าสับสนกับAPI การแจ้งเตือนส่วนขยายของ Chromeซึ่งแตกต่างกัน การแจ้งเตือนส่วนขยายของ Chrome ทำงานได้อย่างชัดเจนในส่วนขยายของ Chrome เท่านั้นและไม่ต้องการการอนุญาตพิเศษจากผู้ใช้

การแจ้งเตือน W3C ทำงานในเบราว์เซอร์จำนวนมาก (ดูการสนับสนุนเกี่ยวกับcaniuse ) และต้องได้รับอนุญาตจากผู้ใช้ เพื่อเป็นการปฏิบัติที่ดีที่สุดอย่าขออนุญาตนี้โดยทันที อธิบายให้ผู้ใช้ครั้งแรกว่าทำไมพวกเขาจะต้องการการแจ้งเตือนและดูอื่น ๆรูปแบบการแจ้งเตือนผลักดัน

โปรดทราบว่า Chrome ไม่เคารพไอคอนการแจ้งเตือนบน Linux เนื่องจากข้อบกพร่องนี้

คำพูดสุดท้าย

การสนับสนุนการแจ้งเตือนอยู่ในฟลักซ์อย่างต่อเนื่องโดย API ต่างๆถูกเลิกใช้ในปีที่ผ่านมา หากคุณอยากรู้ให้ตรวจสอบการแก้ไขคำตอบก่อนหน้านี้เพื่อดูสิ่งที่เคยใช้ใน Chrome และเรียนรู้เรื่องราวของการแจ้งเตือน HTML ที่หลากหลาย

ตอนนี้มาตรฐานล่าสุดที่https://notifications.spec.whatwg.org/

ว่าทำไมมีสองสายที่แตกต่างกันเพื่อให้ผลเช่นเดียวกันขึ้นอยู่กับว่าคุณอยู่ในคนงานบริการหรือไม่ได้ - ดูตั๋วนี้ฉันยื่นในขณะที่ผมทำงานที่ Google

โปรดดูที่notification.jsสำหรับห้องสมุดผู้ช่วยเหลือ

ตรวจสอบการออกแบบและAPI เปค (ก็ยังคงเป็นร่าง) หรือตรวจสอบแหล่งที่มาจาก (หน้าไม่สามารถใช้ได้อีก) สำหรับตัวอย่างง่ายๆ: window.webkitNotifications.createNotificationมันเป็นส่วนใหญ่เรียกไปยัง

หากคุณต้องการตัวอย่างที่มีประสิทธิภาพมากขึ้น (คุณกำลังพยายามสร้างส่วนขยายของ Google Chrome ของคุณเองและต้องการทราบวิธีจัดการสิทธิ์การใช้งานพื้นที่จัดเก็บในตัวเครื่องและอื่น ๆ ) ให้ลองใช้Gmail Notifier Extension : ดาวน์โหลดไฟล์ crx แทนการติดตั้ง มันเปิดเครื่องรูดมันและอ่านรหัสต้นฉบับ

ดูเหมือนว่าwindow.webkitNotificationsเลิกใช้แล้วและถูกลบออกไปแล้ว อย่างไรก็ตามมีAPI ใหม่และดูเหมือนว่าจะทำงานใน Firefox เวอร์ชันล่าสุดได้เช่นกัน

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

ฉันชอบ: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examplesแต่ใช้ตัวแปรเก่าดังนั้นการสาธิตไม่ทำงานอีกต่อไป อยู่ในขณะนี้webkitNotificationsNotification

ฉันทำ wrapper การแจ้งเตือนนี้ง่าย ๆ ใช้งานได้กับ Chrome, Safari และ Firefox

อาจเป็นบน Opera, IE และ Edge ด้วย แต่ฉันยังไม่ได้ทดสอบ

เพิ่งได้รับไฟล์ alert.js จากที่นี่https://github.com/gravmatt/js-notifyและวางไว้ในหน้าของคุณ

รับที่ Bower

$ bower install js-notify

นี่คือวิธีการทำงาน:

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

คุณต้องตั้งชื่อ แต่วัตถุ json เป็นอาร์กิวเมนต์ที่สองเป็นตัวเลือก

นี่คือเอกสารที่ดีเกี่ยวกับ API

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

และคำอธิบายวิดีโออย่างเป็นทางการจาก Google

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

Notify.js เป็นตัวล้อมรอบการแจ้งเตือนของ webkit ใหม่ มันใช้งานได้ดีทีเดียว

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-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>