标签: web-notifications

如何将推送通知发送到Web浏览器?

我过去几个小时一直在阅读关于Push Notification APIWeb Notification API的内容.我还发现Google和Apple分别通过GCM和APNS免费提供推送通知服务.

我试图了解我们是否可以使用桌面通知向浏览器实施推送通知,我相信这是Web Notification API所做的.我在这里这里看到了关于如何为Chrome做这件事的谷歌文档.

现在仍然无法理解的是:

  1. 我们可以使用GCM/APNS向包括Firefox和Safari在内的所有Web浏览器发送推送通知吗?
  2. 如果不是通过GCM我们可以拥有自己的后端来做同样的事情吗?

我相信在一个答案中回答的所有问题都可以帮助很多有类似困惑的人.

javascript web-notifications google-cloud-messaging web-push push-api

165
推荐指数
8
解决办法
15万
查看次数

通过封闭的网络应用在Chrome或Firefox中发送桌面通知?

我的目标是通过浏览器中当前未打开的Web应用程序(我们称之为X)在Chrome或Firefox中发送Gmail样式的桌面通知,而无需用户安装应用程序或扩展程序.如果用户需要授予从X接收通知的权限,这是可以的,只要浏览器需要打开才能显示通知,只要X不需要在浏览器中打开就可以了.不需要打开任何浏览器窗口的解决方案也可以使用.

我只是花了一天时间深入研究这个问题,到目前为止我认为我已经学会了:

  • 自OSX Mavericks以来,已经可以通过Safari推送通知在Safari 7+中执行此操作.
  • 网站通知API工作在Chrome/Firefox中,但需要用户的浏览器开放给X.
  • Twitter发送类似的网络通知而不首先要求用户获得许可,但要求用户的浏览器对Twitter开放.
  • 有很多可能的Growl实现的引用,但据我所知,所有这些都需要用户安装Growl和/或支持Growl的应用程序才能工作.

我上面的任何陈述都错了 - 我很乐意听到它! - 我也对任何其他解决方案持开放态度.有任何想法吗?

谢谢阅读.

firefox notifications google-chrome push-notification web-notifications

59
推荐指数
1
解决办法
5万
查看次数

HTML5通知无法在移动Chrome中使用

我正在使用HTML5通知API在Chrome或Firefox中通知用户.在桌面浏览器上,它可以工作.但是,在Chrome 42 for Android中,请求了权限,但未显示通知本身.

请求代码适用于所有设备:

if ('Notification' in window) {
  Notification.requestPermission();
}
Run Code Online (Sandbox Code Playgroud)

发送代码适用于桌面浏览器,但不适用于移动设备:

if ('Notification' in window) {
  new Notification('Notify you');
}
Run Code Online (Sandbox Code Playgroud)

javascript html5 notifications google-chrome web-notifications

32
推荐指数
2
解决办法
3万
查看次数

Stack Overflow桌面通知如何工作?

也许这是一个相当大且含糊不清的问题:

在Stack Overflow聊天室中,有一个"启用桌面通知"按钮,当有人回复您时,它会在系统托盘中显示某些内容.

通过什么机制这是有效的?这总是让我很好奇.

网站如何访问系统托盘?

html javascript html5 web web-notifications

13
推荐指数
2
解决办法
775
查看次数

在Firefox中单击桌面通知时如何关注选项卡?

我正在网站中实现桌面通知,在新邮件到达时显示通知.我希望在用户点击通知时,网站处于打开状态的浏览器标签可以获得焦点,我可以使用以下代码在Chrome中使用此功能:

var n = new Notification('Title', {
    'body': 'Sample content.'
});

n.onclick = function (e) {
    window.focus();
};
Run Code Online (Sandbox Code Playgroud)

