Integrate OneSignal with JavaScript
- First, ensure you have the OneSignal JavaScript SDK loaded in your application. Typically, this is done by adding a script tag in your HTML pointing to the OneSignal CDN.
- Initialize OneSignal in your JavaScript file. You'll need your OneSignal App ID for this. Here's a basic example of initialization:
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "YOUR_APP_ID",
allowLocalhostAsSecureOrigin: true
});
});
Configure Notifications Permissions
- Request notification permissions from users as it is a critical user experience step. Use the following code to prompt the user:
OneSignal.push(function() {
OneSignal.showNativePrompt();
});
Manage User Subscriptions
- To manage user subscription status, determine whether they are already subscribed or need to be prompted:
OneSignal.push(function() {
OneSignal.isPushNotificationsEnabled().then(function(isEnabled) {
if (isEnabled) {
console.log("Push notifications are enabled!");
} else {
console.log("Push notifications are not enabled yet.");
}
});
});
Send a Test Notification
- To test sending notifications, use the OneSignal REST API. You'll need the REST API key from your OneSignal dashboard. Make an HTTP POST request to the OneSignal API endpoint.
- Here's an example using JavaScript's Fetch API to send a POST request:
const sendNotification = function(data) {
fetch('https://onesignal.com/api/v1/notifications', {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'Authorization': 'Basic YOUR_REST_API_KEY'
},
body: JSON.stringify(data)
}).then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
};
const messagePayload = {
app_id: "YOUR_APP_ID",
included_segments: ["All"],
contents: {"en": "Test message from OneSignal!"}
};
sendNotification(messagePayload);
Listening for Notifications
- You can set up event listeners to handle notifications when they are received. Customize user actions when a message comes in, even letting them navigate to a specific page:
OneSignal.push(function() {
OneSignal.on('notificationDisplay', function(event) {
console.log('OneSignal notification displayed:', event);
});
});
Debugging and Testing
- Utilize console logs and OneSignal's dashboard for debugging any issues with sending or receiving notifications. Ensure your network requests are successful and that your app ID and API key are correct.
- Test your implementation thoroughly across different browsers, especially focusing on permission handling and notification display.
This guide assumes you have the app ID and REST API key available from your OneSignal account and that you adhere to best practices for permission requests and notifications handling.
