pwacompat | PWACompat to bring Web App Manifest to older browsers | Web Framework library

Update - 14/09/2019

There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

SFSafariViewController has gained getUserMedia functionality (!!!, however I need to confirm this, please see below for reports of it working)

• https://bugs.webkit.org/show_bug.cgi?id=183201

However WKWebView does not seem to gain getUserMedia functionality:

• https://bugs.chromium.org/p/chromium/issues/detail?id=752458
• https://bugs.webkit.org/show_bug.cgi?id=185448

iOS 13 and Safari 13 release notes:

• https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes
• https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

Edit

In short: A PWA or any website being used on iOS outside of the native Safari app will not be allowed access to getUserMedia as Apple is deliberately blocking access for "Security concerns". This includes any websites saved to the homescreen and/or viewed inside another application such as Facebook. The same restrictions apply to Android however on Android the app developer can ask for Camera permissions and get around this. (This means if you are a website developer and you need camera functionality, you will need to ask Facebook, etc, to rebuild their app to allow this on Android).

See their bug tracker here: http://www.openradar.me/33571214 and https://forums.developer.apple.com/thread/88052

From web based Safari experiences to Native Android, etc. I make crossplatform Apps in web and native for a living. There are several potential problems you will encounter with getUserMedia. To workout what is causing potential problems you should follow this list in order to create a successful application.

Your problem is specifically 1. because you are not successfully querying the API. Nevertheless the MediaCapture from getUserMedia should fail because after fixing 1. you will encounter 2. and 3.

1. API Polyfil - Always make sure you include the latest getUserMedia adapter to stop any cross-platform inconsistencies in the getUserMedia API. Some browsers might use the old getUserMedia API (via 'navigator.getUserMedia) and have not been updated (to use navigator.mediaDevices.getUserMedia). You should also check this link for other needed polyfills.
2. Support - Check CanIUse for getUserMedia support for your target audience and make sure you have the necessary fallbacks. Your fallback for if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { return true; } else return false; returns false, and if getUserMedia throws and error ideally should be the same.
3. Permissions - Even though you include pwacompat it does not mean the browser window has the permissions to access the camera. This is because not all browsers are equal! iOS 11 allows getUserMedia access inside of the native Safari app only. However you cannot access getUserMedia on iOS 11 WKWebView or UIWebViews. When you save an app to the homepage it is hosted inside a WKWebView. Thus an experience which works inside of Safari will not work when saved to the homescreen or inside another application. Confusing eh?..! Thus if you want your experience to work you need to tell the user when they open upside another app that they must open the website in safari for real-time camera access. There is no way around this. On Android an app maker can override this permission and allow access to getUserMedia. If you use macOS or Windows you need to make sure the browser shell also has getUserMedia compatibility (e.g. Edge+, Chrome, Firefox, etc)
4. Security - HTTPS websites can only access the camera (unless on localhost). Check the location prototcol '(location.protocol === 'https:') ? true : false;' to see if you are allowed to get a successful MediaCapture request

The following is a test link I use for platform support: https://github.com/marcusbelcher/wasm-asm-camera-webgl-test

In my GitHub there are also Android and React-native getUserMedia solutions

iOS started very late to open to PWAs and it still needs extra attributes (as you used) to provide the full set of PWA features.

In Chrome DevTools if you go to Application tab (for your application), can you see that the web manifest with its properties is correctly displayed and the service worker as well?

As Mathias said, you need an HTTPS connection to be able to register correctly a service worker. Localhost however is considered "safe" for developing purposes.

I wrote a series of articles about PWA, you can have a look and follow along to see if you missed anything.

Here a list of browsers supporting service workers (to compare with the safari version you are using).

UPDATE

I answer here to your comments:

1. If some web sites that offers PWAs (eg. Uber, FB) work as PWA on other devices, but not on your phone, then I would try to investigate whether there is a setting missing on your side. I made a quick research and it seems that for iOS users some extra steps are needed to use/enable PWAs:

The user has to access the PWA URL with Safari and then manually press the Share icon and then “Add to Home Screen.” There is no indication that the visited website is a PWA.

About the "Add to home screen" in Chrome, I could not indeed find any official information when it has been removed. I can only say that I never seen it again since one of the latest versions (v74+).

1. Every pages of a PWAs should be linkable in order to benefit from sharing it via social media apps. Therefore if you have a working PWA and you send links to others, these should work as well. There are no special browser restrictions, given that the app is correctly implemented.

I leave you below some links where other people have similar issues with PWAs and iOS 12.2:

• Link with discussion
• Test PWA
• Tipps article (here there are some suggestions on how to make the PWA work on iOS)

Meta Tag

In the meta tags is the viewport set to:

The key part of this is the viewport-fit = cover as the default is auto, by setting it to cover it fills the whole space.

Safe Area using CSS

Also have you set the "safe area" using CSS:

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

The safe area defines the space that is not obscured by the shape of the screen. When you set the viewport to cover it'll fill the whole screen and may cut content off depending on device.