但不幸的是,这在Firefox中不起作用.:(任何人都可以告诉我,我在这里缺少什么?我正在测试Chrome 31和Firefox 26

谢谢.

javascript firefox web-notifications

12
推荐指数
1
解决办法
2580
查看次数

如何在Chrome中点击浏览器通知时自动关注浏览器标签?

我正在尝试为我正在处理的项目设置浏览器通知.我到目前为止的代码是:

// Notification permissions logic handled before...
var notification = new Notification('Title', { body: 'Message' });
notification.onclick = function (e) {
    window.focus();
    // this.cancel();
};
setTimeout(notification.close.bind(notification), 5000);
Run Code Online (Sandbox Code Playgroud)

除了一件事,通知可以正常使用此代码.在Chrome中,点击通知不会将焦点设置在浏览器窗口中.在Firefox中,这种行为是开箱即用的,并且在没有上面定义的点击处理程序的情况下工作正常.我为Chrome寻找了解决方案,并找到了以下内容:

在Firefox中单击桌面通知时如何关注选项卡?

如何关注创建桌面通知的Chrome标签?

然而,建议接受的解决方案对我不起作用 - 事件被触发但未设置焦点.

有没有人有任何建议如何使这种行为正常?

Chrome版本:版本44.0.2403.130米

Firefox版本:40.0

javascript browser notifications web-notifications

12
推荐指数
1
解决办法
1864
查看次数

如何将网络通知内容复制到剪贴板

我正在使用 Firebase Cloud Messaging (FCM) 发送数据消息,以便我可以使用 Service Worker 处理通知。现在我使用 Service Worker 显示通知,当我单击通知时,我想复制剪贴板中的通知内容。

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler((payload)=> {
    const title = payload.data.title;
    const options = {
        body: payload.data.body
    };
    return self.registration.showNotification(title,
        options);
});

self.addEventListener('notificationclick', (event)=>{
    console.log(event);
    navigator.clipboard.writeText(event).then(function() {
        console.log('Async: Copying to clipboard was successful!');
      }, function(err) {
        console.error('Async: Could not copy text: ', err);
      });
});
Run Code Online (Sandbox Code Playgroud)

单击通知时notificationclick触发事件。但我变得navigator.clipboard不确定。我也在为我的网站使用安全域。我也无法使用,document.execcommand('copy')因为无法使用 Service Worker 访问 DOM。您能否建议一种无需打开任何网址即可复制通知内容的方法?

javascript web-notifications service-worker

10
推荐指数
1
解决办法
504
查看次数

使用超时创建Web通知

如何使用设置超时创建TypeScript Web通知?

我创建了以下代码,但在默认超时之前关闭通知不起作用:

export function createNotification(title: string, body: string) {
    let now: Date = new Date(Date.now());
    let date = now.add(5).seconds();

    let options = {
        body: body,
        requireInteraction: false,
        timestamp: date
    };
    new Notification(title, options);
}
Run Code Online (Sandbox Code Playgroud)

作为测试,我想在TypeScript中创建一个持续五秒钟的通知,覆盖浏览器的默认行为.我看不到TypeScript打字文件中列出的任何其他选项对我有帮助:

ES2017通知选项

我正在使用Chrome开发和测试这个软件,虽然我使用Firefox作为我的主浏览器.因此,任何在Chrome中正常运行但不包含黑客或浏览器特定代码的解决方案都可以.

datejs web-notifications typescript

9
推荐指数
1
解决办法
861
查看次数

Web Notification推送在Chrome上从python中抛出400

我正在使用pywebpush 1.4.0库从Django后端推送Web Notifications.我使用的密钥是从https://web-push-codelab.glitch.me/获得的.订阅似乎工作正常.此外,我在Firefox上测试了它,它在那里工作正常.

我在推送Chrome时收到以下错误服务器端:

Push failed: <Response [400]>: <HTML>
<HEAD>
<TITLE>UnauthorizedRegistration</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<H1>UnauthorizedRegistration</H1>
<H2>Error 400</H2>
</BODY>
</HTML>
Run Code Online (Sandbox Code Playgroud)

奇怪的是,我的后端控制3个域名,推送工作正常,即使对于一个域上的Chrome而不是其他域名.我排除了以下可能的问题:

我看到的唯一可能性是Chrome是否允许来自同一后端的不同域上的推送通知.有人知道这样的限制或者可以帮助我解决其他任何指针吗?

注意:我正在为所有三个域使用不同的密钥.

这是我用来推送的代码:

from pywebpush import webpush
webpush(subscription_info,
                data,
                vapid_private_key=vapid_private_key,
                vapid_claims={"sub": "mailto:xyz@example.com"})
Run Code Online (Sandbox Code Playgroud)

subscription_info是订阅用户时收到的json,vapid_private_key是相应的私钥.

python firefox google-chrome web-notifications

8
推荐指数
1
解决办法
317
查看次数

如何在 WKWebView 中捕获通知?

我正在 Swift 4 中开发 macOS 桌面应用程序。
它有一个 WKWebView,可以加载一个发送通知的网页。
默认情况下不显示任何通知,也没有权限请求。

我需要一种方法来显示通知并拦截它们,以便我可以显示一个计数器。

知道如何实现这一目标吗?

macos webkit web-notifications swift

7
推荐指数
1
解决办法
2356
查看次数