How To Enable Native Push Notifications on Android App Generated Using SuperPWA (1-Click App Generator)

Push notifications are one of the most powerful features of Progressive Web Apps (PWAs), enabling direct and timely engagement with users. While Android has long supported Web Push via Service Workers, Apple introduced support for Web Push in Safari on iOS and iPadOS 16.4 and later, allowing PWAs added to the home screen via Safari to receive push notifications, finally leveling the playing field to an extent. However, it’s important to understand a key limitation:

Web Push notifications do not work when the PWA is packaged as a native iOS app and published via the App Store (e.g., using Cordova, Capacitor, or other wrappers).

This is because such apps use WKWebView, a web view container that currently does not support Service Workers or Web Push APIs. Apple restricts this functionality in native-wrapped apps to encourage the use of its native Apple Push Notification service (APNs) for notifications.

We also offer an iOS app generator with just one click, making it incredibly easy to turn your PWA into an installable app-like experience on iPhones and iPads no coding required.

This tool streamlines the process of creating a shareable, installable iOS web app that looks and feels like a native app, perfect for businesses, bloggers, and developers alike.

For more details click on this link : https://superpwa.com/docs/article/how-to-publish-progressive-web-app-pwa-on-ios-app-store/

Why use FCM for iOS Push Notifications?

Firebase Cloud Messaging (FCM) is a reliable cross-platform messaging solution by Google that bridges Web Push and native APNs delivery. When setting up push notifications for an Apple PWA app using SuperPWA:

• FCM acts as the message router, supporting both Android and iOS.

• On iOS, FCM delivers messages through APNs, Apple’s official push service.

• FCM simplifies implementation by offering a unified API and dashboard to manage push notifications across devices and platforms.

So, while Web Push works directly for PWAs installed via Safari on iOS 16.4+, using FCM becomes essential if you want to:

• Ensure reliable delivery across all platforms, including iOS.
• Leverage rich features like message targeting, topics, and analytics.
• Prepare for future transitions, like switching to native apps or expanding your notification infrastructure.

In this tutorial, we’ll walk you through the exact steps to set up FCM push notifications for your Apple PWA app using SuperPWA.

Steps to Set Up Push Notifications on Apple PWA using FCM

Create and Configure Firebase Project

• Set up a project on Firebase Console . Log in here with your google account and Also Enable Cloud Messaging.

• Once the Project will ready , Click on continue.

• A New page will open , click on iOS+ and it will redirect you the other page where you will have to create an App.

• Register your app by add details. Complete all the steps.

Step-by-Step: Generate APNs Certificate (.p12)

Create a CSR (Certificate Signing Request)
On Mac.

• Open Keychain Access:
  Navigate to Applications > Utilities > Keychain Access

• In the top menu, go to:
  Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority

• Fill out the form as follows:
  • User Email Address: Your Apple Developer account email
  • Common Name: Your app name or your full name
  • CA Email Address: Leave this field blank

• Select “Saved to disk”

• Click Continue, then save the .certSigningRequest file (CSR) to your desktop.

Log in to Your Apple Developer Account(Paid)

• Go to: https://developer.apple.com/account

• Navigate to Certificates, Identifiers & Profiles

• In the left-hand menu, click on Certificates.

Create a New APNs Certificate

• Click the “+” button to create a new certificate.

• Under Services, select:

• Apple Push Notification service SSL (Sandbox & Production) (for the .p12 method)

• Choose the App ID of your app (This must match the Bundle ID registered in Firebase)

• Upload the .certSigningRequest file generated in Step 1

• Download the generated certificate file (aps.cer)

Convert .cer to .p12

• Double-click the aps.cer file to install it in Keychain Access.

• In Keychain Access, search for the certificate using your name or app name.

• Right-click the certificate (ensure it includes the private key), then select Export.

• Choose the export format as .p12.

• Save the .p12 file.
  (You’ll be prompted to set a password — make sure to remember it.)

Upload to Firebase

• Go to your Firebase Console. Click on cloud messaging.

• Navigate to:
  Project Settings > Cloud Messaging

• Scroll down to the iOS app configuration section under APNs Certificates.

• Upload the .p12 file and enter the password you set during export.

• Once done with above all the setting. Click on Cloud messaging.

• Click on “create your first campaign” and complete all the steps.

Setting up push notifications for an Apple PWA using FCM involves a combination of tools from both Firebase and Apple Developer Services. Due to iOS limitations, FCM cannot directly deliver push messages to Safari. Instead, we use Apple Push Notification service (APNs) by generating an APNs certificate and linking it to Firebase.

That’s it for this tutorial! If you need any assistance, feel free to contact our team or simply fill out the form below.