iOS now supports Progressive Web Apps : All you need to know

The arrival of iOS 11.3 marks the Apple shift towards Progressive Web apps. According to experts, Apple has quietly added support for Progressive Web Apps (PWAs) in iOS without much fanfare and it clears the way for new technologies behind PWA’s. If you are hearing about Progressive Web apps for the first time, it’s time to know more about them like their capabilities and challenges, how they work, and what you need to do if you have already published a Progressive Web app.

 

What are Progressive Web Apps?

The world of apps as we know is closely managed by two technology leaders – Apple and Google through the App Stores and Google Play respectively. Until now, both technology leaders were not openly supporting apps that were available for download outside the app stores. The arrival of Progressive Web apps has changed the way the mobile app works.

 

A Progressive Web app is a web app with modern web capabilities that can deliver rich user experience like native apps. One good thing about the PWA technology is you can deploy your mobile apps as a native app and also as Progressive Web app and take advantage of both channels. It means you can deploy your native app through app stores and make PWA available through the mobile web. The PWA can run in any browser like a website or another app.

 

Unlike native apps, the progressive apps is built using web technologies and it does not come with any signing or packaging. The PWA can be installed on an operating system where it will look and function like any other app and it can even work in offline mode. In simple words, you don’t need an approval from Apple’s iOS store to publish your app and it is possible for users to install apps on iOS that are not part of App store. Apple did not give a special mention to support for progressive web apps in iOS 11.3 to avoid confusing users.

 

Do Progressive Web Apps have to pass App Store tests?

No, the PWA is not required to pass any App Store tests before publishing. However, the PWA can only run in the browser or in Web Platform security and execution model. Companies wanting to develop internal mobile apps for their employees will benefit by taking the route of developing PWA as they don’t have to put their mobile app through rigorous app store tests which will save time. However, this freedom from tests does come with some limitations. PWA cannot access some native features like ARKit for augmented reality or Face ID on iPhone X.

 

What abilities are granted to PWAs on iOS?

Despite some native limitations, the PWA’s can take advantage of other features and technologies that are available to native apps. Here is the list:

 

1. Sensors(Gyroscope, Accelerometer, Magnetometer)
2. Apple Pay
3. Geolocation
4. Audio output
5. Camera
6. Speech Synthesis (when headphones are connected)
7. WebGL, WebRTC, WebAssembly and many other experimental features.

 

 

What limitations are applied to PWAs in comparison to Native iOS apps?

Though you can have native apps and PWAs for iOS, there is difference in performances between PWAs and Native iOS apps. The difference in performance is mainly due to restrictions and limitations applied to PWAs:

 

a.) PWAs can only store offline data and files up to 50MB

b.) If the user does not use the PWA for weeks, all its offline data will be deleted to free the space. However, the PWA app icon will remain on the home screen. The data will be downloaded again when the user accesses PWA again next time.

c.) The PWA will not have access to features like Touch ID, battery information, Bluetooth serial, Face ID, Beacons, ARKit, and altimeter sensor

d.) The PWA will not have permission to execute any code when the app is running in the background

e.) The PWA will not have access to native social apps nor have access to sensitive and private information including background location and contacts

f.) The PWA will not have access to several Apple-based services nor access to In-app payments

g.) The PWA will always work full-screen ad it cannot use the Side or Split views to share the screen with other apps.

h.) The PWA will not have Siri integration, icon badge, or Push Notifications

 

How differently PWAs work on Android in comparison to iOS?

Android is more welcoming to PWA’s. Hence, you can see progressive web apps are granted more abilities and fewer restrictions on Android platform in comparison to iOS platform. Here is the list of abilities offered to PWAs by the Android platform:

 

a.) An Android PWAs can store more data and files(more than 50 MB)

b.) Android does not delete the files if the user does not use the PWA for a long However, if there is less storage space remaining, Android can delete some PWA files. If the user accesses PWA a lot, the PWA can make Persistent Storage request to Android OS.

c.) On Android, PWA has access to Bluetooth, especially on BLE devices.

d.) Android offers Web Share to PWA to access native share dialog.

e.) PWA have access to Speech Recognition

f.) PWA can use Web Push Notifications and Background Sync features

g.) PWA can use Web App Banner for app promotions

h.) PWA can customize screen orientations and splash screen to some extent

i.) You can install and run more than one instance of PWA using Chrome and WebAPK

j.) In Android, PWAs appear under Settings where you can see data usage. On iOS, everything related to PWA comes under Safari.

k.) In Android, the PWA can be opened in standalone mode if the PWA presents an intent URL.

 

Things PWA users can do on iOS and not on Android

Though iOS places more restrictions on PWAs, it does give some abilities that are not available on Android. Here are some things PWA users can do on iOS but not on Android

 

• iOS users can rename the PWA icon before installing it.
• Company’s having PWA can send a shortcut of PWA to its corporate users. This is made possible through the configuration profile.

 

How to install PWA on iOS?

Since PWAs are not available through App Store and Safari does not support Web Banners like Android, it can be a challenge to install PWA on iOS. The right way to install PWA on iOS is navigating to PWA URL within Safari browser and pressing the Share icon followed by pressing Add to Home screen option. However, the browser does not indicate in any way that the website you are visiting is a PWA. You cannot install PWA using pseudo browsers like Chrome, Brave, Edge, or FireFox available in App Stores. iOS also does not support the use of Service Workers for PWA.

 

When the PWA is installed in iOS, you will see an app icon just like other apps but the only difference there won’t be any 3D menu. If you install the same PWA again, you will see another app icon for the second installation. However, the installation files will be shared in such case.

 

How to make your existing PWA work on iOS?

Your existing PWA will work on iOS 11.3 and it will be available for installation to all users who have updated to iOS 11.3. You don’t need opt-ins for PWA to work on iOS. However, don’t expect the PWA to work as expected on iOS. You might face many bugs and challenges to get your PWA working on iOS 11.3.

 

What features of PWA won’t work on iOS?

a.) The display:minimalUI and display:fullscreen won’t work on iOS. If you try to use fullscreen in PWA on iOS, it will only trigger standalone. Similarly, the minimal UI will not yield any action as it will be a shortcut to Safari. However, PWA can get something like Fullscreen using cover-fit view report or use a deprecated meta tag on iOS, the only difference is you will get the status bar over the PWA

b.) If your PWA depends on Background Sync, you need to employ backup implementation

c.) There is no way to lock the orientation in PWA on iOS.

d.) There is no way to style the status bar nor use the theme-color option in PWA on iOS. You need to use CSS/HTML way to emulate a theme-color and use deprecated meta tag for black and white color for the status

e.) Users will not be able to navigate between screens if your PWA does not have navigation buttons or it does not support gestures.

f.) If you have transparent icons they will look horrible on iOS as the platform does not support it. They only look good on Android.

g.) The iOS take the icon image from the apple-touch-icon link and not from Web App Manifest like Android. If your PWA does not provide a link tag for icon image, the iOS will use a screenshot as the icon

h.) PWA cannot have a splash screen on iOS and the platform will ignore color properties from the manifest

i.) Manifest events will not work on iOS

 

Wrapping up

Though PWAs has been existing for sometime, Apple had ignored them completely until now. With the introduction of support for PWA in iOS 11.3, Apple has taken the first step towards progressive web apps due to their popularity in users. There are so many speculations about how Apple will support PWA in the future as it may eliminate an important income source of Apple which comes from App Store.