Top Tips on how to Make Your PWA on iOS Feel Like Native

Posted by The NineHertz on July 3rd, 2018

With the new iOS 11.3 update, Apple has introduced the long-awaited PWA features to iPhones and iPads. Now, you can develop your progressive web apps in the iOS platform with basic PWA features.

However, the implementation is yet not full-proof. That is because the PWA features are not so polished and are often failing to provide the best experience to the users of the OS. It is still clumsy in many departments in iOS and bug reports are increasing at an exponential rate.

The app is displayed totally fine on Android.  But developers are failing to implement the same level of polish in their PWAs in Apple devices.

Fortunately, there are some workarounds which you might want to know. These will let you make your PWA as native as possible for the iOS platform. If you follow these, you might as well succeed in making your PWA truly realistic and no less in terms of functionality as compared to its Android counterparts.

Renovate icons:

Try to be as creative as possible with the icons which you use for your app. It has been found that iOS is not particularly friendly with icons. And, the default icon pack for your PWA can look worse. Thankfully, ios app developer can use apple-touch-icon meta tag with their desired image for your PWA. However, avoid transparency effects, since those are not going to work.

Take care of the launch screen:

Apple's devices don't have support for app launch screens generated from the manifest. The resultant is that a white empty screen pops up when you try to launch an app before it finally loads up. This makes the experience worse for users as they might often think that the app is not polished enough. To correct this, Apple developers' page has a good solution. You can try apple-touch-startup-image and add a custom image to show on the launch screen. Gone is the white screen making way for a better UX.

Homescreen shortcuts:

In the Android side of things, most default browsers allow users to add a shortcut for PWAs on their home screen. When a user visits a PWA, a pop-up generates. That urges the user to add the shortcut on their Android's home screen. However, this feature is lacking in case of iOS.

What's more, it takes a number of steps for a user to generate that shortcut in iOS. What you can do is, add some lines of code to add your custom pop-up to be displayed on the screen when the user is using the PWA.

But the catch here is that you can only add the functionality when the user is browsing through Safari. This does not work while the app is in standalone mode. However, you can check whether an app is in standalone mode by using the command window.navigator.standalone. That way, you will be able to confirm if the app already exists on the home screen.

Developers should also remember to change the position of the command of implementation. Because the share button is not in the same position in iPads when compared to an iPhone.

Try to persist the app:

iOS has this bad habit of restarting an app every time the user leaves the app and relaunches it again. So, it is a good idea to try and keep everything persistent. For using react and redux, there are some amazing packages to help you out.

Those are redux-persist and react-router-redux. If you are depending on vue, you might want to take help from vuex-persist and vuex-router-sync. But, it would be best to create your own workaround based on your app's functionality.

Make way for navigation:

In case of Apple's handheld devices working on iOS, there's no back button, unlike Android. So, it is always safe to create a hassle-free solution for navigation. To take care of the navigation, add your own method of exiting from the app. You might want to display a back button or add some gesture functionality that would result in a better UX.

Offline:

Users of all OSs could be very dynamic and to provide them with the best UX, you should prepare for weak or no connection at all. For most intents and purposes, the user would be satisfied enough if the stored and persistent data shows on the app. Fortunately, you have a chance to implement Service Workers API here. With that, you would be able to cache network requests including API calls.

To make things simpler for you to take advantage of cache services with your service providers, Google has launched an example code which you can use. Suppose, you have completed the process of allocating proper paths to assets which you'd want to cache.

Next, you need to register with the service provider. You can go offline provided you succeed in doing these. It is always safe to add an event listener. It would show the user that he/she is offline when there is no connection.

These were some of the pointers on how you could achieve your goal of making your PWA look as realistic as possible. However, there are some known issues which developers happen to face.

Background synchronization almost always goes haywire while running PWAs. Push notifications may not come properly in the iOS screen. Some APIs like TouchID, ARKit, In-App Payments, Split View are still under development to work correctly on iPads.

Orientation lock doesn't work in most scenarios. There's no change of colour on the status bar, unlike Android. In task manager, present app screen should come up and a not a flash image. This is not desirable.

Developers should be aware of the fact that, any app data that is stored in the device and any caches are not shared among WebApp, WebView, and Safari. That implies user has to log in to your app with his credentials after placing the app's shortcut on the Home-screen. This causes a degradation of the UX and should be somehow rectified.