Chrome桌面通知示例

作者: 威斯特
发布时间: 2024-12-29 07:56:42 (6天前)
转自：

7 条回复

0#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 由于某种原因，接受的答案对我不起作用，我最终使用以下示例： </p> <P> <a href="https://developer.chrome.com/apps/app_codelab_alarms#create-notification" rel="nofollow noreferrer"> https://developer.chrome.com/apps/app_codelab_alarms#create-notification </A> </p> <pre> <code> function notifyMe() { chrome.notifications.create('reminder', { type: 'basic', iconUrl: 'icon.png', title: 'Don\'t forget!', message: 'You have things to do. Wake up, dude!' }, function(notificationId) {}); } </code> </pre> </DIV>

编辑
1#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 检查 <a href="http://dev.chromium.org/developers/design-documents/desktop-notifications" rel="nofollow noreferrer"> 设计 </A> 和 <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification" rel="nofollow noreferrer"> API规范 </A> （它仍然是草稿）或者从（页面不再可用）中查看源代码以获得一个简单的例子：它主要是调用 <code> window.webkitNotifications.createNotification </code> 。 </p> <P> 如果您想要一个更强大的示例（您尝试创建自己的Google Chrome扩展程序，并想知道如何处理权限，本地存储等），请查看 <a href="https://chrome.google.com/extensions/detail/kkmbodalobogbnejmcdghkfimhodifol" rel="nofollow noreferrer"> Gmail通知程序扩展 </A> ：下载crx文件而不是安装它，解压缩并阅读其源代码。 </p> </DIV>

编辑
2#
回复此人
绵绵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Notify.js是新webkit通知的包装器。它工作得很好。 </p> <P> <a href="http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/" rel="nofollow"> http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/ </A> </p> </DIV>

编辑
3#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <!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> </code> </pre> <P> </p> </DIV>

编辑
4#
回复此人
子阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我制作了这个简单的Notification包装器。它适用于Chrome，Safari和Firefox。 </p> <P> 可能在Opera，IE和Edge上也是如此，但我还没有测试过它。 </p> <P> 从这里获取notify.js文件 <a href="https://github.com/gravmatt/js-notify" rel="nofollow"> https://github.com/gravmatt/js-notify </A> 并将其放入您的页面。 </p> <P> 在Bower上获取它 </p> <pre> <code> $ bower install js-notify </code> </pre> <P> 这是它的工作原理： </p> <pre> <code> notify('title', { body: 'Notification Text', icon: 'path/to/image.png', onclick: function(e) {}, // e -> Notification object onclose: function(e) {}, ondenied: function(e) {} }); </code> </pre> <P> 您必须设置标题，但json对象作为第二个参数是可选的。 </p> </DIV>

编辑
5#
回复此人
哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是关于API的很好的文档， </p> <P> <a href="https://developer.chrome.com/apps/notifications" rel="nofollow"> https://developer.chrome.com/apps/notifications </A> </p> <P> 而且，谷歌的官方视频解释， </p> <P> <a href="https://developers.google.com/live/shows/83992232-1001" rel="nofollow"> https://developers.google.com/live/shows/83992232-1001 </A> </p> </DIV>

编辑

登录后才能参与评论