9

I have created a PWA which uses WebRTC's getUserMedia to get a live camera stream. The PWA uses a manifest.json, and works great on Android.

On iOS however, the app also works if I open the link directly in Mobile Safari, but if I add it to the homescreen, it is undefined (as iOS only allows it in the Safari-context).

As a workaround, I would like to open the app in Mobile Safari instead of fullscreen mode, but I don't know how to do this, as it automatically opens fulscreen once it detects the manifest.json.

Does anyone have an idea as how to open an app with a manifest in Safari?

Thank you!

DebboR
  • 311
  • 3
  • 8

3 Answers3

3

There is a way to open the PWA avoiding full screen mode. In manifest.json, change the display attribute to "browser".

"display": "browser"

Refer this documentation under section "Display". You can also consider "minimal-ui" option. Please keep in mind, when you make this change, it will not just reflect in iOS, but also in Android.

On the actual issue in accessing getUserMeida, I don't understand why its not working in full-screen mode. Its just a HTML5 feature and nothing specific to PWA. So ideally, it should work in full-screen mode as well. Try to capture for any error when you open in full screen mode and post that here if you find any. It might be due to permissions as well and I recommend solving the issue in full-screen mode for better user experience.

Anand
  • 9,672
  • 4
  • 55
  • 75
  • 2
    Thanks, I was unaware of the "display"-attribute of the manifest. Unfortunately, we would like to keep the standalone on Android, and only switch this functionality off on iOS. The problem is that Apple only allows camera access via the getUserMedia feature in Mobile Safari (and not in another kind of WebView component, like for example a 3rd party browser or the PWA in this case). Source: [link](https://stackoverflow.com/questions/46228218/how-to-access-camera-on-ios11-home-screen-web-app?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) – DebboR Jun 15 '18 at 00:50
  • I assumed you wouldn't want this change for Android. But unfortunately, you cant make the display mode dynamic based on browser. But what I'm wondering is, PWA is iOS is crated using Safari and when you use the PWA app, it uses Safari browser only in full screen mode. At least that is what I've confirmed with Chrome in Android. How do you say PWA uses different web view? I'm guessing issue might be something else like permissions. – Anand Jun 15 '18 at 01:55
  • 2
    Yes, the full screen PWA on iOS runs inside a WKWebView. That is the reason the problem exists, as explained in other SO questions as well. I'm accepting the fact that a problem exists with no direct solution, and thus I would like to find a workaround to open the PWA with the manifest in Safari on iOS, but still standalone on Android. I hope this makes it a bit more clear. – DebboR Jun 23 '18 at 01:31
3

I figure out this by adding two manifest.json, one used by default for non ios devices and one for ios devices, I also create a detect.js script to detect wheter or not an ios device is accessing the pwa and change the manifest.json reference on the html. There is the code:

// Detects if device is on iOS 
const isIos = () => {
    const userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test( userAgent );
  }

// change manifest.json
if (isIos()) {
    document.getElementById("manifest").href = "ios-manifest.json";
}
Rodrigo Oliveira
  • 57
  • 1
  • 4
0

I would suggest you to set apple-mobile-web-app-capable to no with this meta tag in the head of the document:

<meta name="apple-mobile-web-app-capable" content="no">

This will avoid iOS to understand your web app as a PWA.

ekqnp
  • 284
  • 3
  • 13
  • I hoped this was right, but no, this didn't work for me. Only display: browser worked. I guess it has to be two manifests then. – dirkk0 Feb 09 '19 at 12:01