Durante muchos años, integrar contenido web dentro de una app SwiftUI implicaba usar WKWebView a través de UIViewRepresentable o NSViewRepresentable. Aunque potente, esa solución era compleja, verbosa y poco alineada con la filosofía declarativa de SwiftUI.
Con iOS 26 y macOS 26, Apple ha introducido una nueva vista nativa llamada WebView, que permite mostrar páginas web, HTML y contenido interactivo directamente dentro de una vista SwiftUI, de forma sencilla, declarativa y multiplataforma.
En este tutorial aprenderás cómo usar WebView para:
- Cargar páginas web
- Mostrar HTML local
- Interceptar enlaces
- Mostrar indicadores de carga
- Integrar navegación web en apps SwiftUI modernas
Todo ello usando Xcode y SwiftUI, sin wrappers ni puentes con UIKit o AppKit.
1. ¿Qué es WebView en SwiftUI?
WebView es una vista introducida en SwiftUI para iOS 26, macOS 26 y visionOS 3 que encapsula el motor WebKit en una API completamente declarativa.
Esto significa que ahora puedes hacer algo tan simple como:
WebView(url: URL(string: "https://www.apple.com")!)y obtener un navegador web completamente funcional dentro de tu app.
Está diseñado para integrarse con:
- Navegación SwiftUI (
NavigationStack) - Estado reactivo (
@State,@Observable) - Seguridad y privacidad
- Sandbox de la app
2. Crear el proyecto en Xcode
Vamos a empezar desde cero.
- Abre Xcode 18 o superior
- Selecciona File → New → Project
- Elige iOS App
- Configura:
- Product Name:
SwiftUIWebViewDemo - Interface:
SwiftUI - Language:
Swift - Minimum OS: iOS 26
- Product Name:
Pulsa Create.
3. Importar WebKitUI
En iOS 26 y macOS 26, WebView forma parte de un nuevo módulo:
import SwiftUI
import WebKitUIAbre ContentView.swift y añade ese import.
4. Mostrar una página web básica
Vamos a crear el primer ejemplo: mostrar una web.
struct ContentView: View {
var body: some View {
WebView(url: URL(string: "https://developer.apple.com")!)
.ignoresSafeArea()
}
}Ejecuta la app.
Verás que la página de Apple Developer se muestra dentro de tu app, con scroll, enlaces, vídeos y JavaScript funcionando.
Esto es un gran salto respecto a versiones anteriores.
5. Usando NavigationStack con WebView
Vamos a integrarlo en una navegación SwiftUI real.
struct ContentView: View {
var body: some View {
NavigationStack {
WebView(url: URL(string: "https://www.swift.org")!)
.navigationTitle("Swift")
.navigationBarTitleDisplayMode(.inline)
}
}
}Ahora WebView se comporta como cualquier otra vista SwiftUI.
6. Cargando contenido dinámico
Normalmente no quieres una URL fija. Vamos a usar estado:
struct ContentView: View {
@State private var url = URL(string: "https://www.apple.com")!
var body: some View {
VStack {
WebView(url: url)
Button("Go to Swift") {
url = URL(string: "https://www.swift.org")!
}
}
}
}Cuando cambias la URL, WebView se actualiza automáticamente.
Esto es SwiftUI en estado puro.
7. Mostrar HTML local
También puedes mostrar contenido HTML generado por tu app.
let html = """
<html>
<head>
<style>
body { font-family: -apple-system; padding: 40px; }
h1 { color: blue; }
</style>
</head>
<body>
<h1>Hello SwiftUI WebView</h1>
<p>This is local HTML content.</p>
</body>
</html>
"""Y luego:
WebView(html: html)Esto es perfecto para:
- Documentación
- Términos y condiciones
- Artículos offline
- Contenido generado por IA
8. Indicador de carga
WebView expone un binding de progreso:
struct ContentView: View {
@State private var progress = 0.0
var body: some View {
VStack {
ProgressView(value: progress)
WebView(
url: URL(string: "https://www.apple.com")!,
progress: $progress
)
}
}
}Esto permite mostrar una barra de carga nativa.
9. Interceptar enlaces
Puedes decidir qué pasa cuando el usuario toca un enlace.
WebView(
url: URL(string: "https://www.apple.com")!,
onNavigate: { request in
if request.url?.host == "youtube.com" {
return .cancel
}
return .allow
}
)Esto es muy útil para:
- Evitar salir de tu app
- Abrir ciertos enlaces en Safari
- Implementar deep links
10. Comunicación JavaScript ↔ SwiftUI
Una de las mejores funciones de WebView es el puente nativo con JavaScript.
WebView(
html: html,
messageHandler: { message in
print("JS sent:", message)
}
)Desde JavaScript:
window.swiftui.postMessage("Hello from JS");Esto permite crear apps híbridas muy potentes.
11. Modo lector, privacidad y sandbox
WebView hereda todas las protecciones de WebKit:
- Bloqueo de trackers
- Cookies por app
- Aislamiento de procesos
- Permisos de cámara y micrófono
También puedes activar modo lector:
WebView(url: url, readerMode: .enabled)12. Usando WebView en macOS 26
La misma API funciona en macOS:
WebView(url: URL(string: "https://www.apple.com")!)
.frame(minWidth: 800, minHeight: 600)Esto hace que sea trivial crear apps multiplataforma que integran web.
13. Crear un navegador miniatura
Vamos a hacer un mini navegador:
struct BrowserView: View {
@State private var urlString = "https://www.apple.com"
var body: some View {
VStack {
TextField("URL", text: $urlString)
.textFieldStyle(.roundedBorder)
.padding()
if let url = URL(string: urlString) {
WebView(url: url)
}
}
}
}Tienes un navegador funcional en menos de 30 líneas.
14. Casos de uso reales
WebView es perfecto para:
- Mostrar documentación
- Tiendas online
- Blogs
- Paneles de administración
- Apps híbridas
- Login OAuth
- Chatbots
15. Mejores prácticas
- Usa HTTPS siempre
- Valida URLs antes de cargarlas
- Usa
onNavigatepara seguridad - Evita cargar contenido no confiable
- No recrees el WebView innecesariamente
16. Comparación con WKWebView
| Antes (WKWebView) | Ahora (WebView) |
|---|---|
| UIViewRepresentable | Nativo SwiftUI |
| Delegados | Closures |
| Código largo | Declarativo |
| Solo UIKit | iOS + macOS |
Conclusión
La introducción de WebView en iOS 26 y macOS 26 marca un antes y un después para el desarrollo SwiftUI. Por primera vez, Apple ofrece una forma limpia, moderna y declarativa de integrar la web en aplicaciones nativas.
Ahora puedes combinar:
- UI nativa SwiftUI
- Contenido web dinámico
- JavaScript
- Seguridad de WebKit
Todo con muy poco código.
Si sabes usar SwiftUI y HTML, ahora puedes crear apps híbridas profesionales con una experiencia de usuario totalmente nativa.
Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte🙂.Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram
