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 Cancel reply

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

Save my name and email in my browser for the next time I comment.

Pranoy says:

January 23, 2020 at 10:43 am

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.

Reply

Jose Varghese says:

January 23, 2020 at 11:08 am

Good catch!! Thanks for pointing this out Pranoy 🙂

Reply

Kurteli Team says:

November 17, 2020 at 6:40 pm

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

Reply

Team SuperPWA says:

February 3, 2021 at 1:10 pm

Hi Kurteli Team,

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

Reply

Goldi says:

January 28, 2021 at 12:14 am

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

Reply

Team SuperPWA says:

February 3, 2021 at 12:44 pm

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.

Reply

Team SuperPWA says:

February 4, 2021 at 12:15 pm

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.

Reply

Articles Linking Here

Pingback: Here's What's New With Progressive Web Apps (PWA) On iOS 13 - AppSierra