标签: web-push

Web Push API Chrome,返回"未经授权的注册"

我一直在做一个关于如何使用web-push节点模块在Chrome上发送网络推送通知的谷歌教程.

问题是,本教程还提供了一个配套服务器应用程序,您应该使用它来测试从服务器向客户端发送推送通知.

但是,在配套应用程序中,甚至在我的本地计算机上使用web-push cli时,在尝试发送通知时,我收到" 未经授权的注册 "错误.在网上找不到任何关于这个错误的信息 - 我做错了什么/缺少什么?

$ web-push send-notification --endpoint=https://fcm.googleapis.com/fcm/send/<<endpoint-key>>
Error sending push message:
{ [WebPushError: Received unexpected response code]
  name: 'WebPushError',
  message: 'Received unexpected response code',
  statusCode: 400,
  headers:
   { 'content-type': 'text/html; charset=UTF-8',
     date: 'Fri, 25 Nov 2016 08:54:08 GMT',
     expires: 'Fri, 25 Nov 2016 08:54:08 GMT',
     'cache-control': 'private, max-age=0',
     'x-content-type-options': 'nosniff',
     'x-frame-options': 'SAMEORIGIN',
     'x-xss-protection': '1; mode=block',
     server: 'GSE',
     'alt-svc': 'quic=":443"; ma=2592000; v="36,35,34"',
     'accept-ranges': 'none',
     vary: 'Accept-Encoding',
     connection: 'close' },
  body: '<HTML>\n<HEAD>\n<TITLE>UnauthorizedRegistration</TITLE>\n</HEAD>\n<BODY BGCOLOR="#FFFFFF" …
Run Code Online (Sandbox Code Playgroud)

google-chrome push-notification google-cloud-messaging web-push

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

Android 版 Chrome 上的网络推送通知:我需要 GCM 或 SNS 等第三方服务吗?

我想使用 Service Workers 在我的渐进式 Web 应用程序(PWA) 上设置 Web 推送通知。但我无法理解 Google Cloud Messaging 和 Amazon SNS 等第三方服务的作用,以及我是否需要它们。

据我了解,当用户单击“允许通知”按钮时,您将获得一个唯一的订阅端点。然后在后端,您可以使用此端点向该特定用户发送通知。

然而,我发现的所有后端库(例如Node.js 的pywebpushweb-push)都提到您需要 GCM API 密钥才能发送通知。

但MDN Push API 文档是这样说的:

早于 52 的 Chrome 版本要求您在 Google Cloud Messaging 上设置一个项目来发送推送消息 [...]

所以我假设新版本的 Chrome(今天的版本 58)应该能够在没有第三方帮助的情况下显示通知。

这是我想要实现的目标的示例。我只是不确定他们在后端做什么。

注意:我并不是尝试将本机推送通知发送到 Android 或 iOS 设备,而只是使用 Web Push API 发送到 Chrome 上的渐进式 Web 应用程序。

google-chrome web-push

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

Web推送通知:如何使用Web Push PHP库?

我想将Web通知添加到我的网站.我在Google上搜索并找到了一些关于它的教程.如这些教程中所述,我设法向访问者显示订阅框,我也可以存储他们的数据.

Main.js

'use strict';

const applicationServerPublicKey = 'BBw_opB12mBhg66Dc94m7pOlTTHb5oqFAafbhN-BNeazWk8woAcSeHdgbmQaroCYssUkqFfoHqEJyCKw';

const pushButton = document.querySelector('.js-push-btn');

let isSubscribed = false;
let swRegistration = null;

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}



if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker …
Run Code Online (Sandbox Code Playgroud)

php browser push-notification web-push

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

如何使用Web推送通知远程关闭通知?

我正在使用基于新服务工作者的API在Web上使用推送通知,并具有以下用例:

  • 用户选择在多个设备/平台上接收通知
  • 我们会在所有设备/平台上向他们发送通知
  • 用户在其中一个设备/平台上驳回通知
  • 我们现在想要远程隐藏来自其他设备/平台的通知

鉴于Push API对userVisible的限制,有没有办法实现这种体验?

service-worker web-push push-api progressive-web-apps

11
推荐指数
1
解决办法
511
查看次数

iOS 16.4 中的 PWA/Web 应用程序通知没有声音

更新到 iOS 16.4 并将我的一个网络应用程序添加到主屏幕并打开通知后,该网络应用程序确实出现在“设置”>“通知”中,但与大多数应用程序不同,没有“声音”选项,而通知则显示到达时,他们总是沉默。在此输入图像描述

有谁知道如何让声音选项出现,或者让 iOS 中的网络应用程序通知以通常的通知声音到达?

我尝试删除并重新添加网络应用程序以及重新启动设备,希望出现声音选项,但没有出现。我也尝试搜索其他有同样问题的用户,但没有找到任何与 iOS 16.4 发布后的当前问题相关的内容(据我所知,应该完全支持网络推送通知) 。

push-notification ios web-push progressive-web-apps

11
推荐指数
1
解决办法
1139
查看次数

什么是VAPID,为什么它有用?

我最近刚刚了解了VAPID,并一直在寻找它存在的原因以及它的目的是什么.Mozilla的博客文章解释说"如果我们发现问题,包括VAPID信息会让我们联系你",但我不确定这是什么意思.他们是否正在进行某种监控以防止其他人模仿您的服务?

web-push vapid

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

在原生Android应用程序中使用webview使Web推送通知工作?

