标签: web-notifications

是否有适用于所有主流浏览器的通知系统？我知道chrome有他们的Notification API,Safari有推送通知,IE已经固定网站,但是有一些更通用的方式来显示通知吗？我确实找到了https://github.com/ttsvetko/HTML5-Desktop-Notifications,它们使用了不同通知的组合(虽然我似乎仍然无法让IE中的演示工作).

我们正在开发一个网站,使用GCM向最终用户发送推送通知.我们经历了服务工作者和所有人.我们使用这个codelab教程开发了一个原型.它目前正在运行,但唯一的问题是只有在Chrome打开时才会显示通知.Chrome关闭后,通知无法覆盖用户.

我想知道有没有什么办法可以解决这个问题,即使浏览器关闭也会显示通知,类似于Safari推送通知.提前致谢!

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

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

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

我想知道是否可以在 flutter web 中实现本地通知？我看到我可以为 Android 或 IOS 移动应用程序创建本地通知，但是否可以将其用于网络应用程序？或任何其他替代方案来实现它？

我正在使用websocket接收来自服务器端的通知,当我收到通知时,我使用Web NotificationAPI 显示桌面通知,问题是,如果我在多个选项卡中打开此页面,我会收到多个重复的桌面通知...

我试图用cookies来存储一个标志,比如当tab1收到通知时,它在cookie中设置了一个标志,当tab2得到相同的通知时,它会检查cookie标志,如果有的话,tab2就不会显示桌面通知.听起来不错吧？但它不起作用,也许tab1和tab2从websocket接收通知,因此同步cookie还没有设置？

我目前正在学习服务工作者，特别是订阅用户推送通知。我已经完成了Web 推送通知 指南和将推送通知添加到 Google 发布的 Web 应用程序 代码实验室- 但我看到了两种不同的请求用户许可的方式。

该指南要求使用这样的Notification通知 API 接口，然后根据以下返回值进行调用：subscribe().requestPermission()

function askPermission() {
  return new Promise(function(resolve, reject) {
    const permissionResult = Notification.requestPermission(function(result) {
      resolve(result);
    });

    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  })
  .then(function(permissionResult) {
    if (permissionResult !== 'granted') {
      throw new Error('We weren\'t granted permission.');
    }
  });
}

代码实验室仅通过.subscribe()直接在 Service Worker 注册上调用（这将弹出通知提示）来进行询问，PushManager 如下所示：

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey …

我正在为我的网站启用 Web 通知，并将下面的事件侦听器添加到 service worker .js 文件中，这在边缘运行良好，单击事件被触发并打开一个新窗口，但是 chrome 没有任何反应并且事件本身不会触发 -

self.addEventListener('notificationclick', function (event) {
  event.notification.close();
  console.log('Notification notificationclick triggered');
  event.waitUntil(
    clients.openWindow(event.notification.data)
  );
})

我已将网络推送通知配置到我的 PWA ionic 4 应用程序。当选项卡切换时，即在后台或我的应用程序之外，网络推送通知就像魅力一样工作。

问题是，当选项卡处于活动状态时，我会在 chrome 检查的应用程序部分收到推送消息，但没有触发任何通知。

下面是代码：

应用程序组件.ts

async ngOnInit() {
firebase.initializeApp(environment.firebase);
}

ngAfterViewInit() {
   this.platform.ready().then(async () => {
   await this.notificationsService.requestPermission();
   });
}

通知.service.ts

export class NotificationsService {
  init(): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      navigator.serviceWorker.ready.then(
    registration => {
      // Don't crash an error if messaging not supported
      if (!firebase.messaging.isSupported()) {
        resolve();
        return;
      }

      const messaging = firebase.messaging();

      // Register the Service Worker
      messaging.useServiceWorker(registration);

      // Initialize your VAPI key
      messaging.usePublicVapidKey(environment.firebase.vapidKey);


      // Listen to messages when your …

我注册了一个服务人员，并尝试在浏览器中测试网络通知。Chrome（和 Firefox）声称 Service Worker 已成功注册。

在加载 React 应用程序时，我已授予接收通知的权限。

在我的 中sw.js，我正在侦听一个push事件，并尝试从 Chrome 应用程序选项卡发送示例推送消息，如上面的屏幕截图所示。

self.addEventListener("push", receivePushNotification);

Push单击Chrome 应用程序选项卡时，push会触发该事件，并调用receivePushNotification. 但是，当我尝试在浏览器中显示通知时，没有任何反应，也没有报告错误。

function receivePushNotification(event) {
  // This prints "Test push message from DevTools."
  console.log("[Service Worker] Push Received.", event.data.text());

  var options = {
    body: "This notification was generated from a push!"
  };

/*****
  I would expect the following line to display a notification, since I've already 
  granted permission to allow for notifications. Yet, nothing happens and there …

通知显示正常，但是当我单击它或执行任何操作时，什么也没有发生。我没有看到任何日志记录，没有错误消息，但通知确实关闭了（尽管即使我注释掉它也会关闭event.notification.close()）。

我尝试使用 Chrome 调试器，并且可以在显示通知的代码中设置断点，但notificationclick处理程序中的所有断点都无法暂停执行。

我花了好几天的时间试图让它发挥作用，但我已经束手无策了。

const auth = firebase.auth();
const functions = firebase.functions();
const done = functions.httpsCallable("done");
const snooze = functions.httpsCallable("snooze");

self.addEventListener("notificationclick", event => {
  console.log("notificationclick", event);
  const uid = auth.currentUser.uid;
  const { id, url } = event.notification.data;

  event.notification.close();
  event.waitUntil(() => {
    switch (event.action) {
      case "done":
        console.log("Done");
        return done({ uid, id });
      case "snooze1":
        console.log("Snooze 1 Hour");
        return snooze({ uid, id, hours: 1 });
      case "snooze24":
        console.log("Snooze 1 Day");
        return snooze({ uid, id, hours: 24 …