Cara Menggunakan API Kongsi Web

Nampaknya telah dikaburkan sejak Chrome 61 untuk Android pertama melancarkan API perkongsian webnya. Malah, ia menyediakan cara untuk mencetuskan dialog perkongsian asli untuk peranti (desktop jika menggunakan safari) apabila berkongsi kandungan secara langsung dari laman web atau aplikasi web (seperti pautan atau kad kenalan).

Walaupun pengguna sudah dapat berkongsi kandungan dari laman web dengan cara yang asli, mereka mesti mencari pilihan dalam menu penyemak imbas, dan walaupun itu, tidak ada kawalan ke atas kandungan yang dikongsi. Pengenalan API ini membolehkan pemaju menambah keupayaan perkongsian ke aplikasi atau laman web dengan memanfaatkan keupayaan perkongsian kandungan asli pada peranti pengguna.

Kaedah ini mempunyai banyak kelebihan atas kaedah tradisional:

• Pengguna mempunyai pelbagai pilihan perkongsian kandungan yang lebih luas daripada bilangan pilihan terhad yang mungkin anda miliki dalam pelaksanaan DIY anda.
• Dengan membatalkan skrip pihak ketiga dari pelbagai platform sosial, anda boleh mengurangkan masa pemuatan halaman.
• Anda tidak perlu menambah satu siri butang ke laman media sosial dan e -mel yang berbeza. Pilihan perkongsian asli peranti dicetuskan dengan hanya satu butang.
• Pengguna boleh menyesuaikan sasaran bersama pilihan mereka pada peranti mereka tanpa terhad kepada pilihan yang telah ditetapkan.

Arahan sokongan penyemak imbas

Sebelum kita terperinci tentang bagaimana API berfungsi, mari kita selesaikan masalah sokongan penyemak imbas. Sejujurnya, sokongan penyemak imbas tidak sesuai pada masa ini. Ia hanya berfungsi dengan Chrome untuk Android dan Safari (desktop dan iOS).

Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

Desktop

PC mudah alih/tablet

Tetapi jangan digalakkan oleh ini, jangan mengamalkan API ini di laman web anda. Seperti yang anda lihat, melaksanakan sandaran kepada penyemak imbas yang tidak menyokongnya sangat mudah.

Beberapa keperluan untuk menggunakan API

Sebelum anda boleh mengadopsi API ini di projek web anda sendiri, terdapat dua perkara yang perlu diperhatikan:

• Laman web anda mesti disediakan melalui HTTPS. Untuk pembangunan tempatan, API juga berfungsi apabila tapak anda berjalan di localhost.
• Untuk mengelakkan penyalahgunaan, API hanya boleh mencetuskan sebagai tindak balas kepada tindakan pengguna tertentu, seperti peristiwa klik.

Contoh

Untuk menunjukkan cara menggunakan API ini, saya menyediakan demo yang berfungsi pada dasarnya sama seperti laman web saya. Inilah caranya:

Pada masa ini, selepas mengklik butang SHARE, kotak dialog akan muncul menunjukkan beberapa pilihan untuk berkongsi kandungan. Berikut adalah bahagian kod yang membantu kita mencapai ini:

 <code>shareButton.addEventListener('click', event => { shareDialog.classList.add('is-open'); });</code>

