En la API de Web Share | Programar Plus

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

Me gusta esto:

API Web Share activada en iOS

Mucho más que estas cosas:

Esto es solo una imagen, no intente hacer clic en ellos. Hiciste clic en ellos, ¿no?

¿Por qué?

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

Buen trabajo, estándares web.

Pero no se admite en todas partes. Por ejemplo, estoy escribiendo esta publicación de blog en Chrome y no funciona en el escritorio de Chrome. ¡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 coloco un <button> en un artículo, si esa API es compatible:

Ese JavaScript hace un baile elegante para tomar el título y el primer párrafo de la publicación para usar 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ía pasar cadenas a esos valores. Esto es solo mostrar cómo puede hacer cosas dinámicamente que funcionen en cualquier página.

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

<button type="share">

Y luego, para especificar el título y el 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 de 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 es JavaScript.

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

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

(Visited 5 times, 1 visits today)