getUserMedia в PWA с манифестом на iOS 11

Я создал PWA, который использует getRserMedia WebRTC для получения живого потока с камеры. PWA использует manifest.json и прекрасно работает на Android.

На iOS, однако, приложение также работает, если я открываю ссылку непосредственно в Mobile Safari, но если я добавляю ее на домашний экран, она не определена (поскольку iOS разрешает ее только в контексте Safari).

В качестве обходного пути я хотел бы открыть приложение в Mobile Safari вместо полноэкранного режима, но я не знаю, как это сделать, поскольку оно автоматически открывает полноэкранный режим, как только обнаруживает файл manifest.json.

У кого-нибудь есть идея, как открыть приложение с манифестом в Safari?

Спасибо!

Источник

3 ответа

Я выяснил это, добавив два файла manifest.json, один из которых по умолчанию используется для устройств не ios, а другой - для устройств ios. Я также создаю сценарий Detect.js, чтобы определить, требуется ли устройству ios доступ к pwa и изменить манифест. JSON ссылка на HTML. Есть код:

// 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";
}
Источник

Есть способ открыть PWA, избегая полноэкранного режима. В файле manifest.json измените атрибут отображения на "браузер".

"дисплей": "браузер"

См. Эту документацию в разделе "Дисплей". Вы также можете рассмотреть вариант "минимального пользовательского интерфейса". Пожалуйста, имейте в виду, что когда вы сделаете это изменение, оно будет отражаться не только в iOS, но и в Android.

Что касается фактической проблемы доступа к getUserMeida, я не понимаю, почему он не работает в полноэкранном режиме. Это просто особенность HTML5 и ничего особенного для PWA. Так что в идеале он должен работать и в полноэкранном режиме. Попробуйте зафиксировать любую ошибку при открытии в полноэкранном режиме и опубликуйте ее здесь, если обнаружите. Это также может быть связано с разрешениями, и я рекомендую решить проблему в полноэкранном режиме для лучшего взаимодействия с пользователем.

Источник

Я бы предложил вам установить apple-mobile-web-app-capable в no с этим метатегом в заголовке документа:

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

Это позволит iOS не понимать ваше веб-приложение как PWA.

Источник
Другие вопросы по тегам