navigator.share()とはテキスト、URL、ファイルなどのデータを共有できるメソッド。
利用可能な共有対象はデバイスによって異なり、スマートフォンではTwitterの共有も可能となる。
Mac ChromeやFirefoxでは使用不可
2021年9月現在ではMac ChromeやFirefoxではnavigator.share()を使用できない。
そのため、navigator.canShareを使用して処理を条件分岐させる必要がある。
if (navigator.canShare) {
console.log('navigator.share() が使用可能')
} else {
console.log('navigator.share() が使用不可')
}
navigator.share()はtitle, text, url, filesなどのパラメーターを設定できる。
filesには画像ファイルも設定できてTwitterなどに利用できる。
const btn = document.querySelector('button')
const url = 'https://iwb.jp/s/javascript-navigator-share-button/'
const filename = 'sushi.jpg'
if (navigator.canShare) {
const b = document.getElementById('b')
const imgSrc = url + '/' + filename
b.addEventListener('click', () => {
fetch(imgSrc)
.then(res => {
return res.blob()
})
.then(function(blob) {
const file = new File([blob], filename, {type: 'image/jpeg'})
const filesArray = [file]
if(navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
title: '寿司の画像',
text: 'ネタはマグロや白海老など',
url: url,
files: filesArray,
})
}
})
})
} else {
btn.style.display = 'none'
}
