将OneSignal与Angular 2 CLI集成

我正在尝试将OneSignal整合到我的Angular 2应用程序中以接收推送通知。首先，我使用普通的旧式HTML做了一个HelloWorld应用程序，它的工作非常漂亮。所以我试图将它包含到我的Angular应用中，但用户没有被创建/注册，因此没有订阅接收任何通知。将OneSignal与Angular 2 CLI集成

代码摘录：

的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>

的用户ID总是空。

我检查以下内容：

应用程序ID是正确的
许可通知设置为允许在浏览器

问题：

有在ngOnInit（）方法中执行所有组件内部所有init事件的方法？
我想在用户点击组件内的按钮而不是使用铃铛图标时注册推送？如何实现这一目标？（我知道notifyButton设置为false将不会显示通知铃）

PS：使用角CLI Chrome的测试（不与FF或Safari工作）

来源

2017-07-27 PsyGik

我怕我提出的另一浏览文档而不是实际阅读文档的情况。

所以我将代码移动了一下，这就是为我工作的结果。

的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", 
     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，然后获取用户标识
subscriptionChange也是杉木当用户通过浏览器手动禁用通知时就进行编辑。
autoRegister: false,不会提示'允许'/'拒绝'选项。所以我们必须拨打registerForPushNotifications。人们可以使用它来提示按钮点击或其他东西的推送通知。

来源

2017-07-27 15:20:12 PsyGik

也适用于Angular 5 with'angular-cli'。非常感谢你，你救了我的一天！ :) –

将OneSignal与Angular 2 CLI集成

回答

相关问题