mobile-support.md

iOS WKWebView Link Açma Sorunu ve Çözüm Adımları

Sorun

ChatAI web widget'ımız içerisindeki sohbet akışında yer alan dış bağlantıların (fatura listesi, harita lokasyonu vb.) Web ve Android ortamlarında sorunsuz açılmasına rağmen, iOS uygulamasındaki WKWebView içerisinde tıklamalara tepki vermemesi (sayfanın açılmaması) sorunu yaşanmıştır.

Neler Denedik ve Neden Olmadı?

Web tarafında (widget içerisinde) HTML ve CSS üzerinden çeşitli standart çözümler denenmiştir:

1. <a> etiketi ve target="_blank" kullanımı: - Neden Olmadı? iOS WKWebView güvenlik politikaları gereği, native tarafta özel bir izin (UIDelegate) yazılmadığı sürece yeni sekme/pencere açma isteklerini engelledi.
2. target="_top" ve Native Yönlendirme Denemesi:
   • Neden Olmadı? Linkin aynı frame içerisinde açılması zorlansa da, uygulamanın dışına yapılan yönlendirmeler WebView'in NavigationDelegate kurallarına takılarak iptal edildi.

Sonuç: Sorunun HTML/JS tabanlı bir tıklama problemi değil, tamamen native iOS (WKWebView) güvenlik kısıtlamalarından kaynaklandığı tespit edilmiştir.

Uygulanan Çözüm: JS-to-Native Bridge

WebView'in dış bağlantı kısıtlamalarıyla mücadele etmek yerine, sektör standardı olan "JavaScript-to-Native Bridge" mimarisine geçiş yapılmıştır.

Web widget, linki kendi açmaya çalışmak yerine iOS uygulamasına bir event fırlatacaktır. iOS tarafı da bu mesajı dinleyip URL'yi native tarayıcıda açacaktır.

1. Web Tarafında Yapılanlar (Tamamlandı)

Widget içerisindeki tüm dış bağlantı butonlarının (list-item-button, location, home, conversation vb.) tıklama olayları güncellenmiştir. Aşağıdaki mantık tüm sisteme entegre edilmiştir:

// Web tarafında çalışan örnek mantık:
const url = "https://...";

if (window['webkit'] && window['webkit'].messageHandlers && window['webkit'].messageHandlers.openExternalLink) {
    // Eğer iOS WKWebView içerisindeysek, linki native tarafa fırlat:
    window['webkit'].messageHandlers.openExternalLink.postMessage({ url: url });
} else {
    // Normal Web veya Android ise eski sistem çalışmaya devam etsin:
    window.open(url, '_blank');
}

2. iOS Tarafında Yapılması Gerekenler (Aksiyon Bekleniyor)

Swift tarafında openExternalLink ismindeki bu kanalı dinleyen bir handler eklenmesi gerekmektedir.

Adım 1: WebView konfigürasyonuna handler eklenmesi

let contentController = WKUserContentController()
contentController.add(self, name: "openExternalLink")

let config = WKWebViewConfiguration()
config.userContentController = contentController

// WKWebView'i bu config ile başlatın...

Adım 2: Mesajı yakalayıp Safari'de açacak delegate metodunun yazılması

extension SizinViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
        // Gelen mesaj bizim bridge üzerinden mi fırlatıldı?
        if message.name == "openExternalLink" {
            
            // JSON içerisindeki 'url' parametresini al ve native olarak aç
            if let body = message.body as? [String: Any],
               let urlString = body["url"] as? String,
               let url = URL(string: urlString) {
                
                UIApplication.shared.open(url, options: [:], completionHandler: nil)
            }
        }
    }
}

Bu ekleme yapıldıktan sonra ChatAI widget'ı içerisindeki tüm fatura, harita ve yönlendirme linkleri iOS cihazlarda native Safari üzerinden sorunsuz şekilde açılacaktır.