首页 文章

将OneSignal与Angular 2 CLI集成

提问于
浏览 次
4

我正在尝试将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）

angular typescript angular-cli onesignal

1 回答

  • 8

    我害怕我提出了另一个浏览文档而不是实际阅读它的案例 .

    所以我把代码移动了一下，这就是最终为我工作的东西 .

    的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 然后获取用户ID
      当用户从浏览器手动禁用通知时，也会触发

    • subscriptionChange .

    • autoRegister: false, 不会提示'Allow' / 'Deny'选项 . 所以我们要调用 registerForPushNotifications . 可以使用此选项在按钮单击或某事时提示推送通知 .

    EDIT 2018

    我已经制作了一个我在所有角度项目中使用的util类来减少信号的样板代码 .

    https://gist.github.com/PsyGik/54a5e6cf5e92ba535272c38c2be773f1

    回复于

相关问题