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.

Syarat untuk menggunakan Web Share API 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.

1
2
3
4
5
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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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, 'Thanks! ๐Ÿ˜', ogShareBtnContent);
    })
    .catch(err => {
      showMessage($shareBtn, 'Failed! ๐Ÿ˜ข', ogShareBtnContent);
      console.log(err);
    })
  } else {
    showMessage($shareBtn, 'Not supported! ๐Ÿ™…๐Ÿปโ€โ™‚๏ธ', ogShareBtnContent);
  }
});

Mengenai dukungan Web Share API di setiap browser silakan cek di caniuse.com.

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const $clipboardBtn = document.querySelector('.clipboardBtn');
const ogClipboardBtnContent = $clipboardBtn.textContent;
$clipboardBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(window.location.href)
  .then(() => {
    showMessage($clipboardBtn, 'Copied! ๐Ÿ˜', ogClipboardBtnContent);
  })
  .catch(err => {
    showMessage($clipboardBtn, 'Failed! ๐Ÿ˜ข', ogClipboardBtnContent);
    console.log(err);
  });
});

Untuk dukungan Clipboard API silakan cek di caniuse.com.

Referensi