Web API untuk Membagikan Konten Web

Intro

Apa yang dibutuhkan pengguna untuk membagikan konten web dari browser ke media lain?

Sebuah tautan. Atau bisa juga ditambahkan judul konten web namun ini sifatnya opsional.

Membagikan Konten Web di Mobile dan Desktop

Jika pengguna membagikan konten web di mobile (studi kasus Android), umumnya ada dua cara:

  1. Blok dan salin tautan web yang ingin dibagikan di address bar browser dan tempel ke media lain seperti Google Keep.
  2. Tekan tombol ikon tiga titik vertikal lalu klik bagikan dan pilih mau ke media mana yang ingin dibagikan seperti Google Keep.

Jika pengguna membagikan konten web di desktop (studi kasus macOS), ada 3 cara:

  1. Safari: klik tombol ikon bagikan di sisi kanan atas.
  2. Firefox: klik tombol ikon tiga titik horizontal di sebelah kanan address bar kemudian bisa pilih opsi salin tautan atau bagikan.
  3. Chrome: blok dan salin tautan web yang ingin dibagikan di address bar browser dan tempel ke media lain seperti Telegram atau WhatsApp.

Meskipun cara-cara tersebut sudah tersedia, browser menyediakan web share API sebagai alternatif tambahan bagi pengembang untuk membantu pengguna membagikan konten web.

Web Share API dan Clipboard API

Web Share API memiliki kemampuan untuk membagikan tautan, teks dan file ke aplikasi lain yang terinstal di perangkat pengguna dengan cara yang sama seperti aplikasi native.

API ini memiliki kapabilitas dan batasan sebagai berikut:

  1. Hanya bisa digunakan pada situs yang menggunakan protokol HTTPS atau dengan domain localhost.
  2. Hanya bisa dipanggil melalui aksi yang dilakukan oleh pengguna seperti klik dan tidak bisa dipanggil melalui onload handler.
  3. Bisa membagikan tautan, teks dan file.
  4. API ini hanya bisa digunakan pada Safari desktop (mulai versi 12.1), Safari iOS (mulai versi 12.2), dan browser berbasis Chromium di Android. Silakan lihat dukungan Web Share API di tabel kompatibilitas browser MDN.

Untuk membagikan tautan, teks dan file, gunakan share() method yang mana berbasis promise dengan properti objek yang diwajibkan. Minimal objek harus berisi satu dari properti berikut: title, text, url, atau files.

Berikut sintaks untuk menggunakan Web Share API untuk berbagi judul dan tautan.

document.querySelector('button').addEventListener('click', (e) => {
    if (navigator.share) {
        navigator.share({
            title: 'Web API untuk Membagikan Konten Web',
            url: 'https://satyakresna.io/posts/web-api-untuk-membagikan-konten-web/'
        })
            .then(() => console.log('Tautan berhasil dibagikan'))
            .catch((error) => console.log('Tautan gagal dibagikan', error));
    }
});

Penjelasan sebelumnya mengatakan bahwa Web Share API hanya bisa digunakan pada beberapa browser. Untuk menanggulangi hal tersebut, kita bisa menggunakan Clipboard API. Clipboard API didukung oleh browser Firefox, Chrome dan Safari berdasarkan tabel kompatibilitas browser MDN.

Clipboard API menyediakan kemampuan untuk menanggapi perintah clipboard (cut, copy, paste) secara asinkronus mulai dari membaca dan menulis ke sistem clipboard.

Clipboard API memiliki kapabilitas dan batasan sebagai berikut:

  1. Bisa digunakan pada situs yang menggunakan protokol HTTPS atau dengan domain localhost.
  2. Hanya bisa membagikan teks dan gambar format PNG berdasarkan situs web.dev.

Untuk menyalin judul dan tautan konten web, gunakan method writeText() yang disediakan oleh Clipboard API

document.querySelector('button').addEventListener('click', (e) => {
    navigator.clipboard.writeText(`Web API untuk Membagikan Konten Web: https://satyakresna.io/posts/web-api-untuk-membagikan-konten-web/`)
        .then(() => console.log('Tautan berhasil disalin'))
        .catch(error => console.log('Tautan gagal disalin', error));
});

Jadi, ketika Web Share API tidak didukung oleh salah satu browser maka kita bisa gunakan Clipboard API.

document.querySelector('button').addEventListener('click', (e) => {
    if (navigator.share) {
        // Gunakan Web Share API
    } else {
        // Gunakan Clipboard API
    }
});

Kita bisa gunakan plugin notyf sebagai pengganti console.log agar pengguna tahu apakah konten web berhasil atau gagal dibagikan.

Jika konten ini bermanfaat, silakan: