WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView

2025/06/26
Ebisu.mobile #10 〜WWDC & Google I/O スペシャル！〜

Transcript

1. Ebisu.mobile #10 ʙWWDC & Google I/O εϖγϟϧʂʙ WebViewͷݱࡏ஍ - SwiftUI࣌୅ͷWebKit - STORESגࣜձࣾ ϞόΠϧ։ൃຊ෦ Ϛωʔδϟʔ/iOSΤϯδχΞ ௕୩઒ ক࢘ʢ@marcy731ʣ
2. ࣗݾ঺հ Masashi Hasegawa / ௕୩઒ ক࢘ ςΫϊϩδʔ෦໳ / ϞόΠϧ։ൃຊ෦ • 2022೥4݄ STORESʢچ heyʣגࣜձࣾ ʹೖࣾ ◦ STORES Ϩδ / STORES ϒϥϯυΞϓϦ ▪ Ϛωʔδϟʔ / iOSΤϯδχΞ @marcy731
3. ͱ͏ͱ͏4XJGU6*ʹ
   ωΠςΟϒͳ8FC7JFX͕ొ৔͠·ͨ͠🎉
4. 🎉
   ׻ت
   🎉
5. ͜Ε·Ͱ4XJGU6*Ͱ8FC7JFXΛ࢖͏ʹ͸
   6*7JFX3FQSFTFOUBCMF
   Ͱ
   8,8FC7JFX
   Λϥοϓ͢Δඞཁ͕ʜ
6. import WebKit struct WebView: UIViewRepresentable { func makeUIView(...) -> WKWebView { ... } ... }
7. import WebKit struct WebView: UIViewRepresentable { func makeUIView(...) -> WKWebView { ... } ... } • NavigationDelegate ͷ࣮૷͕Viewͱ཭ΕͨΓ😣 • ঢ়ଶ؅ཧʹ೰·͞ΕͨΓ😩 • ਖ਼௚SwiftUIͱͷ૬ੑ͸ඍົ😢
8. • ֤࣮ࣾ૷Λ޻෉͍ͯ͠Δ • cybozu/WebUI • proxy Λհͯ͠ૢ࡞͢Δ ScrollView Style • kylehickinson/SwiftUI-WebView (Brave) • WebViewStore ʹ WKWebView Λอ࣋͠ɺঢ়ଶ؅ཧ • https://github.com/cybozu/WebUI • https://github.com/kylehickinson/SwiftUI-WebView
9. ͨͩɺ࣌୅͸มΘͬͨ
10. 8FC7JFX
    GPS
    4XJGU6*
11. import WebKit struct ContentView: View { var body: some View { } }
12. import WebKit struct ContentView: View { var body: some View { WebView( url: URL(string: "https://www.st.inc/") ) } }
13. 🎉
    ྑ͍ʙ
    🎉
14. SwiftUI WebView ͷಛ௃Λ঺հ
15. WebPage
16. WebPage 16 import WebKit struct ContentView: View { var body: some View { WebView( url: URL(string: "https://www.st.inc/") ) } }
17. WebPage 17 import WebKit struct ContentView: View { @State private var page = WebPage() var body: some View { WebView(page) } }
18. WebPage 18 import WebKit struct ContentView: View { @State private var page = WebPage() var body: some View { WebView(page) .onAppear { page.load(URLRequest( url: URL(string: "https://www.st.inc")!) )) } } }
19. WebPage 19 import WebKit struct ContentView: View { @State private var page = WebPage() var body: some View { WebView(page) } } • SwiftUI ༻ʹઃܭ͞Εͨ Web ίϯςϯπͷঢ়ଶ؅ཧΫϥε • ಺෦ʹ WKWebView Λอ࣋ • → جຊతʹ͸ WKWebView ͰͰ͖Δ͜ͱ͸શ෦Ͱ͖Δ • λΠτϧɾURLɾಡΈࠐΈਐḿͳͲΛ Observable ʹఏڙ • JavaScript ࣮ߦ΍φϏήʔγϣϯ੍ޚͳͲɺDelegate ॲཧΛ Swifty ʹ౷߹
20. WebPage 20 SwiftUI.View WebView WebPage ʢObservableʣ WKWebView ʢbackingWebViewʣ • WebPage͕ঢ়ଶͱφϏήʔγϣϯͷϋϒ • Delegate؅ཧ΋಺෦Ͱ׬݁
21. ঢ়ଶΛ؍࡯͢Δ
22. ঢ়ଶΛ؍࡯͢Δ 22 import WebKit struct ContentView: View { @State private var page = WebPage() var body: some View { WebView(page) } }
23. ঢ়ଶΛ؍࡯͢Δ 23 import WebKit struct ContentView: View { @State private var page = WebPage() var body: some View { WebView(page) } } extension WebPage : Observable {}
24. ঢ়ଶΛ؍࡯͢Δ 24 import WebKit struct ContentView: View { @State private var page = WebPage() var body: some View { WebView(page) .navigationTitle(page.title) } } extension WebPage : Observable {}
25. ঢ়ଶΛ؍࡯͢Δ 25 ϓϩύςΟ໊ ܕ આ໌ url URL? ݱࡏදࣔதͷϖʔδͷ URL title String ݱࡏදࣔதͷϖʔδͷλΠτϧʢnil ʹͳΒͳ͍ʣ estimatedProgress Double ϖʔδಡΈࠐΈਐḿʢ0.0ʙ1.0ʣ isLoading Bool ϖʔδ͕ಡΈࠐΈத͔Ͳ͏͔ serverTrust SecTrust? TLS ূ໌ॻͷݕূ৘ใʢηΩϡϦςΟؔ࿈ʣ hasOnlySecureContent Bool ಡΈࠐΜͩશϦιʔε͕ HTTPS ͳͲͷ҆શͳ௨৴͔ isWritingToolsActive Bool Writing ToolsʢࣗಈೖྗͳͲʣ͕༗ޮ͔ isBlockedByScreenTime Bool εΫϦʔϯλΠϜʹΑ੍ͬͯݶ͞Ε͍ͯΔ͔ʢvisionOSͰ͸ແޮʣ fullscreenState WebPage.FullscreenState ϑϧεΫϦʔϯঢ়ଶʢinFullscreen ͳͲʣ cameraCaptureState WKMediaCaptureState Χϝϥར༻த͔Ͳ͏͔ microphoneCaptureState WKMediaCaptureState ϚΠΫར༻த͔Ͳ͏͔ • WebPageͰ؂ࢹͰ͖Δ • جຊతʹ͸WKWebViewͱಉ౳
26. φϏήʔγϣϯΛ؅ཧ͢Δ
27. φϏήʔγϣϯΛ؅ཧ͢Δ 27 var currentNavigationEvent: WebPage.NavigationEvent? { get }
28. φϏήʔγϣϯΛ؅ཧ͢Δ 28 .startedProvisionalNavigation var currentNavigationEvent: WebPage.NavigationEvent? { get }
29. φϏήʔγϣϯΛ؅ཧ͢Δ 29 .startedProvisionalNavigation .committed var currentNavigationEvent: WebPage.NavigationEvent? { get }
30. φϏήʔγϣϯΛ؅ཧ͢Δ 30 .startedProvisionalNavigation .committed .receivedServerRedirect var currentNavigationEvent: WebPage.NavigationEvent? { get }
31. φϏήʔγϣϯΛ؅ཧ͢Δ 31 .startedProvisionalNavigation .committed .receivedServerRedirect .finished var currentNavigationEvent: WebPage.NavigationEvent? { get }
32. φϏήʔγϣϯΛ؅ཧ͢Δ 32 let id = page.load(URLRequest(url: url)) let events = Observations { page.currentNavigationEvent } for await event in events where event?.navigationID == id { switch event.kind { case .startedProvisionalNavigation: print("🔄 ಡΈࠐΈ։࢝") case .receivedServerRedirect: print("🔄 αʔόʔϦμΠϨΫτ") case .committed: print("📦 ίϯςϯπड৴։࢝") case .finished: print("✅ ಡΈࠐΈ׬ྃ") case let .failed(error): print("❌ Τϥʔ: \(error)") case let .failedProvisionalNavigation(error): print("❌ ॳظͷφϏήʔγϣϯॲཧதʹΤϥʔ: \(error)") } }
33. φϏήʔγϣϯΛ؅ཧ͢Δ 33 let id = page.load(URLRequest(url: url)) let events = Observations { page.currentNavigationEvent } for await event in events where event?.navigationID == id { switch event.kind { case .startedProvisionalNavigation: print("🔄 ಡΈࠐΈ։࢝") case .receivedServerRedirect: print("🔄 αʔόʔϦμΠϨΫτ") case .committed: print("📦 ίϯςϯπड৴։࢝") case .finished: print("✅ ಡΈࠐΈ׬ྃ") case let .failed(error): print("❌ Τϥʔ: \(error)") case let .failedProvisionalNavigation(error): print("❌ ॳظͷφϏήʔγϣϯॲཧதʹΤϥʔ: \(error)") } }
34. φϏήʔγϣϯΛ؅ཧ͢Δ 34 let id = page.load(URLRequest(url: url)) let events = Observations { page.currentNavigationEvent } for await event in events where event?.navigationID == id { switch event.kind { case .startedProvisionalNavigation: print("🔄 ಡΈࠐΈ։࢝") case .receivedServerRedirect: print("🔄 αʔόʔϦμΠϨΫτ") case .committed: print("📦 ίϯςϯπड৴։࢝") case .finished: print("✅ ಡΈࠐΈ׬ྃ") case let .failed(error): print("❌ Τϥʔ: \(error)") case let .failedProvisionalNavigation(error): print("❌ ॳظͷφϏήʔγϣϯॲཧதʹΤϥʔ: \(error)") } } Swift 6.2 Ͱར༻Մೳͳ Observations API Λར༻࣮͠ߦ
35. φϏήʔγϣϯΛ؅ཧ͢Δ 35 let id = page.load(URLRequest(url: url)) let events = Observations { page.currentNavigationEvent } for await event in events where event?.navigationID == id { switch event.kind { case .startedProvisionalNavigation: print("🔄 ಡΈࠐΈ։࢝") case .receivedServerRedirect: print("🔄 αʔόʔϦμΠϨΫτ") case .committed: print("📦 ίϯςϯπड৴։࢝") case .finished: print("✅ ಡΈࠐΈ׬ྃ") case let .failed(error): print("❌ Τϥʔ: \(error)") case let .failedProvisionalNavigation(error): print("❌ ॳظͷφϏήʔγϣϯॲཧதʹΤϥʔ: \(error)") } } for-await Λར༻ͯ͠ φϏήʔγϣϯΠϕϯτΛऔಘ͠ɺ ϋϯυϦϯά
36. JS࿈ܞ΋Swiftyʹ
37. JS࿈ܞ΋Swiftyʹ 37 import WebKit struct ContentView: View { @State private var page = WebPage() var body: some View { WebView(page) .onAppear { Task { } } } }
38. JS࿈ܞ΋Swiftyʹ 38 import WebKit struct ContentView: View { @State private var page = WebPage() var body: some View { WebView(page) .onAppear { Task { let result = try await page.callJavaScript(""" return document.title; """) } } } }
39. ஫ҙ఺
40. • iOS 26.0+ • ͠͹Β͘͸ WKWebView ʹ͓ੈ࿩ʹͳΓͦ͏ ஫ҙ఺
41. ࠷ޙʹ
42. • WebViewΛSwiftUIͰ࢖͏ͱ͍͏௕೥ͷئ͍͕Α͏΍͘ݱ࣮ʹͳΓ·ͨ͠ 🎉 • SwiftUI ࣌୅ͷ WebView ࣮૷͸͜Ε͔Β͕ຊ൪ 💪 • Swifty ͳ WebView Life Λָ͠ΜͰ͍͖·͠ΐ͏ 😊 ࠷ޙʹ