Progressive Web Apps (PWAs) are changing how we think about web and mobile applications. They combine the best features of websites and mobile apps, such as offline access, push notifications, and responsive designs. This makes PWAs a great choice for users and developers alike, offering a smooth experience across different devices. Although PWAs are usually accessed through web browsers, you can publish them on app stores like the iOS App Store. This increases their visibility and provides users with a more app-like experience.
Publishing a PWA on the iOS App Store requires wrapping it in a native container, following Apple’s guidelines, and submitting it for review. Whether you’re a beginner or a professional, this tutorial will walk you through each step of the process, from preparing your app to submitting it to the store.
PWA Setup
Preparing PWA App for iOS Store using SUPWERPWA Plugin.
- First, download and install the SuperPWA Pro plugin from here. Ensure you have the latest version.
- On the dashboard, click on ‘Features (Add-on),’ select ‘Apple App Package Generator,’ and activate the option. Then, click on “Activate” and go to the settings.
- Once you go to the settings, you will see an options dashboard with the Bundle ID and Generate App Packages. First, generate the app, then click on ‘Save Settings‘ to generate the APK download option. Once it appears, click on ‘Download.’
- A ZIP file will start downloading. It contains all the essential packages required to publish your APK on the iOS store. This is a straightforward process, so you don’t need to spend hours developing or coding your PWA app.
Creating Your Application.
Before beginning the submission process, you need to set up the Swift project that will host your PWA:
- Extract the contents of the folder you downloaded from the SuperPWA package.
- Open a terminal and navigate to the
srcdirectory.
- Execute the following command:
pod install.
💡 Tip: If you encounter an error while running pod install, try installing CocoaPods first by using the command brew install cocoapods. If Homebrew isn’t installed on your system, you can set it up here.
- Open the
.xcworkspacefile located in yoursrcdirectory.
📢Warning ❗ Attempting to open and build the .xcodeproj file will result in a failed build. Make sure to use the .xcworkspace file instead, as it is the correct one for building.
- In Xcode, navigate to Product > Build to compile your project.
- Once the project is open in Xcode, click the ▶️ button to run your PWA in an iPhone simulator. You can also select other iOS simulators to test your app on different devices.
Configuring App Capabilities
- In Xcode, go to the Signing & Capabilities tab and turn off any capabilities your app doesn’t need. Keep only the ones that are essential for your app. This step is crucial for passing the app review process.
Releasing Your App
The next part of getting your PWA onto the App Store is the trickiest and might take some time.
- Sign In To Your Apple Developer Account
To submit your app to the iOS App Store, sign in to your Apple Developer Account. If you don’t have one yet, you can enroll here. The enrollment fee is $99 per year, but non-profit organizations can get this fee waived.
- Set Up a Bundle ID
Next, you’ll need to create a Bundle ID in your Apple Developer account that matches the one from your SuperPWA iOS package.
1.Go to your Apple Developer account and click on Certificates, Identifiers & Profiles.
2. Click on Identifiers and then select the + symbol to add a new identifier.
3. Choose App IDs and select App as the type.
4. Add a description of your choice and Enter your Bundle ID. Important: It must match the Bundle ID you used in SuperPWA iOS Package.
5. In the capabilities section, enable Associated Domains and Push Notifications.Click Continue, then Register to complete the process.
📝Note: If you didn’t remember your Bundle ID from SuperPWA, you can find it in the project.pbxproj file.
- Generate a Certificate Signing Request (CSR)
Next, use the Keychain Access app to generate a Certificate Signing Request (CSR)
1. Open the Keychain Access app.
2. In the top menu, go to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.
3. Enter your email address and name. You can leave the CA Email Address blank.
4. Select the Saved to disk option and click Continue.You’ll be asked to save a .certSigningRequest file to your computer.
- Set Up the Certificate
Now, install the certificate you downloaded:
1.Open the Keychain Access app.
2. Ensure you’re in the Login section on the left sidebar.
3. Drag and drop your downloaded .cer file into the list of certificates.
- Set Up a Provisioning Profile
Next, use the certificate you created to set up a Provisioning Profile:
1. Go back to the Certificates, Identifiers, & Profiles section in your Apple Developer account, Select Profiles and click the + symbol to add a new profile.
2. On the next page, choose App Store under Distribution and click Continue.Select the app ID, choose the Bundle ID and click Continue.
3. Choose the certificate you created in the previous step and click Continue.Enter a name for your Provisioning Profile using your Bundle ID and click Generate.
4. Finally, click Download to get your .mobileprovision file.
- Reserve Your App Name
Once you have the provisioning profile, you can reserve your app name on your developer account:
1. Go back to your Apple Developer account and click on App Store Connect and Select My Apps.
2. Click the + symbol and then choose New App.
3. You’ll be asked for some details about your app:
- Select iOS as the platform.
- Choose any name you want for your app.
- Pick a language.
- Select the Bundle ID you created earlier.
- You can enter any string for the SKU.
- Choose Full Access for User Access.
4. Finally, click Create to reserve your app.
Deployment
Add your PWA app to the iOS App Store.
After downloading your iOS APK zip, kindly check all the essential items required to publish the app. The package includes important elements such as screenshots, descriptions, and more.
Once you’ve completed your app, it’s time to upload your PWA app package. Please follow the all below steps.
- First, you’ll need to sign in to Xcode:
- Click
Xcodein the top menu bar. - Click
Preferences. - Navigate to the
Accountspanel. - If you don’t see your Apple Developer account already, click the
+symbol in the bottom left.
- Click
- Sign in to your account.
- Next, you’ll need to assign your project to your account:
- Select the
Project Navigatortab. - Select your application.
- Select the
- Select
Build Settings.
- Scroll down to the
Signingsection.- Under Code Signing Identity, set the Release configuration to Apple Distribution.
- Under Development Team, set the Release configuration to your Apple Developer Account team.
- On the same project page, navigate to Signing & Capabilities and then select Release.
- Lastly, you only need to create an archive and upload it:
- At the top of Xcode, select your iPhone simulator name and select
Any iOS Device (arm64).
- At the top of Xcode, select your iPhone simulator name and select
- Next, select Product > Archive from the macOS top menu bar, and once the archive process finishes, choose Distribute App > App Store Connect > Upload, then follow the prompts to upload your application.
- The final step is to submit your app for review: go to your apps list in App Store Connect, scroll to the Build section, click Select a build before you submit your app, choose the archive you just created, review and set the metadata for your app, and then click Submit for Review.
Note : once approved, your PWA will typically appear in the App Store within 24–48 hours.
Guidelines
Here are some best practices for preparing and publishing a PWA (Progressive Web App) on the iOS App Store:
- Adherence to Apple’s Guidelines: Ensure your app complies with Apple’s App Store Review Guidelines.
- Performance Optimization: Optimize your PWA for swift load times and smooth interactions to enhance user experience.
- User Privacy: Clearly disclose any data collection practices and ensure user privacy is respected, in line with Apple’s policies.
- Regular Updates: Maintain your app by providing regular updates that address bugs and introduce new features.
FAQ’s
Now, let’s look at the mostly asked FAQ’s.
- Why should I publish my PWA on the iOS App Store?
- Publishing on the App Store improves discoverability and allows users to download and use your PWA like a native app.
- Do I need a Mac to publish a PWA on iOS?
- Yes, a Mac is required to use Xcode, which is essential for submitting apps to the iOS App Store.
- Can I update my PWA after publishing?
- Yes, you can update your PWA’s wrapper or underlying web app and resubmit to the App Store.
- Does Apple charge for app submissions?
- Yes, Apple requires an annual subscription to the Apple Developer Program, which costs $99.
- What tools can I use to create a native wrapper?
- With SuperPWA, you don’t need to put in any extra effort—simply generate the iOS APK package, and you’re ready to launch!
That’s it for this tutorial. If you want send Push notification on iOS please follow this tutorial: https://superpwa.com/docs/article/how-to-setup-push-notifications-using-fcm-for-apple-pwa-app/
If you need more help or have any concerns or suggestions, please fill out the form below.
