我正在尝试将 OneSignal 集成到我的 Angular 2 应用程序中以接收推送通知。首先，我使用普通的旧 HTML 制作了一个 HelloWorld 应用程序，它运行得非常漂亮。因此，我尝试将其包含到我的 Angular 应用程序中，但用户没有被创建/注册，因此没有订阅接收任何通知。
代码摘录：
索引.html
<html>
<head>
<meta charset="utf-8">
<title>My Angular App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = window.OneSignal || [];
console.log("Init OneSignal");
OneSignal.push(["init", {
appId: "xxx-xxx-xxx-xxx-xxx",
autoRegister: false,
allowLocalhostAsSecureOrigin: true,
notifyButton: {
enable: true
}
}]);
console.log('OneSignal Initialized');
OneSignal.push(function () {
console.log('Registered For Push');
OneSignal.getUserId().then(function (userId) {
console.log("User ID is", userId);
});
});
</script>
</head>
</head>
<body>
<app-root>
<div class="wrap">
<div class="loading outer">
<div class="loading inner"></div>
</div>
</div>
</app-root>
</body>
</html>
userId 始终为空。
我已经检查了以下内容：
问题：
- 有没有办法在任何组件内完成所有初始化工作，比如在 ngOnInit() 方法中？
- 我想在用户单击组件内的按钮而不是使用响铃图标时注册推送？如何实现这一目标？ （我知道将notifyButton设置为false不会显示通知铃声）
P.S：使用 Angular CLI 在 Chrome 上进行测试（不适用于 FF 或 Safari）
恐怕我提出了另一个浏览文档而不是实际阅读文档的案例。
所以我稍微移动了代码，这就是最终对我有用的东西。
索引.html
<html>
<head>
<meta charset="utf-8">
<title>My Angular App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
</head>
<body>
<app-root>
<div class="wrap">
<div class="loading outer">
<div class="loading inner"></div>
</div>
</div>
</app-root>
</body>
</html>
应用程序组件.ts
export class AppComponent implements OnInit {
.
.
.
.
ngOnInit() {
var OneSignal = window['OneSignal'] || [];
console.log("Init OneSignal");
OneSignal.push(["init", {
appId: "xxx-xxx-xxx-xxx",
autoRegister: false,
allowLocalhostAsSecureOrigin: true,
notifyButton: {
enable: false
}
}]);
console.log('OneSignal Initialized');
OneSignal.push(function () {
console.log('Register For Push');
OneSignal.push(["registerForPushNotifications"])
});
OneSignal.push(function () {
// Occurs when the user's subscription changes to a new value.
OneSignal.on('subscriptionChange', function (isSubscribed) {
console.log("The user's subscription state is now:", isSubscribed);
OneSignal.getUserId().then(function (userId) {
console.log("User ID is", userId);
});
});
});
}
.
.
.
}
有几点需要注意：
- 听
subscriptionChange然后获取用户id
-
subscriptionChange当用户从浏览器手动禁用通知时也会触发。
-
autoRegister: false,不会提示“允许”/“拒绝”选项。所以我们必须打电话registerForPushNotifications。人们可以使用它来提示单击按钮或其他操作时的推送通知。
编辑2018
我创建了一个 util 类，在我所有的 Angular 项目中使用它来减少 onesignal 的样板代码。
https://gist.github.com/PsyGik/54a5e6cf5e92ba535272c38c2be773f1
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
