将 OneSignal 与 Angular 集成
Integrating OneSignal with Angular
我正在尝试将 OneSignal 集成到我的 Angular 2 应用程序中以接收推送通知。首先,我使用普通的 HTML 做了一个 HelloWorld 应用程序,它运行得很漂亮。所以我试图将它包含到我的 Angular 应用程序中,但用户没有收到 created/registered,因此没有订阅接收任何通知。
代码摘录:
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 始终为空。
我检查了以下内容:
- App ID 正确
- 通知权限在浏览器中设置为允许
问题:
- 有没有办法在任何组件中完成所有初始化工作,比如在 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",
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
。可以使用它在单击按钮或其他内容时提示推送通知。
2018 年编辑
我制作了一个实用程序 class,我在所有 angular 项目中使用它来减少 onesignal 的样板代码。
https://gist.github.com/PsyGik/54a5e6cf5e92ba535272c38c2be773f1
最简单的解决方案是将 One Signal 提供的脚本放入您的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport"
/>
...
...
<link rel="manifest" href="/manifest.json" />
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: 'xxx-xxxx-xxxxx',
});
});
</script>
...
将以下内容添加到angular.json
...
"architect": {
"build": {
"builder": "ngx-build-plus:build",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/favicon.png",
"src/manifest.json", <-- this
"src/OneSignalSDKUpdaterWorker.js", <-- this
"src/OneSignalSDKWorker.js", <-- and finally this one
"src/assets"
],
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": ["src/assets/sass"]
},
"scripts": []
},
...
并将清单和 2 个 *.js 文件放入 /src/*
就是这样。您需要将其发布到您的服务器,而不是您的 localhost:4200。
我使用这种方法让它在我的身上工作。希望有帮助
我正在尝试将 OneSignal 集成到我的 Angular 2 应用程序中以接收推送通知。首先,我使用普通的 HTML 做了一个 HelloWorld 应用程序,它运行得很漂亮。所以我试图将它包含到我的 Angular 应用程序中,但用户没有收到 created/registered,因此没有订阅接收任何通知。
代码摘录:
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 始终为空。
我检查了以下内容:
- App ID 正确
- 通知权限在浏览器中设置为允许
问题:
- 有没有办法在任何组件中完成所有初始化工作,比如在 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",
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
。可以使用它在单击按钮或其他内容时提示推送通知。
2018 年编辑
我制作了一个实用程序 class,我在所有 angular 项目中使用它来减少 onesignal 的样板代码。
https://gist.github.com/PsyGik/54a5e6cf5e92ba535272c38c2be773f1
最简单的解决方案是将 One Signal 提供的脚本放入您的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport"
/>
...
...
<link rel="manifest" href="/manifest.json" />
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: 'xxx-xxxx-xxxxx',
});
});
</script>
...
将以下内容添加到angular.json
...
"architect": {
"build": {
"builder": "ngx-build-plus:build",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/favicon.png",
"src/manifest.json", <-- this
"src/OneSignalSDKUpdaterWorker.js", <-- this
"src/OneSignalSDKWorker.js", <-- and finally this one
"src/assets"
],
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": ["src/assets/sass"]
},
"scripts": []
},
...
并将清单和 2 个 *.js 文件放入 /src/*
就是这样。您需要将其发布到您的服务器,而不是您的 localhost:4200。 我使用这种方法让它在我的身上工作。希望有帮助