iOS PWA Tool

Make your Widely built PWA iOS compatible with these few easy steps

Step 1: Use this Splash screen image generator, copy the code to every view(HTML) of your website, and images provided in the root of your application:

Step 2: Checkout this additional code, copy this as well:
Paste the following code in all your views's <head> tag

<meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="default">
 <!--This tag customizes the status bar in iDevices and content attribute can have value: default(transparent), black, Black-translucent(results in a transparent background with white text. Additionally, this status bar floats above your content, meaning you have to push your content down 20px in order to not have the content overlap with the status bar text.-->
 <link rel="apple-touch-icon" href="icon.png">
 <!--Here replace 'icon.png' with the path of your app's icon--> 
                        
Step 3: You're done, now let's test the Progressive Web App for iOS Safari
Note: You will need an iPhone/iPad with iOS 11.3 or greater to run a PWA.
  • Open your PWA in the Safari web browser
  • Click on the share button
  • Click 'add to homescreen'
  • Check your home screen for your PWA's icon
  • If you find the icon, open the app
  • See if splash screen is displayed correctly
  • Check iOS's navigation bar for theme color
  • Browse the app for sometime
  • Go offline by disabling Wi-Fi and mobile data
  • Check if app is working offline or not
  • In case of an issue, drop us a message at hi@widely.io and we will get back to you ASAP
Not a Widely PWA user? Click below and request a demo to make your website a PWA for iOS and Android

© 2016-18 Widely. All rights reserved.