API para compartir en la web

Creo que la API Web Share es genial (aquí está nuestra cobertura). En pocas palabras, aprovecha las funciones nativas para compartir en cualquier plataforma en la que se encuentre, si esa plataforma lo admite.

Me gusta esto:

Mucho más que estas cosas:

¿Por qué?

• La API Web Share es solo un par de líneas de código. ¡Fácil! Sin imágenes, sin JavaScript pesado ni iframes, sin posibilidad de quedar desactualizado (tos, Google+).
• La interfaz de usuario que ven los usuarios está personalizada para su plataforma y tal vez incluso la personalizan ellos para tener las cosas que desean en ella.

Buen trabajo, estándares web.

Pero no es compatible en todas partes. Por ejemplo, estoy escribiendo esta publicación de blog en Chrome y no funciona en Chrome de escritorio. ¡Pero funciona en Safari de escritorio!

Entonces, si voy a usarlo, prefiero probar el soporte antes de presionar el botón en una página. Es muy fácil:

if (navigator.share) {}

Aquí hay un ejemplo en el que incluyo buttonun artículo, en caso de que esa API sea compatible:

Ese JavaScript hace un baile un poco elegante para capturar el título y el primer párrafo de la publicación para usarlo en la API. Me gusta cómo lo hace Jeremy Keith a nivel de página:

if (navigator.share) {  navigator.share(    {      title: document.querySelector('title').textContent,      text: document.querySelector('meta[name="description"]').getAttribute('content'),      url: document.querySelector('link[rel="canonical"]').getAttribute('href')    }  );}

También podrías pasar cadenas a esos valores. Esto solo muestra cómo se pueden hacer cosas dinámicamente que funcionan en cualquier página.

Jeremy también ha estado entusiasmado defendiendo una versión opcional de JavaScript de Web Share API, que cree que podría funcionar así:

button type="share"

Y luego, para especificar título y texto:

button type="share" value="title,text"

Eso me parece un poco raro, con la coma. ¿Qué pasa si el título tiene una coma? ¿Y qué hay que especificar la URL? ¿Podríamos dividirlos todos en atributos? Creo que sé lo que diría Jeremy: esta es una versión declarativa simple. Si desea cambiar el comportamiento predeterminado, para eso está JavaScript.

Pero también, ¿debería estar ahí si el navegador no lo admite? Bueno, claro, si lo rellenas con polietileno :

Este polirelleno convierte el botón en una mailto:experiencia si no es compatible. Eso es bastante inteligente. Creo que si estuviera vinculado a la producción, probablemente solo insertaría el botón cuando la función sea realmente compatible.