In a previous article, this one, I have widely covered the topic of the progressive web apps. What is a PWA, which guarantee they provide to their users, and the arguments for the developer of the app. Finally, I have covered the topic of how turn your Hugo website into a PWA. Furthermore, I carefully avoid the case of PWAs on iOS.
This article deal with the topic of progressive web apps, specifically for iOS. What is the current state, the current limitations, and how to overcome some of them, to minimize the difference of experience with the other devices and operating systems. Finally, I will share some ideas (that I personally didn’t explore to reduce the most possible the gap between a PWA on iOS and on the other devices and operating systems).
❯ Prerequisites
This article only deal with the topic of PWA on iOS. I will then consider that you are familiar with the notion of Progressive Web App, and if by this reading you plan to create a PWA for iOS devices specifically, that you already have a PWA up and running for the other devices and operating systems. If this is not the case, I warmly recommend you the reading of my previous article on this topic, and additionally the References from this same article.
❯ PWA x iOS
Actually, when I am writing this article, Apple is procrastinating on the support of the Progressive Web Apps on iPhones and iPads. They are only partially supported, and the reason seems to be that they want to minimize the alternatives to install applications through their official App Store.
But in early 2024, in Europe, the Digital Marketing Act imposed a bunch of new regulatory rules to the big actors of the tech. As a direct consequence, Apple removed the support of the PWA in the beta of iOS, and confirmed that this wasn’t an issue, but an intentional choice they made in order to comply to the Digital Marketing Act (cf this article). Furthermore, and one month after this communication, given the “bad buzz” and the criticism induced by their decision, they finally decided to add back the support of PWAs on mobile operating system (cf this article).
Even if the situation is back to normal, and that this twists only concerned the Europe, it gives you a good idea of how Apple are appreciating the use of Progressive Web Apps on their OS.
Note that this only concerns iOS and iPadOS (I didn’t consider watchOS here, since PWAs are simply not supported on this OS), but not macOS. Actually, this OS is incredibly more permissive by nature compared to the Apple’s mobile OS, and the installation of macOS applications throughout the App Store is anecdotal, these applications can be easily downloaded via any web browser, before being installed by a package manager. On the contrary, installing applications on mobile OS has to be done via the App Store. The PWAs are an exception, because installable directly from the web browser. Furthermore, all the browsers are forced to use WebKit, that is the component limiting the functionalities of the PWA available on these systems.
I recommend you to have a look on this article, regularly updated, that describes which functionalities concerning the PWAs are today supported on Apple mobile OS, and those that are not supported.
❯ How to install a PWA on iOS
Installing a PWA on an iPhone is fairly simple. Furthermore, contrary to the other OS, there is no mechanism that informs the user that the application is a PWA and that can be installed as an application, like the banner displayed on Android devices, or the button that appears at the right of the research bar on Chrome, on desktop environments.
To install a PWA on iPhones, the user must click on the “share” button (on the bottom bar on Safari, or at the right of the search bar on Chrome for instance), then click on “Add to Home Screen”. Then, the app is added on the home screen and can be launched in clicking on the icon.
Note that whatever the Web browser you are using, the process is relatively similar since Apple imposes to every browser to use the same engine, WebKit. This may change in the future, in particular in Europe, thanks to the DMA (source).
❯ How to add a splash screen to your app
Depending on the internet connection, and also the performance of the website, it can take a little moment to appear and be usable. To enhance the user experience, this is possible to have a splash screen that is displayed at the launch of the app.
❯ How it works on Android smartphones
On Android, a splash screen is dynamically created, based on the property “background_color” from the manifest file, and icons, also defined on the manifest. I am not going deeper into the details here, since this is not the topic of this post. Furthermore, I recommend you to have a look on the section splash screen of the article Transforming Your Hugo Blog into a Progressive Web App (PWA) from this blog if you are interested in the purpose.
❯ And on iOS
On iOS, … the behavior I have mentioned for Android smartphones is not working at all.
Furthermore, we can obtain something quite similar, with a roots and ugly solution, consisting in adding a line in the HTML header of the home page of the PWA, to inform iOS about which image can be used as a splash screen. This is not only the icon, but an image displayed in full screen. As a result, to obtain a satisfying result, we have to add a different image per screen resolution.
For example, below is an example of (one of) these lines, that I have defined for this website:
| |
I personally defined… 34 different distinct images, referenced in 34 lines similar to the line above, on the HTML of this website.
Hopefully, people developed tools online to facilitate the life of developers desiring transforming their website into a PWA, and making them available with a decent user experience on iOS.
I personally used the tool “PWA Icons & iOS Splash Screen Generator” from progressier.com to generate the splash screens of my website for iOS. Given an image in input, and an accentuation color, it generates the splash screens for iOS adapted to the different resolutions plus the HTML code to add to your page, and also icons on different resolutions to reference on the manifest file. Useful for your PWA in general, and amazing for iOS in particular!
❯ Shortcuts
In general, this is possible to create shortcut on Progressive Web Apps, to access to some parts of the website. For example, on this website, on Android, a force touch on the app’s icon display shortcuts to access to the tech articles, or management articles (when I am writing this article; this may vary in the future!).
On iOS, … this is simply not supported yet! Even if you defined shortcuts on your manifest, they are not displayed when doing a force touch on the installed app.
❯ Display
On PWAs, there are 4 display modes available: fullscreen, standalone, minimal-ui, and browser. iOS is only supporting 2 modes: browser (the app is not launched on its dedicated frame, but on the web browser), and standalone (a kind of “fullscreen” mode, but with the iPhone’s status bar visible). In case where the display mode of the PWA is set to one of the two other existing value, there is a fallback mechanism: PWA with display with minimal-ui fallback to browser; and fullscreen fallback to standalone.
❯ Icons
Globally, aside what I have already said concerning the splash screen, there is an important difference concerning how iOS is dealing with PWA icons compared to the other devices and OS: only pictures on PNG format are currently supported on iOS. A good recommendation is then to adopt by default this format for your PWA, to maximize its compatibility.
❯ Minimal example website
To conclude this article, I share here a few links to guide you if you want to add similar changes on your website.
- A website example here
- The commit containing changes to apply on the theme here
- The commit containing changes to apply on the website here
❯ Wrap up
Even if it is still not perfect, PWA is still quite decent on iOS devices, and this, added to a few changes specific to iOS, makes the experience of PWAs quite similar once it has been installed by the users. And this is maybe this last detail which is problematic: as of today, the installation banner does not exist on iOS, and there is no easy and straightforward solution to overcome this limitation. We can hope the support of such banner in the future, but given Apple’s policy regarding the installation of applications with another methods than through their App Store, this is certainly not their main priority to add this.
