How to Test PWA on iOS devices

As Apple started supporting PWA from iOS 11.3, it’s the time to know how to test PWA on iOS devices and what all criteria Apple consider a website to be a Progressive Web Apps. Even though some of the main features of PWA like Add to HomeScreen prompt, Splash screen, Theme color are missing upon iOS, currently iOS supports Offline caching of pages and Offline Page that helps to navigate the website while Offline.

The criteria iOS uses to decide if the site is a Progressive Web App:

  • Website should served fully via HTTPS
  • Website has a Web App Manifest
  • Web App Manifest has name or short_name property
  • Service Worker registered with a fetch event handler
  • Display property should set to standalone, fullscreen and minimal-ui

Steps to Install and Test PWA on iOS Devices

Upon iOS devices, PWA currently works only upon Safari Browsers. And browsers like Chrome for iOS, Firefox Focus for iOS, Dolphin Ghostery, Opera Mini and Adblock Browser won’t support PWA at this moment.

  1. Make sure that you have cleared the browsing data.
  2. Visit the website that you have installed PWA
    Note: Currently like as on Chrome for Android and other browsers on Android, there’s no inbuilt prompt to show Add to Homescreen for iOS devices. Due to that reason you need to manually add the PWA to your Homescreen.
  3. Tap the Share button (at the browser options)
  4. From the options tap the Add to Homescreen option, you can notice an icon of the website or screenshot of website added to your devices homescreen instantly.
  5. Tap the icon from homescreen, then the Progressive Web App of your website will be loaded.
  6. You cannot see the Splash Screen with icon and background color which you set upon Manifest right now, as both are not supported upon iOS.
  7. Upon PWA navigate via some of the web pages you like, after that disconnect the internet on your iOS device and close the web app.
  8. After that tap the web app icon again, you can notice that all the pages which you viewed earlier during online can be viewed and all the pages that you haven’t viewed will showed by an Offline page that you set upon the service worker.

If you are using WordPress, try out our PWA plugin available at WordPress directory

Leave a Reply

Your email address will not be published. Please enter all fields.

Amal says:

Sir your plugin is awesome, I want to buy it for my new website new site, but sir please tell me does the plugin work on WordPress ph 7.0?

Team SuperPWA says:

Hi Amal,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Pranoy says:

little typo: Currently like as on Chrome for Android and other browsers on Android,[here] there’s no inbuilt prompt to show Add to Homescreen for iOS devices. Due to that reason you need to manually add the PWA to your Homescreen.

Jose Varghese says:

Good catch!! Thanks for pointing this out Pranoy 🙂

bendsch says:

hey, thanks for that hint. how would you add the pwa manually?

cheers
bendsch

Team SuperPWA says:

Hi bendsch,

In Video already shown, but for instructions, we added support in CTA Addon.

Faeu says:

Hello. I’m using Super PWA, and I’m loving it !! There is only one detail that I was in doubt, and I would like, if possible, to give me a solution: When I install the app, I only have the option of the footer banner? I wish there was a link, which I could add to a button for my users to download, would that be possible? I noticed that some users go straight and do not see the banner, opu worse, do not see (do not read) its content, and think it is an advertisement, and then touch close, without installing the app. Is there a procedure for me to get this installation link? Than you!

Team SuperPWA says:

Hi Faeu,

You can use our pro version same thing we provide in the CTA module will you please follow this tutorial link – https://superpwa.com/doc/call-to-action-cta-add-on-for-superpwa/ and more details will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Ruwan says:

I have build my PWA site and testing on a iPhone 7. After adding it goes to Frequently Used Tab and also when I press the Icon it does not give a full screen.

Team SuperPWA says:

Hi Ruwan,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible

Ruwan says:

I have green ticks on Manifest, Service Worker and HTTPS on my site. Does this mean I have taken care of all what is required for iOS? or is there anything else I need to do.

Team SuperPWA says:

Hi Ruwan,

Basic things are done, everything will work for iOS also but as you know iOS give partial support to PWA Its will work, not give any prompt to add to the home screen like android for this we have support in CTA Addon.

Ana says:

Hola. Me gustaría saber cuándo PWA será compatible con otros navegadores de IOS. Resulta un inconveniente para mí que no lo sean..

Team SuperPWA says:

Hi Ana,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Dennis says:

Hi Jose, when I follow these steps to “Add To Home Screen” on my iOS 12 device, the icon is showing all black instead. Is this normal? What can I do to make the icon and background color match my Manifest settings?

Team SuperPWA says:

Hi Dennis

By default, ios give black color for the icon background. To resolve you need to make your icon other than black color.

Kurteli Team says:

Hi I see a different screen when I open my website on an ios phone

Team SuperPWA says:

Hi Kurteli Team,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Goldi says:

The icon gets blurry on the iphone. Even after uploading a 512*512 ps icon.
How do we fix that?

Team SuperPWA says:

Hi

We have raised this on Github this issue, Our development team will work on this, and soon it will be fixed in further updates. Here is the URL of the ticket – https://github.com/SuperPWA/Super-Progressive-Web-Apps/issues/161, you can track its development.

Callum says:

Is it possible to show the add to home screen button more than once and is the add to home screen banner available on iOS yet?

Team SuperPWA says:

Hi Callum,

Yes, It is possible to show multiple “add to home screen” button via the shortcode feature. And for banner use CTA Addon, here iOS support also available.

TheKnot says:

Hi,
I tried your PWA on my iPad as test to see if it work offline, unfortunately when :
– I “add to the Homescreen”,
– then cut the network of the device,
– then launch the PWA from the homescreen icon
I get the default Safari network error instead of the offline configured page of the SuperPWA :/

Actually, I need a PWA boilerplate that can offer an full offline experience on iOS devices.
Do you have infos about that issue ?

Team SuperPWA says:

Hi TheKnot,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Stevie Marco says:

My PWA app works perfectly on Android after following the instructions. But on IOS I’m having a problem. The app icon shows a small version of the web page and not the created Icon and when I click on it it simply connects to the website as if I accessed it from the browser. What am I doing wrong?

Team SuperPWA says:

Hi Stevie Marco,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Stevie Marco says:

My PWA app works perfectly on Android after following the instructions. But on IOS I’m having a problem. The app icon shows a small version of the web page and not the created Icon and when I click on it it simply connects to the website as if I accessed it from the browser. What am I doing wrong?

Team SuperPWA says:

Hi Stevie Marco,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Team SuperPWA says:

Hi Come fare il backup di un sito WordPress: tutti gli step,

Yes, as already shown in the Video for more details will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible

Team SuperPWA says:

Hi Here’s What’s New With Progressive Web Apps (PWA) On iOS 13 – AppSierra,

Yes, we have this support, and still, if you are facing any issue/problem then contact our technical team – https://superpwa.com/contact/ they will help you as soon as possible.

Stevie Marco says:

My PWA app works perfectly on Android after following the instructions. But on IOS I’m having a problem. The app icon shows a small version of the web page and not the created Icon and when I click on it it simply connects to the website as if I accessed it from the browser. What am I doing wrong?

Team SuperPWA says:

Hi Stevie Marco,

Will you please contact our technical team from here- https://superpwa.com/contact/ they will help you as soon as possible.

Articles Linking Here

  • Pingback: Come fare il backup di un sito WordPress: tutti gli step
  • Pingback: Here's What's New With Progressive Web Apps (PWA) On iOS 13 - AppSierra
  • Stay Updated

    Learn more about Progressive Web Apps
    and get latest updates about SuperPWA

    we'll share our root password before we share your email with anyone else.