我正在尝试将OneSignal集成到我的Angular 2应用程序中以接收推送通知.首先,我使用普通的旧
HTML做了一个HelloWorld应用程序,它运行得很漂亮.所以我试着将它包含在我的Angular应用程序中,但用户没有被创建/注册,因此没有订阅接收任何通知.
代码摘录：
的index.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始终为null.
我检查过以下内容：
> App ID是正确的
>通知的权限设置为允许在浏览器中
问题：
>有没有办法在任何组件中执行所有init内容,比如ngOnInit()方法？
>当用户点击组件内的按钮而不是使用铃声图标时,我想注册推送？如何实现这一目标？ (我知道将notifyButton设置为false将不会显示通知铃声)
P.S：使用Angular CLI在Chrome上进行测试(不适用于FF或Safari)
解决方法
我害怕我提出了另一个浏览文档而不是实际阅读文档的案例.
所以我把代码移动了一下,这就是最终为我工作的东西.
的index.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>
app.component.ts
export class AppComponent implements OnInit {
.
.
.
.
ngOnInit() {
var OneSignal = window['OneSignal'] || [];
console.log("Init OneSignal");
OneSignal.push(["init",{
appId: "xxx-xxx-xxx-xxx",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类,我在所有角度项目中使用它来减少信号的样板代码.
https://gist.github.com/PsyGik/54a5e6cf5e92ba535272c38c2be773f1
