Suppress PWA installation on iOS, only add shortcut to Home Screen

Question

I have a PWA that works fine on Android, but is crippled on iOS due to limitations opposed on PWAs imposed by iOS (specifically accessing live camera frames). The app works fine when viewed in Safari. This is counter-intuitive but unfortunately the case.

Is there a way to tell iOS that it should not "install" the PWA, but instead just create a shortcut on the home screen and open it in regular Safari? Like any ol' website?

Or do I need a specific index.html for iOS that does not include the manifest.json reference? The PWA is a single-page Angular application.

Answer 1

Answering my own question. I managed to solve this by programmatically removing the manifest element in the OnInit hook of the AppComponent.

In index.html:

<link rel="manifest" href="manifest.json" id="manifest-link">

In the AppComponent:

ngOnInit() {

   // ... platform detection
   if (isiOS) {
       const element = document.getElementById('manifest-link');
       console.log(`Removing manifest element on iOS, should suppress PWA installation`);
       element.remove();
    }
}