Блог

Главная - Вопросы по программированию - Делитесь файлами с navigator. поделиться в PWA на IOS

Делитесь файлами с navigator. поделиться в PWA на IOS

#ios #share #progressive-web-apps

#iOS #Поделиться #progressive-веб-приложения

Вопрос:

Прилагаемый код отлично работает на Android, даже на старых версиях, и не работает на IOS (протестировано на Safari 13). Если вы попытаетесь поделиться в Whatsapp, на Android он также делится фотографией, на iphone — только текстом. Где я ошибаюсь? Codepen: https://codepen.io/michitkt/pen/YzqBbxo

 <html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
</head><body>
<button disabled="disabled">click me</button>
<div class="result"></div>
<script>

fetch('https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/F-15C_53FS_36FW_Aviano_1993.jpeg/1920px-F-15C_53FS_36FW_Aviano_1993.jpeg')
    .then(function(response) {
        console.log("response",response);
        response.blob().then(function(myBlob) {
            console.log("blob",myBlob);
            var file = new File([myBlob], "test.jpg", {type: 'image/jpeg'});
            //alert("file: " file.name ", size " file.size);
            productFilesArray = [file];
            console.log("array file",productFilesArray);
            btn.removeAttribute("disabled");
        });
    });

const btn = document.querySelector('button');
const result = document.querySelector('.result');

btn.addEventListener('click', async () => {
    if (navigator.share) {
        try {
            await navigator.share({
                title: 'Sharing',
                text: 'Learn web development on MDN!',
                url: 'https://developer.mozilla.org',
                files: productFilesArray
            })
            result.textContent = 'Starting sharing';
        } catch(err) {
            result.textContent = 'Error: '   err;
        }
    } else {
        result.textContent = 'You can't share';
    }
});
</script>
</body>
</html>

Комментарии:

1. Я не уверен, но я думаю, что в этом примере используется api web share 2-го уровня, который поддерживает только chrome 75 .

Ответ №1:

Ошибки могут быть у всех!

Ваш код в порядке. Просто удалите все, кроме {files: …} . Затем БУМ!

Ниже приведен фрагмент кода для вас.

 if (navigator.share) {
    try {
        await navigator.share({
            files: productFilesArray
        })
        result.textContent = 'Starting sharing';
    } catch(err) {
        result.textContent = 'Error: '   err;
    }
} else {
    result.textContent = 'You can't share';
}

Комментарии:

1. Мне нужно добавить ссылку на файл, я не могу удалить ее из кода

2. Понятно, недавно я обнаружил эту ошибку / проблему, затем провел некоторый эксперимент и получил решение для своего онлайн-сервиса. Возможно, вы можете попробовать еще немного поэкспериментировать, если сможете найти какой-либо обходной путь, чтобы включить ссылку для вас. Моя теория заключается в том, что WhatsApp только за исключением одного (1) / одного элемента из внешних источников. Нравится способ wa.me/?text=blahblah работает. Вот почему, если вы включаете только файлы, он принимает их из внешнего источника.

Ответ №2:

 // is file share supported
if (navigator.canShare amp;amp; navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

С начала 2021 года использование API для обмена заголовками, текстом и URL-адресами поддерживается:

  • Safari 12 или более поздней версии на macOS и iOS.
  • Chrome 75 или более поздней версии на Android и 89 или более поздней версии на Chrome OS и Windows.

Использование API для обмена файлами поддерживается:

  • Safari 15 или более поздней версии на macOS и iOS.
  • Chrome 75 или более поздней версии на Android и 89 или более поздней версии на Chrome OS и Windows. (Большинство браузеров на базе Chromium, таких как Edge, поддерживают эту функцию так же, как и соответствующая версия Chrome.)

Комментарии:

1. Да, но проблема с совместным использованием файлов с текстом и URL-адресом. Теперь это работает?

2. Ваша проблема очень ясна, невозможно использовать эту функцию в Safari 13. Я поделился тем, как обнаружить и справиться с этой ситуацией. Совместное использование файлов с текстом и URL-адресом невозможно в IOS 15 (15-10-2021). Ответ Шарифа верен, если вы хотите использовать эту функцию в Safari 15. Однако вы можете обмениваться только файлами (без текста / плитки / url). Короче говоря: вы ничего не можете сделать, пока Apple не исправит эту ситуацию.