APNs + FCM · Images · Action Buttons · Custom Sounds
Rich push notifications for your web app — images, buttons, sounds, deep links
Web push on iOS is limited and unreliable. AppNative gives your wrapped web app true native APNs and FCM push, then goes further: images in the banner, tappable action buttons, custom sounds, badge counts, deep links and AI-designed expanded layouts — all sent with one REST call from the backend you already have.
How do you send rich push notifications from a web app?
Wrap the web app with AppNative, which registers each device with APNs (iOS) and FCM (Android) and ties tokens to your logged-in users. Then call AppNative's push API from your own backend — a Base44 function, Supabase, Replit, Node, Python — with a title, body, and optionally an image URL, an action category, a custom sound, a badge count and a deep-link path. AppNative ships the iOS Notification Service and Content Extensions needed to download the image and render the layout, so the rich notification just works on the device.
- Transports
- Native APNs (iOS) + FCM (Android) — not web push
- Rich media
- Images on both platforms; AI-designed expanded layouts on iOS
- Actions
- Up to 4 buttons per category, each deep-linking to a route
- Sounds
- Up to 3 bundled custom sounds, or designed in the Sound Designer
- Targeting
- By user email, external ID, device, segment or broadcast
- Works with
- Lovable, Base44, Bolt.new, Replit, React, Next.js, any backend
How to turn a Rich Push Notifications app into a native mobile app, step by step
Six steps, one codebase, no native development. Each step happens inside AppNative except the first.
- 1
Wrap your web app and enable push
Connect your repo, toggle Push Notifications, and upload your APNs key and Firebase service account. AppNative bakes token registration into the native build and links each device to the signed-in user.
- 2
Design the rich layout
In the Rich Push tab, describe the expanded notification — an order card, a match score, a booking reminder — and the AI writes the SwiftUI Notification Content Extension layout with a live preview. Add action buttons and pick or design a custom sound.
- 3
Build
Press Build. AppNative adds the Notification Service Extension (for images) and Notification Content Extension (for layouts), their provisioning profiles and sounds, compiles everything on hosted macOS CI and ships to TestFlight.
- 4
Send from your backend
POST to the push API with your app ID and API key: title, body, image_url, category, sound, badge, data and a deep-link path. Target one user by email, an external ID, a list, a device or everyone. Rules can also fire pushes automatically when your data changes.
Native capabilities your Rich Push Notifications app gains
These are real native implementations compiled into the binary — not browser fallbacks — and they're what moves an app past Apple's "minimum functionality" bar.
- Native APNs and FCM delivery with automatic token registration tied to your logged-in users
- Images in the notification banner on iOS (Notification Service Extension) and Android (BigPicture)
- AI-designed expanded notification layouts on iOS (Notification Content Extension)
- Action button categories — up to four buttons, each opening a specific route
- Custom notification sounds bundled into the app, or generated in the Sound Designer
- Server-tracked badge counts with clear-on-open
- Deep links from any notification into any screen of your web app, including cold start
- Targeting by email, external ID (for apps without email login), device, or broadcast
- Rules engine: fire pushes automatically when records change in your backend
- Self-hosted mode for teams that want tokens stored in their own database
Rich Push Notifications to mobile: the alternatives, compared
Native push vs web push in a wrapped app
Web push inside a WebView is unreliable on iOS and can't attach images, action buttons or custom sounds. AppNative registers devices directly with APNs and FCM from native code, so delivery, badges and rich media behave exactly like a hand-built native app.
Why images and layouts need native extensions
On iOS the image is downloaded by a Notification Service Extension and the expanded layout is drawn by a Notification Content Extension — both separate native targets compiled into the binary. Ordinary WebView wrappers don't ship these, so their notifications stay plain text. AppNative generates and signs both extensions per app.
AppNative push API vs running OneSignal or Firebase yourself
You can wire a third-party SDK, but you still need the native extensions for rich content and code in the app to map tokens to users. AppNative includes all of that and exposes a single REST endpoint that already knows who each device belongs to — call it with an email or external ID and you're done.
Rich Push Notifications to mobile app: every question, answered
The exact questions people ask before shipping a Rich Push Notifications project to the App Store and Google Play.
Can a wrapped web app send push notifications with images?
Yes, with AppNative. The build ships the iOS Notification Service Extension that downloads the image and Android's BigPicture style, so passing image_url in the API call shows the picture in the banner on both platforms.
Can I add buttons to a push notification?
Yes. Define categories with up to four actions; each button deep-links to a route in your web app. Send with that category and iOS shows the buttons on long-press.
Can I send push from a Base44, Supabase or Lovable backend?
Yes. The push API is plain HTTPS. AppNative can generate the exact backend function code for Base44, Supabase or Replit, and rules can trigger pushes automatically when a record changes.
How do I target users if my app has no email login?
Call window.AppNative.identify('your-id') from your web app and send with target_external_id. Any string works — a customer ID, household ID or CRM contact.
Does the badge count update?
Yes. AppNative tracks a server-side badge per device, increments it on each push unless you pass an explicit value, and clears it when your app calls clearBadge.
Web app to mobile app: key terms defined
- Native app wrapper
- A native app wrapper is a compiled iOS or Android application that renders your existing web app inside a native web view (WKWebView on iOS, WebView on Android) while exposing real device capabilities — push notifications, biometrics, camera, in-app purchases — to that web code through a JavaScript bridge.
- Hybrid app
- A hybrid app ships web technologies (HTML, CSS, JavaScript) inside a native binary that can be distributed through the App Store and Google Play. It differs from a progressive web app, which is installed from the browser and cannot be listed in either store.
- App Store guideline 4.2 (minimum functionality)
- Apple's rule that an app must do more than repackage a website. Apps that add native capability — push notifications, biometric login, camera use, offline support, widgets, in-app purchases — satisfy it; a bare website in a shell does not.
- Bundle ID / package name
- The permanent reverse-domain identifier for your app (for example com.yourcompany.yourapp). It's registered once with Apple and Google and can never be changed for a published app, so it must be decided before your first submission.
- Code signing and provisioning profile
- Apple requires every binary to be signed with a distribution certificate and matched to a provisioning profile tied to your bundle ID and team. Android requires an upload keystore. Without them a build cannot be installed or submitted.
- TestFlight
- Apple's beta distribution service. Uploading a signed build to TestFlight lets up to 100 internal testers install the app immediately, before public App Store review — the fastest way to see your wrapped app on a real device.
- Over-the-air update
- Because a wrapper renders your live web app, deploying your web app updates the mobile experience instantly with no store review. A new native build is only required when something inside the binary changes: icon, splash screen, bundle ID or a native capability.
- StoreKit and Google Play Billing
- The in-app purchase systems Apple and Google require for selling digital goods inside an app. Stripe stays valid on the web, so most apps run both and grant the same entitlement from either payment source.
Rich Push Notifications to mobile app: frequently asked questions
Do wrapped web apps get real native push?
With AppNative, yes — devices register with APNs and FCM from native code, tokens are tied to your signed-in users, and you send through a REST API. It is not browser web push.
What makes a push notification 'rich'?
Images, action buttons, custom sounds, badges and expanded layouts. On iOS these need Notification Service and Content Extensions compiled into the app, which AppNative generates for you.
Do I need Swift to design the notification layout?
No. The Rich Push studio is an AI chat that writes the SwiftUI Notification Content Extension from a description and previews it live.
Can I use my own notification sound?
Yes. Upload up to three .wav/.caf/.aiff sounds under 30 seconds, or design one in the built-in Sound Designer; reference it by filename when you send.
Do deep links work on a cold start?
Yes. Tapping a notification or action button opens the app directly on the route you specified, whether the app was in the background or fully closed.
Can I keep tokens in my own database?
Yes. Self-hosted push mode hands the device token to your web app via window.AppNative.pushToken instead of storing it on AppNative, so your own backend sends the pushes.
Can I also add widgets and Live Activities?
Yes. The same build ships WidgetKit home-screen widgets and ActivityKit Live Activities, both designed through AI chat and driven from your backend.
Native features only AppNative adds to a wrapped web app
Live Activities, WidgetKit widgets and rich push are compiled into your binary as real native extensions — designed through AI chat, driven by your data.
Ship from your AI app builder
Rich push is one of several native surfaces AppNative adds to a wrapped web app. See the others, or pick your builder for a step-by-step guide.
Ship your Rich Push Notifications app to the App Store and Google Play
Connect your repo, toggle the native features you need, press Build. Your first TestFlight build can be in testers' hands today — and your Rich Push Notifications workflow doesn't change at all.