我一直在做一个关于如何使用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
我想使用 Service Workers 在我的渐进式 Web 应用程序(PWA) 上设置 Web 推送通知。但我无法理解 Google Cloud Messaging 和 Amazon SNS 等第三方服务的作用,以及我是否需要它们。
据我了解,当用户单击“允许通知”按钮时,您将获得一个唯一的订阅端点。然后在后端,您可以使用此端点向该特定用户发送通知。
然而,我发现的所有后端库(例如Node.js 的pywebpush或web-push)都提到您需要 GCM API 密钥才能发送通知。
但MDN Push API 文档是这样说的:
早于 52 的 Chrome 版本要求您在 Google Cloud Messaging 上设置一个项目来发送推送消息 [...]
所以我假设新版本的 Chrome(今天的版本 58)应该能够在没有第三方帮助的情况下显示通知。
这是我想要实现的目标的示例。我只是不确定他们在后端做什么。
注意:我并不是尝试将本机推送通知发送到 Android 或 iOS 设备,而只是使用 Web Push API 发送到 Chrome 上的渐进式 Web 应用程序。
我想将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) 我正在使用基于新服务工作者的API在Web上使用推送通知,并具有以下用例:
鉴于Push API对userVisible的限制,有没有办法实现这种体验?
我最近刚刚了解了VAPID,并一直在寻找它存在的原因以及它的目的是什么.Mozilla的博客文章解释说"如果我们发现问题,包括VAPID信息会让我们联系你",但我不确定这是什么意思.他们是否正在进行某种监控以防止其他人模仿您的服务?
我有一个响应和启用推送通知功能的网站.在我的原生Android应用程序中,如果我加载我的网站WebView,然后弹出通常在chrome/firefox中询问是否用户想要允许推送通知,不显示在WebView.很明显,它WebView不会支持应用程序的相同Web推送通知.我知道如何在应用程序中实现GCM或FCM以启用移动推送,但我想知道是否可以通过android webview来支持web推送通知,以便它可以在我的应用程序中工作,因为它在chrome/firefox等工作.
我尝试了什么:在深入研究之后,我最终得出结论,由于Android WebView不支持Push Api(在caniuse.com的帮助下),使用移动推送使用网络推送的俱乐部WebView目前是不可能的.我对吗?或者有没有任何应用程序已经这样做?有可能吗?
我正试图在我的一个应用程序中开始实现Web Push.在我发现的示例中,客户端的端点URL通常存储在内存中,其注释如下:
在生产中,您将其存储在您的数据库中......
由于只有我的应用程序的注册用户可以/将获得推送通知,我的计划是将端点URL存储在我的数据库中用户的元数据中.到现在为止还挺好.
当我想允许同一用户在多个设备上接收通知时,问题就出现了.理论上,我将为用户订阅的每个设备添加一个新的端点到数据库.但是,在测试中我注意到端点随同一设备上的每个订阅/取消订阅而变化.因此,如果用户在同一设备上连续多次订阅/取消订阅,我最终会为该用户保存几个端点(除了其中一个端点都不好).
从我读过的内容来看,当用户取消订阅或端点无效时,没有可靠的通知方式.那么,如何在添加新端点之前判断是否应删除旧端点?
什么是通过重复订阅/取消订阅填充我的数据库端点来阻止用户有效地发起拒绝服务攻击?
这更像是一个笑话(我可以忽略限制给定用户的总端点),但我看到的问题是,当发送通知时,我将使用数百个无效端点通知来爆炸通知服务.
我希望我的服务器上的订阅逻辑是:
问题是我无法弄清楚如何可靠地做#1.
是否可以捕获取消订阅事件?
这是用于订阅用户通知的代码
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
当用户通过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)
由于整个订阅对象用于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)