标签: web-push

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

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

是否有任何简单的方法可以在浏览器(桌面和移动设备)中检测Web Push API

我正在尝试在Chrome中执行网络推送通知,而不使用GCM/FCM.可能吗？我无法找到有关如何使用其他推送服务的示例.

首先，我已经检查了这些问题，但没有任何运气：

• Web Push API Chrome，返回“未授权注册”
• [WebPush][VAPID] 请求失败，400 UnauthorizedRegistration

我正在尝试为我正在开发的网络应用程序实施网络推送通知。目前，我已经实现了以下目标：

• 创建一个 VAPID 密钥对（使用本指南）。
• 注册一个 Service Worker（只需要一个 Service Worker，我认为manifest.json不再需要）。
• 将用户订阅到服务器（订阅数据将存储在数据库中）。
• 使用webpush gem发送推送通知。

设置后，一切正常（在本地主机和远程机器上）。但是，几个小时后（12 到 24 小时之间），通知在远程机器上停止工作（本地主机工作正常）。在那之后，从服务器端（Rails）发送推送通知时会抛出以下错误：

• 铬：（ UnauthorizedRegistration 400没有额外的信息）。
• 火狐： {"code": 401, "errno": 109, "error": "Unauthorized", "more_info": "http://autopush.readthedocs.io/en/latest/http.html#error-codes", "message": "Request did not validate Invalid bearer token: Auth > 24 hours in the future"}

出现此错误后，我尝试在每次访问页面时取消订阅并重新订阅用户。重新订阅完成后更新了db上的订阅字段，但仍然抛出错误，信息相同。浏览器和 Service Worker 都不会抛出错误。

我试图通过在 Chrome Dev Tools 控制台上放置一些 js 代码、取消注册服务工作者并重置推送通知权限来手动强制重新订阅，但没有解决错误。我只能通过创建一个新的 VAPID 密钥对来重新启动远程机器来修复这个错误。重新启动机器后，我还有 12-24 小时它再次失败。此外，通知发送过程在rails server (nginx + unicorn) …

我有以下代码注册服务工作者并要求用户允许通知.用户允许推送通知,其中通过返回的承诺后,我发现了一个错误serviceWorkerRegistration.pushManager.getSubscription()的null.当我关闭浏览器并再次强制执行此函数调用时,它可以正常工作.我不明白为什么.这是我的代码:

window.vapidPublicKey = new Uint8Array([4, 45, ...]); 
if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/serviceworker.js')
  .then(function(reg) {
     console.log('Service worker change, registered the service worker');
  });
}
// Otherwise, no push notifications :(
else {
  console.error('Service worker is not supported in this browser');
}

navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
  console.log("ready");
  serviceWorkerRegistration.pushManager
  .subscribe({
    userVisibleOnly: true,
    applicationServerKey: window.vapidPublicKey
  });
});



// application.js

// Let's check if the browser supports notifications
if (!("Notification" in window)) {
  console.error("This browser does not support notifications.");
}

// Let's check …

我真的不知道这些东西是怎么回事。我正在为我的网站正常使用 FCM 网络推送。如果我在前台，我可以在网站上收到消息，如果我在后台，我会收到通知。到现在为止还挺好。

importScripts('https://www.gstatic.com/firebasejs/8.2.5/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.5/firebase-messaging.js');

firebase.initializeApp({
  ...
});

const messaging = firebase.messaging();

问题是 firebase-messaging-sw.js 的默认配置在显示 chrome 图标的背景中显示通知。我希望能够自定义此通知并显示我的应用程序图标。然后在网上阅读我发现我需要用onBackgroundMessage()来拦截消息。

importScripts('https://www.gstatic.com/firebasejs/8.2.5/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.5/firebase-messaging.js');

firebase.initializeApp({
  ...
});

const messaging = firebase.messaging();

if (messaging) {
  messaging.onBackgroundMessage(payload => {
    const notificationTitle = payload.notification.title || payload.data.title;
    const notificationOptions = {
      body: payload.notification.body || payload.data.subtitle || '',
      icon: 'https://firebasestorage.googleapis.com/v0/b/yes-4-web.appspot.com/o/pontonos%2Ficons%2Fandroid-chrome-192x192.png?alt=media&token=35616a6b-5e70-43a0-9284-d780793fa076',
      data: payload.data
    };

    return self.registration.showNotification(notificationTitle, notificationOptions);
  });

  self.addEventListener('notificationclick', event => {
    event.notification.close();
    event.waitUntil(clients.matchAll({ type: "window" }).then(function(clientList) {
      for (let i = 0; i < clientList.length; i++) {
        const client = …

如果我同时拥有本机应用程序和使用由服务工作者提供支持的Web推送通知的渐进式Web应用程序,是否有办法阻止用户在选择接收来自网站的通知并且还安装了应用程序时接收重复通知？

我创建了一个系统，通过 Firefox 和 Chrome 使用浏览器推送通知与网站访问者进行更多互动。

我正在查看我的 Google Analytics 事件，了解订阅失败的原因，最大的原因是“推送服务不可用”。

我已经四处寻找原因，试图找出这意味着什么以及为什么会这样，但我找不到任何关于它的信息。

这是直接来自 GA 的错误：

AbortError: Registration failed - push service not available

先感谢您！

我在网上搜索，但没有人奇怪地谈论它。

首先，API似乎不支持多个订阅上下文，它不带参数。

但这不是一个大问题，因为如果一个用户已经授予权限，我可以获取已经存在的订阅并重用它/也将它指向第二个用户（对两者使用相同的 url）。

这就是问题开始的地方。如果一个用户登录（例如 LocalStorage 中的令牌），浏览器将关闭，我会发送一个通知，然后唤醒 Service Worker 并运行我的通知事件代码..

我怎么知道我是否应该显示通知？我怎么知道谁登录了？我无法访问 Service Worker 中的 LocalStorage，我不知道谁登录了。还有其他方法吗？

如何添加操作按钮来推送这样的通知： 我试过这个，但它不起作用：

=> https://firebase.googleblog.com/2018/05/web-notifications-api-support-now.html

这是我的通知负载：

array
(
    "title" =>  "FCM Message",
    "body" => "This is an FCM Message",
    "click_action" => "http://example.com/",
    "icon" => "/logo.jpg",
    "actions" => array(
        0 => array(
            'title' => 'Like',
            'click_action' => 'http://example.com/?aaa=1',
            'icon' => 'icons/heart.png',
        ),
        1 => array(
            'title' => 'Unsubscribe',
            'click_action' => 'http://example.com/?aaa=2',
            'icon' => 'icons/cross.png',
        ),
    ),
);

我尝试使用消息有效负载也不起作用：

$msg = array
(
    "webpush" =>  array
    (
        "notification" =>  array
        (
            "title" =>  "Fish Photos ",
            "body" =>  "Thanks for signing up for …