Days
Hours
Minutes
Seconds

Introductory Offer
50% off on Everything for a very limited time! Use Coupon: SUPERLAUNCH

Coupon: SUPERLAUNCH

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.

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 🙂

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.

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.

Articles Linking Here

  • 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.