Chrome桌面通知示例[关闭]

最新推荐文章于 2024-08-29 14:11:00 发布

xfxf996

最新推荐文章于 2024-08-29 14:11:00 发布

阅读量692

点赞数

文章标签： javascript desktop google-chrome notifications

原文链接：https://oldbug.net/q/9WpY/Chrome-desktop-notification-example-closed

版权

本文提供了一个适用于Chrome、Firefox、Opera和Safari的桌面通知工作示例，介绍了W3C Notifications API的使用。提醒注意，出于安全原因，从Chrome 62开始，Notification API可能无法在跨源iframe中请求权限。建议先向用户解释通知的用途，再请求权限。还提到了服务工作者通知的复杂性和优势，并提供了相关资源链接。

摘要由CSDN通过智能技术生成

本文翻译自：Chrome desktop notification example [closed]

How does one use Chrome desktop notifications ? 如何使用Chrome桌面通知？ I'd like that use that in my own code. 我想在我自己的代码中使用它。

Update : Here's a blog post explaining webkit notifications with an example. 更新：这是一篇博客文章，通过示例解释webkit通知。

#1楼

参考：https://stackoom.com/question/9WpY/Chrome桌面通知示例-关闭

#2楼

In modern browsers, there are two types of notifications: 在现代浏览器中，有两种类型的通知：

Desktop notifications - simple to trigger, work as long as the page is open, and may disappear automatically after a few seconds 桌面通知 - 只需打开页面即可轻松触发，并可在几秒钟后自动消失
Service Worker notifications - a bit more complicated, but they can work in the background (even after the page is closed), are persistent, and support action buttons 服务工作者通知 - 有点复杂，但它们可以在后台工作（即使在页面关闭后），是持久性的，并且支持操作按钮

The API call takes the same parameters (except for actions - not available on desktop notifications), which are well-documented on MDN and for service workers, on Google's Web Fundamentals site. API调用采用相同的参数（在桌面通知中不可用的操作除外），这些参数在Google的Web Fundamentals站点上有详细记录在MDN和服务工作者上。

Below is a working example of desktop notifications for Chrome, Firefox, Opera and Safari. 以下是适用于Chrome，Firefox，Opera和Safari的桌面通知的工作示例。 Note that for security reasons, starting with Chrome 62, permission for the Notification API may no longer be requested from a cross-origin iframe , so we can't demo this using StackOverflow's code snippets. 请注意，出于安全原因，从Chrome 62开始，可能无法再从跨源iframe请求Notification API的权限，因此我们无法使用StackOverflow的代码段进行演示。 You'll need to save this example in an HTML file on your site/application, and make sure to use localhost:// or HTTPS. 您需要将此示例保存在站点/应用程序的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>

We're using the W3C Notifications API. 我们正在使用W3C Notifications API。 Do not confuse this with the Chrome extensions notifications API , which is different. 不要将此与Chrome 扩展程序通知API混淆，后者不同。 Chrome extension notifications obviously only work in Chrome extensions, and don't require any special permission from the user. Chrome扩展程序通知显然只能在Chrome扩展程序中使用，并且不需要用户的任何特殊权限。

W3C notifications work in many browsers (see support on caniuse ), and require user permission. W3C通知适用于许多浏览器（请参阅caniuse支持），并需要用户权限。 As a best practice, don't ask for this permission right off the bat. 作为最佳做法，请勿立即请求此许可。 Explain to the user first why they would want notifications and see other push notifications patterns . 首先向用户解释他们为什么要通知并查看其他推送通知模式。

Note that Chrome doesn't honor the notification icon on Linux, due to this bug . 请注意，由于此错误，Chrome不会尊重Linux上的通知图标。

Final words 最后的话

Notification support has been in continuous flux, with various APIs being deprecated over the last years. 通知支持一直在不断变化，过去几年中各种API都被弃用。 If you're curious, check the previous edits of this answer to see what used to work in Chrome, and to learn the story of rich HTML notifications. 如果您感到好奇，请查看此答案的先前修改，以查看以前在Chrome中工作的内容，并了解丰富的HTML通知的故事。

Now the latest standard is at https://notifications.spec.whatwg.org/ . 现在最新的标准是https://notifications.spec.whatwg.org/ 。

As to why there are two different calls to the same effect, depending on whether you're in a service worker or not - see this ticket I filed while I worked at Google . 至于为什么有两种不同的调用相同的效果，取决于你是否在服务工作者 - 看到我在谷歌工作时提交的这张票。

See also notify.js for a helper library. 另请参阅notify.js以获取帮助程序库。

#3楼

Here is nice documentation on APIs, 这是关于API的很好的文档，

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

And, official video explanation by Google, 而且，谷歌的官方视频解释，

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

#4楼

Check the design and API specification (it's still a draft) or check the source from (page no longer available) for a simple example: It's mainly a call to window.webkitNotifications.createNotification . 检查设计和API规范（它仍然是草稿）或从（页面不再可用）检查源代码的简单示例：它主要是对window.webkitNotifications.createNotification的调用。

If you want a more robust example (you're trying to create your own Google Chrome's extension, and would like to know how to deal with permissions, local storage and such), check out Gmail Notifier Extension : download the crx file instead of installing it, unzip it and read its source code. 如果您想要一个更强大的示例（您尝试创建自己的Google Chrome扩展程序，并且想知道如何处理权限，本地存储等），请查看Gmail通知程序扩展：下载crx文件而不是安装它，解压缩并阅读其源代码。

#5楼

It appears that window.webkitNotifications has already been deprecated and removed. 似乎已经弃用并删除了window.webkitNotifications 。 However, there's a new API , and it appears to work in the latest version of Firefox as well. 但是，有一个新的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 codepen