iOS opens its doors to Progressive Web Apps
Written by Muriel Santoni on
Big news for those who have already made the move to Progressive Web Apps and for those who are still considering it!
You're well aware of the potential of Progressive Web Apps, the web applications that offer new functionalities in browsers that bring an experience comparable to that of native apps.
Progressive Web Apps have been on the rise since last year, but their main setback has been the fact that certain key features weren't supported on iOS devices.
You're well aware of the potential of Progressive Web Apps, the web applications that offer new functionalities in browsers that bring an experience comparable to that of native apps.
Progressive Web Apps have been on the rise since last year, but their main setback has been the fact that certain key features weren't supported on iOS devices.
We previously presented the cornerstone of Progressive Web Apps, or in other words the key element that allows them to provide the user experience that they do: Service Workers, which are the technical basis of what differentiates PWA's from classic websites.
This script, run in the background of the browser, offers a number of development possibilities, allowing an app's behavior to be significantly modified. Without Service Workers, Progressive Web Apps wouldn't be able to keep all of their promises, which is where the roadblock caused by the incompatibility between Service Workers and iOS came up.
With the iOS 11.3 update, Apple seems to officially be on board with Progressive Web Apps, as Service Workers are now compatible with iOS!
This script, run in the background of the browser, offers a number of development possibilities, allowing an app's behavior to be significantly modified. Without Service Workers, Progressive Web Apps wouldn't be able to keep all of their promises, which is where the roadblock caused by the incompatibility between Service Workers and iOS came up.
With the iOS 11.3 update, Apple seems to officially be on board with Progressive Web Apps, as Service Workers are now compatible with iOS!
What functionalities are available on iOS thanks to Service Workers?
Since the iOS 11.3 update, we are more than thrilled to announce that your PWA users on iOS can now enjoy the following functionalities:
- Offline functionality
- A bug fix concerning camera usage
These functionalities are available if the PWA is being run in Safari or directly from the device's home screen (full screen mode).
Services Workers aren't supported in Web Views, which means in browsers other than Safari (like Chrome iOS or the browser integrated with Facebook, for example).
Services Workers aren't supported in Web Views, which means in browsers other than Safari (like Chrome iOS or the browser integrated with Facebook, for example).
I already have a PWA, how can I enjoy these new features?
On your side, you'll have to make sure that your PWA's generation date is April 6 or after. To verify this, go to the menu Publication > Update > Progressive Web App Engine. Relaunch the generation if the date indicated is older than April 6.
On your users' side, their devices must work with iOS 11.3 (or a later version). Once the iOS 11.3 update has been installed, your PWA can enjoy all the advantages Service Workers bring.
On your users' side, their devices must work with iOS 11.3 (or a later version). Once the iOS 11.3 update has been installed, your PWA can enjoy all the advantages Service Workers bring.
What's the difference between PWA's on iOS and Android?
Despite the big step forward that this iOS update represents, there are still some functionality differences between PWA's on iOS and Android. Here are the major differences between the two OS:
- Cache management: offline functionality in PWA's is possible thanks to a cache management system. On iOS, the data storage is limited to 50Mo, but not on Android.
On Android, the stored files are deleted if there's no storage space left. On the other hand, on iOS, if the user hasn't used the PWA in several weeks, the cached files are deleted. The data is re-downloaded when the PWA is opened again.
- Background synchronisation: it is possible on Android, but not on iOS.
- Push notifications: they aren't supported on iOS yet. Apple still remains quite silent on the possibility of push notifications being supported in Safari. In any case, no luck for the moment with iOS 11.3.
- On Android, PWA's have Bluetooth access which isn't the case on iOS.
On Android, the stored files are deleted if there's no storage space left. On the other hand, on iOS, if the user hasn't used the PWA in several weeks, the cached files are deleted. The data is re-downloaded when the PWA is opened again.
- Background synchronisation: it is possible on Android, but not on iOS.
- Push notifications: they aren't supported on iOS yet. Apple still remains quite silent on the possibility of push notifications being supported in Safari. In any case, no luck for the moment with iOS 11.3.
- On Android, PWA's have Bluetooth access which isn't the case on iOS.
Will future iOS updates bring more functionalities?
As of today, developments in favor of PWA's are already underway at Apple.
After Service Workers, it seems like Apple is working on supporting the Web App Manifest in its browser, which is a major element of PWA's. This descriptive file allows for elements used while the PWA is working in full screen mode to be defined, as defined by the W3C. The Web App Manifest in Safari would allow for:
- Forcing the screen orientation when the PWA is being used in full screen mode (which means when it's launched from the home screen icon)
- Integrating a system in Safari that invites the user to install the PWA on their home screen (a pop-up is automatically displayed on Android). The Web App Manifest contains all the elements allowing the Webkit team to build this type of component.
- Building a launch screen for the PWA. On Android, this screen is built from the app icon. Its name and a background color are described in the manifest.
How can I install my PWA on the home screen?
It's possible to install a PWA on the home screen of your iOS device. However, it's up to the user to go through the process himself as there is no automatically displayed invitation message.
Here's the process for installing a PWA on the home screen:
1. Go to the PWA via its URL in Safari
2. Click the share button in Safari
3. Click "Add to home screen"
4. Verify that the name shown on your home screen is okay for you. If not, modify it and click "Add".
Here's the process for installing a PWA on the home screen:
1. Go to the PWA via its URL in Safari
2. Click the share button in Safari
3. Click "Add to home screen"
4. Verify that the name shown on your home screen is okay for you. If not, modify it and click "Add".
Why is the iOS 11.3 update a good opportunity for you?
Progressive Web Apps already worked on iOS, but they're now on their way to being completely functional on Apple devices. The fact that Service Workers are now supported as well as the Web App Manifest developments that are underway are a good sign for the relationship between Apple and PWA's.
One of the undeniable advantages of Progressive Web Apps is their accessibility. As they are run on the web, they're accessible via a simple URL, indexed by search engines, and once installed on the home screen, used just like any other app.
The first two points are more than positive for your visibility outlook, but the last one is crucial. A new distribution channel other than the App Store is now at your disposal. The World Wide Web—open and free.
One of the undeniable advantages of Progressive Web Apps is their accessibility. As they are run on the web, they're accessible via a simple URL, indexed by search engines, and once installed on the home screen, used just like any other app.
The first two points are more than positive for your visibility outlook, but the last one is crucial. A new distribution channel other than the App Store is now at your disposal. The World Wide Web—open and free.