Mari kita teruskan untuk menukar contoh ini untuk menggunakan API Perkongsian Web. Perkara pertama yang perlu dilakukan ialah memeriksa sama ada API memang disokong oleh penyemak imbas pengguna, seperti yang ditunjukkan di bawah:

 <code>if (navigator.share) { // 支持Web 共享API } else { // 回退}</code>

Menggunakan API Perkongsian Web adalah semudah memanggil kaedah navigator.share() dan lulus objek yang mengandungi sekurang -kurangnya salah satu bidang berikut:

• url : Rentetan yang mewakili URL untuk dikongsi. Ini biasanya URL dokumen, tetapi tidak semestinya. Anda boleh berkongsi sebarang URL melalui API Perkongsian Web.
• title : Rentetan yang mewakili tajuk untuk dikongsi, biasanya document.title .
• text : Mana -mana teks yang anda mahu sertakan.

Inilah yang kelihatan seperti dalam aplikasi sebenar:

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { // 回退} });</code>

Pada ketika ini, apabila butang SHARE diklik dalam penyemak imbas yang disokong, pemilih asli akan muncul semua sasaran yang mungkin pengguna dapat berkongsi data. Matlamatnya boleh menjadi aplikasi media sosial, e -mel, mesej segera, mesej teks, atau sasaran bersama berdaftar yang lain.

API didasarkan pada janji, jadi anda boleh melampirkan kaedah .then() untuk memaparkan mesej dan penggunaan yang berjaya .catch() untuk mengendalikan ralat. Dalam senario kehidupan sebenar, anda mungkin mahu menggunakan coretan kod berikut untuk mendapatkan tajuk dan URL halaman:

 <code>const title = document.title; const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;</code>

Untuk URL, kami mula -mula menyemak sama ada halaman mempunyai URL kanonik, dan jika ya, gunakan URL itu. Jika tidak, kami mendapat href dari document.location .

Adalah idea yang baik untuk memberikan sandaran

Dalam pelayar yang tidak menyokong API Perkongsian Web, kita perlu menyediakan mekanisme sandaran supaya pengguna pada pelayar ini masih boleh mendapatkan beberapa pilihan perkongsian.

Dalam kes kami, kami mempunyai dialog pop timbul dengan beberapa pilihan untuk berkongsi kandungan, dan butang dalam demo kami sebenarnya tidak dikaitkan dengan mana-mana sahaja, kerana, itu hanya demo. Walau bagaimanapun, jika anda ingin tahu cara membuat pautan anda sendiri untuk berkongsi laman web tanpa skrip pihak ketiga, artikel Adam Coti adalah tempat yang bagus untuk bermula.

Apa yang kita mahu lakukan ialah memaparkan dialog sandaran untuk pengguna pelayar yang tidak menyokong API Perkongsian Web. Ia semudah memindahkan kod yang membuka dialog bersama ke blok else :

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { shareDialog.classList.add('is-open'); } });</code>

Sekarang, tidak kira apa penyemak imbas pengguna, semua pengguna dilindungi. Berikut adalah perbandingan bagaimana butang SHARE berkelakuan pada dua pelayar mudah alih, satu menyokong API Perkongsian Web dan yang lain tidak:

Cubalah! Gunakan pelayar yang menyokong perkongsian web dan pelayar yang tidak disokong. Ia sepatutnya sama dengan demonstrasi di atas.

Meringkaskan

Ini merangkumi hampir semua asas yang perlu anda ketahui mengenai API Perkongsian Web. Dengan melaksanakannya di laman web anda, pelawat dapat lebih mudah berkongsi kandungan anda melalui pelbagai rangkaian sosial, kenalan, dan aplikasi asli yang lain.

Ia juga perlu diperhatikan bahawa jika aplikasi web anda memenuhi kriteria pemasangan aplikasi web progresif dan ditambah ke skrin utama pengguna, anda boleh menambahnya sebagai sasaran bersama. Ini adalah ciri yang boleh anda baca mengenai API Sasaran Saham Web pada pemaju Google.

Walaupun sokongan penyemak imbas bergerigi, kejatuhan mudah dilaksanakan, jadi saya tidak fikir ada sebab lebih banyak laman web tidak mengamalkannya. Jika anda ingin mengetahui lebih lanjut mengenai API ini, anda boleh membaca spesifikasi di sini.

Adakah anda menggunakan API Perkongsian Web? Sila kongsi pengalaman anda dalam komen.

Atas ialah kandungan terperinci Cara Menggunakan API Kongsi Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!