web-dev-qa-db-fra.com

IOS la caméra renvoie un écran noir après avoir quitté pwa

J'utilise une entrée de fichier html pour ouvrir l'appareil photo et prendre des photos pour mon PWA.

<input type="file" accept="image/*" capture="camera" name="photo" id="photo-input-js" data-project-id="<?php echo $projectId ?>">

// this element triggers the input 
<li class="menu-item <?php echo $current_page == 'camera' ? 'is-active' : '' ?>" id="camera-tab">
   <a href="<?php echo site_url("photos/openCamera/". $projectId) ?>" id="open-camera-js">
            <div class="icon icon-camera"></div>
    <span class="d-none d-md-block ">Camera</span>
   </a>
</li>

Javascript:

// open camera
$(document).on('click', '#open-camera-js', function(e) {
  e.preventDefault();

  $(".menu-item").removeClass('is-active');
  $("#camera-tab").addClass('is-active');

  // check support for geolocation/ask for permissions
  if (!navigator.geolocation) {
      throw new Error('Unsupproted device');
   }

  // open the file input
  $("#photo-input-js").click();
});

// save image
$(document).on('change', '#photo-input-js', function(e) {
     e.preventDefault();
     let photo = $(this).prop('files')[0] ? $(this).prop('files')[0] : false;
     if (photo) {
        // handle captured photo
     }

Une fois que j'ai téléchargé le pwa sur mon écran d'accueil, la caméra fonctionne parfaitement jusqu'à ce que je quitte l'application et que je revienne sans faire glisser l'application des applications ouvertes.

Si vous appuyez sur le bouton d'accueil et quittez l'application, puis revenez, j'obtiens un écran noir au lieu d'une séquence de caméra comme celle-ci:

Error

Après cela, je dois quitter l'application et faire glisser mon pwa des applications ouvertes et ouvrir à nouveau l'application pour que la caméra fonctionne à nouveau normalement.

L'appareil photo fonctionne correctement sur Android de mon pwa

javascripthtmliosprogressive-web-apps
6
failedCoder

Cela a été causé par un bogue dans iOS 13.2 et 13.3.

Vous pouvez trouver le rapport de bogue ici

Il a été résolu dans iOS 13.4 et versions ultérieures. Je peux personnellement confirmer que je pourrais reproduire ce problème dans 13.3, mais pas après la mise à jour vers 13.5.1

1
Timo

Récemment, j'ai rencontré le même problème, la seule solution que j'ai trouvée était d'ouvrir l'application dans le navigateur au lieu du mode standard. Mais uniquement sur iOS.

L'astuce consistait à créer 2 fichiers manifest.json avec différentes configurations. Le normal et un pour tout est Apple manifest-ios.json.

Étape 1: Ajouter un identifiant à la balise de lien manifeste:

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

Étape 2: Ajout de ce script au bas du corps:

<script>
    let isIOS = /(ipad|iphone|iPod|mac)/g.test(navigator.userAgent.toLowerCase());
    let manifest = document.getElementById("manifest");
    if (isIOS)
      manifest.href = 'manifest-ios.json'
</script>

Étape 3: dans manifest-ios.json définir l'affichage sur navigateur

{
    "name": "APP",
    "short_name": "app",
    "theme_color": "#0F0",
    "display": "browser", // <----
    ...
}

J'espère que cela vous aide les gars!

1
Domotor Zsolt

L'ajout de cette balise meta à index.html, l'a résolu pour moi!

Appareil: iPhone 7 et iPhone X, iOS 13.3.1

<meta name="Apple-mobile-web-app-capable" content="yes">
0
Ehsan Amiri