如何使用 django-push-notifications 实现 Web 客户端？
Posted
技术标签:
【中文标题】如何使用 django-push-notifications 实现 Web 客户端？【英文标题】：How to implement web client with django-push-notifications? 【发布时间】：2019-05-20 08:36:10 【问题描述】：我已经使用django-push-notifications 成功实现了APNS。而且我发现这种依赖关系正在增长并且也有Web Push Notifications。我曾尝试跟进给定的代码，但看不到registation_id。我得到了
Uncaught (in promise) DOMException`
index.html?_ijt=f2lo8aqelnrfm7g1266vtapp67:1
我把chrome 一个参数给loadVersionBrowser() 以避免错误
Uncaught TypeError: Cannot read property 'match' of undefined
这是我当前的文件
<html>
<script>
// Utils functions:
function urlBase64ToUint8Array (base64String)
var padding = '='.repeat((4 - base64String.length % 4) % 4)
var base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/')
var rawData = window.atob(base64)
var outputArray = new Uint8Array(rawData.length)
for (var i = 0; i < rawData.length; ++i)
outputArray[i] = rawData.charCodeAt(i)
return outputArray;
function loadVersionBrowser (userAgent)
var ua = userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1]))
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return name: 'IE', version: (tem[1] || '');
if (M[1] === 'Chrome')
tem = ua.match(/\bOPR\/(\d+)/);
if (tem != null)
return name: 'Opera', version: tem[1];
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null)
M.splice(1, 1, tem[1]);
return
name: M[0],
version: M[1]
;
;
var applicationServerKey = "BHZZKYSonkdaKjxjgw7DKYO45PmetHY7jprxWn4K4gfZSxUuvyQRe1LegYKoKJzv8qhi5HiIO4wjn6SP9Gg1ftk";
// In your ready listener
if ('serviceWorker' in navigator)
// The service worker has to store in the root of the app
// http://***.com/questions/29874068/navigator-serviceworker-is-never-ready
var browser = loadVersionBrowser('chrome');
navigator.serviceWorker.register('navigatorPush.service.js?version=1.0.0').then(function (reg)
reg.pushManager.subscribe(
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(applicationServerKey)
).then(function (sub)
var endpointParts = sub.endpoint.split('/');
var registration_id = endpointParts[endpointParts.length - 1];
var data =
'browser': browser.name.toUpperCase(),
'p256dh': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('p256dh')))),
'auth': btoa(String.fromCharCode.apply(null, new Uint8Array(sub.getKey('auth')))),
'name': 'XXXXX',
'registration_id': registration_id
;
console.log(data);
)
).catch(function (err)
console.log(':^(', err);
);
</script>
Hello
</html>
问题：
1.我哪里错了？
2.Web Push Notification Gateway是否默认使用FCM？
【问题讨论】：
【参考方案1】：这一行：
var ua = userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
很奇怪。考虑将其转换为：
var ua = userAgent;
var tem;
var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
您不能在声明它的同一语句中使用变量。
至于第二个问题，网络推送通知将（我认为）将 firebase 用于 chrome，以及与其他浏览器相关的任何其他提供商。这是由 django-push-notifications 模块处理的，您不必担心。
【讨论】：
我写了一篇文章为新人节省时间here以上是关于如何使用 django-push-notifications 实现 Web 客户端？的主要内容，如果未能解决你的问题，请参考以下文章
如何在自动布局中使用约束标识符以及如何使用标识符更改约束？ [迅速]
如何使用 AngularJS 的 ng-model 创建一个数组以及如何使用 jquery 提交？