Adding iOS PWA Splash Screens
Published March 21, 2024
Overview
Eventfinity Progressive Web Apps (PWA) automatically generate an Android splash screen that can be configured using the web manifest background color and icon. However, for Safari, iOS requires developers to create a splash screen for all iPhone and iPad screen sizes that will use the app. Recent studies suggest that iPhone users keep their device every 3 years before upgrading. With that in mind, uploading screens for iPhone XR through iPhone 15 and above should cover most users. This article will outline the steps to create individual splash screens for iOS.
Step One - Set the background color and add app icons
1. Go to Event Settings | Web Manifest and set the splash screen background color, enter the hex code in the “BACKGROUND_COLOR" field.
3. Click "icons" tab and then "Add Icon"
4. Select a non-transparent PNG file for both Android (512x512) and Apple (180x180) devices. (Transparent backgrounds will display inside a white circle on Android devices, and inside a black circle on iOS devices.)
It is recommended to have the icon background color be the same back color set on the “Config” screen. Drag and drop the Android 512x512 file over and click upload.
5. Set the “purpose as maskable and save.
6. Now add the iOS 180 x 180 icon, upload, leave the purpose to “any” and save.
Creating All iOS Splash Screens
Android automatically generates a splash screen for your PWA. But Apple iOS requires a splash screen for all possible iPhone and iPad screen size. Fortunately, Progressier has iOS splash screen generator to do the work for you.
1. Open a new browser window or tab and navigate to "PWA Icons & iOS Splash Screens Generator | Progressier" - https://progressier.com/pwa-icons-and-ios-splash-screen-generator
2. Click "Upload image" and drop in the 512 x 512 icon uploaded on the dashboard icon tab.
3. Click "Fill Color" and add the background color hex code from the web manifest config tab. You can adjust the horizontal and vertical positions to center your icon in the preview if needed.
4. Click "Generate assets"
5. Click "Download Bundle" to save to your download folder.
Uploading the iOS Splash Screens
1. Click "iOS Splash Screens" tab
2. Click "Create All Ios Splash Screens". This will generate iOS splash screen as identified on the Apple developer specifications page.
3. Locate the splash screen named iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.jpg and drag it to the image field. Click Upload.
4. Click "Save"
5. Repeat the process for the remaining screens, or you may wish to use only certain device screen sizes. If any screens are skipped, it will simply present a brief white screen on the event load for the device without a custom splash screen uploaded.
Additional Information
The Progressier tool will generate 34 iPhone and iPad screens, in both portrait and landscape formats. In the list below, you will see devices released over the last decade.
Recent studies suggest that iPhone users keep their device every 3 years before upgrading. With that in mind, uploading screens for iPhone XR through iPhone 15 and above should cover most users.
Additionally, you may desire to bypass loading the landscape splash pages and iPad screens.