Web Share API dan Clipboard API

Pada tulisan ini, saya mencoba mengimplementasikan Web Share API dan Clipboard API.

Web Share API

Web Share API merupakan API yang memberikan kemudahan bagi pengembang web mengimplementasikan fungsi berbagi pada aplikasi web yang dibuat tapi dengan bantuan langsung dari perangkat asli dibandingkan harus membuat script untuk membagikan ke beragam platform media sosial.

Untuk menggunakan API ini terdapat prasyarat antara lain:

  1. Aplikasi web harus HTTPS agar API ini bekerja, jika dalam mode pengembang maka bisa dalam localhost.
  2. navigator.share harus dipanggil melalui aksi pengguna seperti mengklik tombol. Hal ini berguna untuk mencegah penyalahgunaan.

Jika ingin mendeteksi apakah browser mendukung Web Share API, Anda dapat menjalankan script di bawah ini.

if (navigator.share) {
  // Bisa pakai Web Share API
} else {
  // Sediakan sebuah pesan bahwa Web Share API tidak didukung.
}

Cara mengimplementasikannya adalah menyediakan tombol untuk membagikan artikel saya dengan script di bawah ini.

const $shareBtn = document.querySelector('.shareBtn');
const ogShareBtnContent = $shareBtn.textContent;
const title = document.querySelector('h1').textContent;
const url = document.querySelector('link[rel=canonical]') && document.querySelector('link[rel=canonical]').href || window.location.href;
$shareBtn.addEventListener('click', () => {
  if (navigator.share) {
    navigator.share({
      title,
      url
    })
    .then(() => {
      showMessage($shareBtn, 'Trims! ๐Ÿ˜', ogShareBtnContent);
    })
    .catch(err => {
      showMessage($shareBtn, 'Gagal dibagikan! ๐Ÿ˜ข', ogShareBtnContent);
      console.log(err);
    })
  } else {
    showMessage($shareBtn, 'Tidak didukung ๐Ÿ™…๐Ÿปโ€โ™‚๏ธ', ogShareBtnContent);
  }
});

Hanya saja Web Share API ini hanya bekerja pada web di perangkat mobile antara lain:

  1. Safari mulai versi 12.1 (sumber: caniuse.com) Demo
  2. iOS Safari mulai versi 12.2 (sumber: caniuse.com) Demo
  3. Chrome for Android mulai versi 74 (sumber: caniuse.com) Demo
  4. Brave browser for Android (sumber: saya coba sendiri). Demo

Informasi tersebut saya dapatkan dari caniuse.com.

Saya mendapatkan referensi ini dari Aligator - Web Share API. Silahkan dicoba.

Clipboard API

Cara de facto untuk menyalin text ke clipboard pada web menggunakan document.execCommand, tetapi tantangan utamanya adalah operasi tersebut bersifat sinkronus dan blocking. Async clipboard merupakan API berbasis promise yang bertujuan untuk membereskan hal tersebut dan juga memberikan dalam bentuk yang lebih sederhana. API ini juga mendukung dengan beragam format selain text/plain.

Cara mengimplementasikannya adalah menyediakan sebuah tombol untuk menyalin URL artikel website pribadi dengan script di bawah ini.

const $clipboardBtn = document.querySelector('.clipboardBtn');
const ogClipboardBtnContent = $clipboardBtn.textContent;
$clipboardBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(window.location.href)
  .then(() => {
    showMessage($clipboardBtn, 'Berhasil disalin! ๐Ÿ˜', ogClipboardBtnContent);
  })
  .catch(err => {
    showMessage($clipboardBtn, 'Gagal disalin! ๐Ÿ˜ข', ogClipboardBtnContent);
    console.log(err);
  });
});

Sejauh yang saya coba API ini bisa digunakan pada Chrome, Firefox, dan Brave Browser. Untuk Safari via browser, saya mengalami error seperti gambar di bawah.

Error clipboard API on Safari web browser.

Kemungkinan besar Safari via browser tidak mendukung Clipboard API untuk hal ini. Mungkin ada yang berkenan mau mencoba via iOS. ๐Ÿ˜

Saya mendapatkan referensi ini dari Aligator - Clipboard API. Silahkan dicoba.