🎉 Limited-Time Offer: Get 40% OFF Agency & Lifetime plans with code HYPER40 — or 10% OFF Personal, Webmaster & Freelancer plans with code HYPER10! Shop Now
Skip to main content
What can we help you with?
< All Topics
Print
Posted
Updated
Byamanstacker@gmail.com

How to Configure iOS and Safari Settings in Hyper PWA

Unlike Android devices, iPhones and iPads (iOS) do not show an automatic “Install” button on websites. Instead, visitors must manually tap the browser’s Share button and select “Add to Home Screen”.

Hyper PWA makes this process incredibly easy for your visitors by showing them a simple step-by-step guide on how to add your website to their phone’s home screen.

⚙️ How to Configure the Settings

To get started, log in to your WordPress Dashboard, go to Hyper PWA > Core Features in the menu, and scroll down to the iOS & Safari section.

Step 1: Turn On the Toggle in the Accordion

This will show a friendly banner at the bottom of the screen specifically for iPhone and iPad users, guiding them on how to install your app.

Step 2: Upload Your App Icon

Under the Apple Touch Icon field, upload your logo or app icon:

  • Recommended Format: A square PNG image, 180×180 pixels in size.
  • Where it appears: This is the icon users will see on their iPhone or iPad home screen after installing your app.
  • Note: If you leave this blank, the plugin will automatically use your main PWA icon.

Step 3: Choose Your Status Bar Color

When users launch your app from their home screen, the top bar of the device (where the time and battery status are shown) can be customized:

  1. Default: Standard white or black background.
  2. Black: Sets a solid black status bar background.
  3. Black Translucent: Makes the top bar completely transparent. Your website’s header will stretch all the way to the top of the screen under the time and battery icons, giving it a premium full-screen look.

Step 4: Enable Branded Splash Screens

Check the box for iOS Splash Screens.

  • What it does: When users click your app icon, this shows a clean loading screen with your logo and background color while the app opens, instead of a blank white screen.

Step 5: Customize the Text Guide

If you want to translate the instructions into a different language or customize the message, you can edit the text fields under the Custom Install Prompt Settings section:

  • Title: The main heading (e.g., “Install Our App”).
  • Description: A short sentence explaining why they should install it (e.g., “Get offline access and faster loading times”).
  • Step 1 & Step 2 Text: Clear directions telling them to click the Share button and select Add to Home Screen.

📱 How it Looks on iPhones

Once enabled, your mobile visitors using Safari will see a helpful guide banner at the bottom of their screen showing exactly what to tap.

💡 Good to Know (Common Questions)

  • Why isn’t the guide showing on Chrome for iOS?
    Apple restricts PWA installations to the Safari browser on iOS. If a visitor uses Chrome or Firefox on their iPhone, the banner will politely ask them to open your site in Safari to install it.
  • When can iOS users receive push notifications?
    iPhones support push notifications only after the user has installed your app to their Home Screen. Once installed, they can open the app and accept notification requests.
Table of Contents