將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集成

回答

相關問題