我有一个响应和启用推送通知功能的网站.在我的原生Android应用程序中,如果我加载我的网站WebView,然后弹出通常在chrome/firefox中询问是否用户想要允许推送通知,不显示在WebView.很明显,它WebView不会支持应用程序的相同Web推送通知.我知道如何在应用程序中实现GCM或FCM以启用移动推送,但我想知道是否可以通过android webview来支持web推送通知,以便它可以在我的应用程序中工作,因为它在chrome/firefox等工作.

我尝试了什么:在深入研究之后,我最终得出结论,由于Android WebView不支持Push Api(在caniuse.com的帮助下),使用移动推送使用网络推送的俱乐部WebView目前是不可能的.我对吗?或者有没有任何应用程序已经这样做?有可能吗?

android push-notification android-webview web-push push-api

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

了解如何存储Web推送端点

我正试图在我的一个应用程序中开始实现Web Push.在我发现的示例中,客户端的端点URL通常存储在内存中,其注释如下:

在生产中,您将其存储在您的数据库中......

由于只有我的应用程序的注册用户可以/将获得推送通知,我的计划是将端点URL存储在我的数据库中用户的元数据中.到现在为止还挺好.

当我想允许同一用户在多个设备上接收通知时,问题就出现了.理论上,我将为用户订阅的每个设备添加一个新的端点到数据库.但是,在测试中我注意到端点随同一设备上的每个订阅/取消订阅而变化.因此,如果用户在同一设备上连续多次订阅/取消订阅,我最终会为该用户保存几个端点(除了其中一个端点都不好).

我读过的内容来看,当用户取消订阅或端点无效时,没有可靠的通知方式.那么,如何在添加新端点之前判断是否应删除旧端点?

什么是通过重复订阅/取消订阅填充我的数据库端点来阻止用户有效地发起拒绝服务攻击?

这更像是一个笑话(我可以忽略限制给定用户的总端点),但我看到的问题是,当发送通知时,我将使用数百个无效端点通知来爆炸通知服务.


我希望我的服务器上的订阅逻辑是:

  1. 检查我们是否已为此用户/设备组合保存了端点
  2. 如果不添加,如果是,请更新它

问题是我无法弄清楚如何可靠地做#1.

push-notification web-push

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

chrome通知取消订阅活动

是否可以捕获取消订阅事件?

这是用于订阅用户通知的代码

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(function(reg) {
      reg.pushManager.subscribe({
        userVisibleOnly: true
      }).then(function(sub) {
          add_endpoint_to_db( sub ); // im adding the user deatils to my db
      }).catch(function(e) {
        if (Notification.permission === 'denied') {

        } else {

        }
      });
  });
Run Code Online (Sandbox Code Playgroud)

}

如果用户选择手动删除通知

通知删除

我想抓住动作,以便从DB中删除他的条目

那么有可能捕获通知更改事件吗?

javascript google-chrome push-notification service-worker web-push

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

使用推送通知订阅对象的“p256dh”或“endpoint”键值作为后端内的标识符是否安全?

当用户通过PushManager.subscribe()创建订阅时,给定applicationServerKey(VAPID 公钥),它会创建一个有效的订阅,其内容可以发送并存储在数据库中。发送到数据库的内容如下所示:

{"endpoint":"https://fcm.googleapis.com/fcm/send/dpH5lCsTSSM:APA91bHqjZxM0VImWWqDRN7U0a3AycjUf4O-byuxb_wJsKRaKvV_iKw56s16ekq6FUqoCF7k2nICUpd8fHPxVTgqLunFeVeB9lLCQZyohyAztTH8ZQL9WCxKpA6dvTG_TUIhQUFq_n",
"keys": {
    "p256dh":"BLQELIDm-6b9Bl07YrEuXJ4BL_YBVQ0dvt9NQGGJxIQidJWHPNa9YrouvcQ9d7_MqzvGS9Alz60SZNCG3qfpk=",
    "auth":"4vQK-SvRAN5eo-8ASlrwA=="
    }
}
Run Code Online (Sandbox Code Playgroud)

来源:推送通知简介

该对象提供了唯一的端点,后端服务器知道在哪里调用以将推送通知发送到并使用相应的 VAPID 私钥进行身份验证。

谷歌表示,该端点的唯一标识符是不透明的,无法从中确定任何个人数据。

标识符是不透明的。作为开发人员,您无法从中确定任何个人数据。此外,它还不稳定,因此不能用于跟踪用户。

按照Surya Sankar的本教程,可以将整个订阅对象发送到服务器并存储在数据库中,以便稍后向关联的浏览器/设备发送推送通知时使用。然而,在将条目记录到数据库之前,它会比较是否已经记录了具有相同内容的条目,以免创建重复项。

@app.route("/api/push-subscriptions", methods=["POST"])
def create_push_subscription():
    json_data = request.get_json()
    subscription = PushSubscription.query.filter_by(
        subscription_json=json_data['subscription_json']
    ).first()
    if subscription is None:
        subscription = PushSubscription(
            subscription_json=json_data['subscription_json']
        )
        db.session.add(subscription)
        db.session.commit()
    return jsonify({
        "status": "success"
    })
Run Code Online (Sandbox Code Playgroud)

来源:push_subscriptions_api.py

由于整个订阅对象用于webpush触发推送通知,因此我知道整个订阅对象需要发送到服务器。

from pywebpush import webpush, WebPushException
import json
from flask import current_app


def trigger_push_notification(push_subscription, title, body):
    try:
        response = webpush(
            # Uses entire subscription object stored …
Run Code Online (Sandbox Code Playgroud)

javascript push-notification flask service-worker web-push

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