Saltar al contenido →

LinkPresentation Framework

Repasando la lista de nuevos frameworks añadidos el día de la Keynote de la WWDC me encontré con uno llamado LinkPresentation.

Si entraís a día de hoy no tiene descripción ninguna, sólo un enlace a la estructura y a las 3 clases que forman el framework.

Pero por el nombre ya tenía una idea de más o menos lo que hacía, y no es otra cosa que una tarjeta detallada de un sitio web a partir de los datos que obtiene de la cabecera la página. Y no sólo de los campos title o description, si no que me parece que busca y usa las cabecera definidas por el Open Graph protocol.

Os adelanto que lo mejor es cuando usas una página que contiene vídeo.

¿Y cómo se hace?

Cuando antes os he dicho que el framework LinPresentation no tiene documentación no era a modo de crítica, todo lo contrario, los ingenieros del proyectos han ocultado todas los complicaciones que tiene recopilar todo la información de un website, han simplificado el número de clases al mínimo necesario así como sus funciones de tal manera que con sólo un vistazo sabes como funciona.

Vamos, lo que viene siendo un API bien diseñada.

Lo primero que necesitamos es recuperar los metadatos del sitio web, la cabeceras, y para ello usaremos la clase LPMetadataProvider.

Lo que nos importa de esta clase es la función startFetchingMetadata(for:completionHandler:) a la que le pasamos la URL de la queremos generar la tarjeta y nos devuelve en un closure los metadatos, dentro de una clase LPLinkMetadata y un error si se hubiera producido alguno.

Si todo ha ido bien el closure contendrá un LPLinkMetadata válido con el que podremos contruir la vista (recordemos que podemos crear una UIView o una NSView)

A la clases LPMetadataProvider también se le puede pedir que recupere información de subrecursos mediante la propiedad shouldFetchSubresources

Para crear la vista sólo tenemos que pasar los metadatos en el inicializador de la clase LPLinkView y al añadir la a nuestra jerarquía de vistas tendremos algo como esto.

La parte superior se corresponde con el campo og:image y debajo el nombre de la web y su dirección. Si pulsamos sobre la tarjeta se abrirá Safari apuntando a dicha página.

Pero si hemos pedido los datos de una página que contiene un vídeo lo que tendremos será el vídeo empotrado y totalmente funcional.

En este caso podemos reproducir el vídeo directamente dentro de la tarjeta, anular o activar el sonido y verlo a pantalla completa.

Código fuente

En este repositio de GitHub encontraréis el Playground con el código que acompaña al artículo.

Enlaces de interés

Publicado en iOS macOS