Conoce WebKit para SwiftUI

WebKit, el motor de navegador que impulsa Safari y muchas apps de Apple, ahora tiene una API SwiftUI. Esta nueva API simplifica la integración de contenido web en apps SwiftUI en iOS, iPadOS, visionOS y macOS, lo que te permite combinar experiencias web con la facilidad de uso de SwiftUI y personalizar las interacciones de contenido web.

Una app SwiftUI que permite buscar información sobre lagos de todo el mundo demuestra el funcionamiento de esta nueva API. La app utiliza la nueva API WebView, una vista SwiftUI diseñada para mostrar contenido web sin esfuerzo. Con solo una URL, WebView puede cargar y mostrar páginas web automáticamente y puedes actualizarlo fácilmente para mostrar contenido diferente según las interacciones de alguien, como alternar entre URL. WebPage es una clase Observable que representa contenido web y te permite cargar, controlar y comunicarte. Permite cargar URL remotas, contenido HTML directamente y varios tipos de datos, lo que proporciona flexibilidad en la presentación del contenido web dentro de la app. En la app de ejemplo, una clase 'ArticleViewModel' administra los datos de cada artículo, incluida la WebPage asociada. Esto permite que SwiftUI reaccione fácilmente a los cambios en el contenido de la página y del artículo. Luego se configura la interfaz de la app, con un WebView que muestra el contenido cargado desde 'ArticleViewModel'. Para ofrecer una experiencia de usuario fluida, la app incluye artículos precargados. El nuevo protocolo 'URLSchemeHandler' maneja URL personalizadas dentro de la app. Esto permite que la app cargue contenido incluido directamente dentro de ella, como recursos HTML y CSS, en lugar de buscar todo de la web. Al implementar un controlador de esquema personalizado, la app de ejemplo puede administrar y mostrar de manera eficiente información del lago previamente ingresada, lo que brinda un punto de partida inmediato.

La nueva propiedad Observable 'currentNavigationEvent' en WebPage simplifica el monitoreo de la navegación en el contenido web. Ahora puedes observar fácilmente eventos de navegación, como inicios de páginas, redirecciones, confirmaciones de contenido, finalizaciones y fallas, al utilizar la API Observations. Esto permite actualizaciones en tiempo real, como completar una barra lateral con la tabla de contenidos una vez que se carga la página. Además de los eventos de navegación, WebPage ofrece propiedades observables como el título, la URL y el progreso de carga, las cuales se integran perfectamente con SwiftUI. Para tareas más complejas, la API 'callJavaScript' permite la comunicación directa con el HTML de la página. También puedes personalizar las políticas de navegación con el protocolo 'WebPage.NavigationDeciding' y determinar cómo se maneja la navegación, como la apertura de enlaces externos en el navegador predeterminado.

WebKit para SwiftUI te permite integrar sin problemas contenido web en apps y personalizar la apariencia. Utiliza varios modificadores de vista para adaptar la experiencia del usuario. Por ejemplo, puedes configurar el modificador 'scrollBounceBehavior' para deshabilitar el rebote horizontal a menos que el contenido exceda el tamaño de la vista. 'look to scroll' es nuevo en visionOS. Puedes habilitarlo usando el modificador 'webViewScrollInputBehavior', el cual permite desplazarse mirando el contenido. Puedes agregar fácilmente compatibilidad con Find-In-Page al utilizar el modificador 'findNavigator' y colocar un botón en la barra de herramientas para mostrar el navegador de búsqueda. Para mejorar la accesibilidad y la navegación, sincroniza la posición de desplazamiento de WebView con una sección seleccionada en una barra lateral. Haz esto al utilizar funciones de JavaScript para determinar la posición de la sección y luego al asociar la posición con WebView con el modificador 'webViewScrollPosition'. El modificador 'onScrollGeometryChange' mantiene la barra lateral actualizada mientras alguien se desplaza. WebKit para SwiftUI proporciona una API simple pero poderosa para crear una excelente experiencia de usuario en todas las plataformas. Migra a esta nueva API y comparte tus comentarios.