Overview
This guide demonstrates how to implement native push notifications in your WeWeb PWA using Despia. Unlike web push notifications which require workarounds and have limitations, native push notifications provide full capabilities for both iOS and Android platforms.
Prerequisites
-
A WeWeb application
-
Despia account with your app configured
-
OneSignal account (free tier is sufficient)
-
Apple Developer account (for iOS)
-
Google Play Console account (for Android)
-
Firebase project (for Android)
Setting Up OneSignal
Create OneSignal Account
-
Sign up for a free OneSignal account at onesignal.com
-
The free tier includes unlimited push notifications with GDPR compliance
-
Paid features include email marketing and SMS (not required for push notifications)
Create New App in OneSignal
-
In the OneSignal dashboard, click "New App"
-
Enter your app name and organization
-
Select iOS platform first (we'll add Android later)
iOS Configuration
Generate P8 Key
Important: Use Apple Developer portal, NOT App Store Connect.
-
Go to developer.apple.com
-
Navigate to Certificates, IDs & Profiles → Keys
-
Click the + button to create a new key
-
Name your key (e.g., "OneSignal MyApp")
-
Enable Apple Push Notification service (APNs)
-
Configure the environment:
- Select both Sandbox and Production
-
Click Continue → Register
-
Download the key immediately (you can only download it once!)
-
Save the .p8 file securely
Configure OneSignal for iOS
-
Upload the .p8 file to OneSignal
-
Enter the Key ID (found in Apple Developer portal next to your key)
-
Enter the Team ID (shown next to your company/personal name in Apple Developer)
-
Enter the Bundle ID:
-
Find this in Despia dashboard under Publish App
-
Copy your bundle ID
Note: To use a custom bundle ID without Despia branding, contact support.
-
-
Click Save & Continue
-
Select Native iOS (Despia creates true native apps!)
-
Save & Continue
Add iOS App ID to Despia
-
Copy the OneSignal App ID
-
In your Despia project editor, scroll to OneSignal Integration
-
Paste the App ID in iOS Application ID field
-
Save and publish your project
Android Configuration
Create Firebase Project
-
Go to Firebase Console
-
Important: Log in with the same Google account linked to your Google Play Console
-
Create a new project with your app name
-
Wait for project setup to complete
Enable Firebase Cloud Messaging
-
In Firebase project settings, go to Cloud Messaging
-
Ensure Firebase Cloud Messaging API v1 is enabled
-
If disabled:
-
Click the three dots → Open in Cloud Console
-
Click Enable
-
Generate Service Account Key
-
Go to Project Settings → Service Accounts
-
Click Generate New Private Key
-
Download the JSON file and save it securely
Configure OneSignal for Android
-
In OneSignal, go to Settings → Push → Push Platforms
-
Click Add Android
-
Upload the Google Service Account JSON file
-
Click Save & Continue
-
Select Native Android
-
Save & Continue
Add Android Configuration to Despia
The OneSignal App ID remains the same for both platforms. In Despia:
-
Add the same App ID to Android Application ID field
-
Save and publish your project
Testing Push Notifications
iOS Testing
-
Install your app via TestFlight
-
Open the app to register the device
-
In OneSignal dashboard:
-
Go to Audience → Subscriptions
-
Verify your device appears
-
-
Send a test message:
-
Click New Message
-
Select segments: Active Subscriptions or Total Subscriptions
-
Add title, subtitle, and message
-
Click Send
-
Android Testing
-
Install your app from Google Play Console
-
Open the app to register
-
Test similarly to iOS
Note: Android devices may show "user didn't opt in" due to manufacturer variations, but notifications typically still work.
Implementing User-Specific Notifications
Get Player ID in WeWeb
Add this to your WeWeb app to capture the OneSignal Player ID:
-
Create a variable:
onesignalplayerid
-
Add a page load workflow to set the variable
onesignalplayerid
-
In the “change variable value” block run following JavaScript:
// The player ID is pre-injected by Despia return oneSignalPlayerId || "sample-id-for-editor";
Associate Player ID with User
-
In your page load workflow, add an API call to your backend
-
Send:
-
Current user ID (from your auth system)
-
OneSignal Player ID
-
-
Store this relationship in your database
Send Targeted Notifications from Backend
Example using Xano (adaptable to any backend):
curl -X POST https://onesignal.com/api/v1/notifications \
-H "Content-Type: application/json; charset=utf-8" \
-H "Authorization: Basic YOUR_REST_API_KEY" \
-d '{
"app_id": "ONESIGNAL-APP-ID",
"include_player_ids": ["PLAYER-ID"],
"headings": {"en": "Hello"},
"contents": {"en": "This is a test notification from Despia"}
}'
Backend Implementation Steps:
-
Store OneSignal REST API key as environment variable
-
When triggering notifications:
-
Query your database for user's player IDs
-
Call OneSignal API with specific player IDs
-
Send personalized content
-
Best Practices
Security
-
Never expose OneSignal REST API keys in frontend code
-
Use environment variables for all sensitive keys
-
Consider IP restrictions for API keys
User Experience
-
Request notification permissions at appropriate times
-
Provide clear value proposition before requesting permissions
-
Use badge counts and custom sounds (coming soon to Despia!)
Database Design
Create a linking table:
-
user_id
(from your auth system) -
player_id
(from OneSignal) -
device_type
(iOS/Android) -
created_at
-
last_active
Advanced Features
Rich Notifications
-
Large images
-
Action buttons
-
Categories for notification grouping
Troubleshooting
Common Issues
iOS device not appearing in OneSignal:
-
Ensure TestFlight build is using correct provisioning profile
-
Check that APNs is enabled for your app ID
-
Verify P8 key has correct permissions
Android showing "user didn't opt in":
-
This is often a false negative due to device variations
-
Test by sending notification anyway - it usually works
-
Check Firebase Cloud Messaging is properly enabled
Notifications not received:
-
Verify OneSignal App ID matches in both platforms
-
Check device has notifications enabled in settings
-
Ensure proper network connectivity
For additional support or questions, please contact our support team at support@despia.com