Integration von OneSignal mit Angular 2 CLI

Ich versuche, OneSignal in meine Angular 2 App zu integrieren, um Push-Benachrichtigungen zu erhalten. Zuerst habe ich eine HelloWorld-App mit reinem alten HTML erstellt und es funktioniert wunderbar. Also habe ich versucht, es in meine Angular-App zu integrieren, aber Benutzer werden nicht erstellt/registriert und sind daher nicht dafür angemeldet, Benachrichtigungen zu erhalten.Integration von OneSignal mit Angular 2 CLI

-Code Auszüge:

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>

Die userId ist immer null.

Ich habe überprüft die folgenden:

App-ID korrekt
Genehmigung Benachrichtigung eingestellt ist im Browser

Fragen ermöglichen:

Gibt es eine Möglichkeit, alle init-stuffs in einer beliebigen Komponente auszuführen, etwa in der ngOnInit() -Methode?
Ich möchte mich für Push registrieren, wenn der Benutzer auf eine Schaltfläche in meiner Komponente klickt, anstatt das Glockensymbol zu verwenden? Wie erreicht man das? (Ich weiß, dass notifyButton auf false wird nicht die Glocke benachrichtigen zeigen)

PS: Prüfung auf Chrome Angular CLI (Hat nicht funktioniert mit FF oder Safari)

Quelle

2017-07-27 PsyGik

Ich fürchte, ich ein anderes vorgestellt Fall, in dem die Dokumente überflogen werden, anstatt sie tatsächlich zu lesen.

Also habe ich den Code ein wenig verschoben und das ist, was am Ende für mich funktionierte.

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); 
     }); 
     }); 
    }); 
    } 
    . 
    . 
    . 
}

paar Dinge zu beachten:

zum subscriptionChange anhören und dann bekommen die Benutzer-ID
subscriptionChange ist auch Tanne Wenn der Benutzer die Benachrichtigung manuell vom Browser aus deaktiviert.
autoRegister: false, wird die Option 'Zulassen'/'Verweigern' nicht angezeigt. Also müssen wir registerForPushNotifications anrufen. Man kann dies verwenden, um bei einem Klick auf die Schaltfläche eine Push-Benachrichtigung anzufordern.

Quelle

2017-07-27 15:20:12 PsyGik

Funktioniert auch für Angular 5 mit 'angular-cli'. Vielen Dank, du hast meinen Tag gerettet! :) –

Integration von OneSignal mit Angular 2 CLI

Antwort

Verwandte Themen