Remote Push Notifications

Native GDPR-compliant remote push notifications via OneSignal with deep linking and cross-platform support.

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

1

Create OneSignal Account

  1. Sign up for a free OneSignal account at onesignal.com

  2. The free tier includes unlimited push notifications with GDPR compliance

  3. Paid features include email marketing and SMS (not required for push notifications)

2

Create New App in OneSignal

  1. In the OneSignal dashboard, click "New App"

  2. Enter your app name and organization

  3. Select iOS platform first (we'll add Android later)

iOS Configuration

1

Generate P8 Key

Important: Use Apple Developer portal, NOT App Store Connect.

  1. Go to developer.apple.com

  2. Navigate to Certificates, IDs & ProfilesKeys

  3. Click the + button to create a new key

  4. Name your key (e.g., "OneSignal MyApp")

  5. Enable Apple Push Notification service (APNs)

  6. Configure the environment:

    • Select both Sandbox and Production
  7. Click ContinueRegister

  8. Download the key immediately (you can only download it once!)

  9. Save the .p8 file securely

2

Configure OneSignal for iOS

  1. Upload the .p8 file to OneSignal

  2. Enter the Key ID (found in Apple Developer portal next to your key)

  3. Enter the Team ID (shown next to your company/personal name in Apple Developer)

  4. 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.

  5. Click Save & Continue

  6. Select Native iOS (Despia creates true native apps!)

  7. Save & Continue

3

Add iOS App ID to Despia

  1. Copy the OneSignal App ID

  2. In your Despia project editor, scroll to OneSignal Integration

  3. Paste the App ID in iOS Application ID field

  4. Save and publish your project

Android Configuration

1

Create Firebase Project

  1. Go to Firebase Console

  2. Important: Log in with the same Google account linked to your Google Play Console

  3. Create a new project with your app name

  4. Wait for project setup to complete

2

Enable Firebase Cloud Messaging

  1. In Firebase project settings, go to Cloud Messaging

  2. Ensure Firebase Cloud Messaging API v1 is enabled

  3. If disabled:

    • Click the three dots → Open in Cloud Console

    • Click Enable

3

Generate Service Account Key

  1. Go to Project SettingsService Accounts

  2. Click Generate New Private Key

  3. Download the JSON file and save it securely

4

Configure OneSignal for Android

  1. In OneSignal, go to SettingsPushPush Platforms

  2. Click Add Android

  3. Upload the Google Service Account JSON file

  4. Click Save & Continue

  5. Select Native Android

  6. Save & Continue

5

Add Android Configuration to Despia

The OneSignal App ID remains the same for both platforms. In Despia:

  1. Add the same App ID to Android Application ID field

  2. Save and publish your project

Testing Push Notifications

iOS Testing

  1. Install your app via TestFlight

  2. Open the app to register the device

  3. In OneSignal dashboard:

    • Go to AudienceSubscriptions

    • Verify your device appears

  4. Send a test message:

    • Click New Message

    • Select segments: Active Subscriptions or Total Subscriptions

    • Add title, subtitle, and message

    • Click Send

Android Testing

  1. Install your app from Google Play Console

  2. Open the app to register

  3. 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

1

Get Player ID in WeWeb

Add this to your WeWeb app to capture the OneSignal Player ID:

  1. Create a variable: onesignalplayerid

  2. Add a page load workflow to set the variable onesignalplayerid

  3. In the “change variable value” block run following JavaScript:

    // The player ID is pre-injected by Despia
    return oneSignalPlayerId || "sample-id-for-editor";
    

2

Associate Player ID with User

  1. In your page load workflow, add an API call to your backend

  2. Send:

    • Current user ID (from your auth system)

    • OneSignal Player ID

  3. Store this relationship in your database

3

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:

  1. Store OneSignal REST API key as environment variable

  2. 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

Need Help?

For additional support or questions, please contact our support team at support@despia.com

Updated on