In the safari or chrome app, when I want to change tabs, I can go into a grid view of the tabs. In this grid, each tab shows the content of the page. When I click on one of the tabs, the content of the page expands to fill the entire screen (and shrinks when I go back to grid).
I'm creating my own browser and I'm trying to replicate this same functionality. I'm using WebKit on XCode 16.4, iOS 18. However, I'm unable to figure out how Chrome and Safari did this.
First, I thought that I could take a snapshot of the page and then use that image as the thumbnail. However, very often the image is of the wrong size - likely due to the webview shrinking for the animation.
Making the animation wait until the image is made available did help in making it more consistent. The above errors happen whenever I spam the new tab and then click the tab grid button. It only is misaligned on the very last new tab. Please help on this.
// OpenedTab.swift
Button(action: {
tab.getThumbnail {
tabManager.selectedTab = nil
}
}) {
ZStack {
Image(systemName: "square")
.resizable()
.frame(width: 25, height: 25)
Text(tabManager.tabs.count.description)
.font(.subheadline)
}
}
// TabState.swift
func getThumbnail(completionHandler: (() -> Void)? = nil) {
webView.takeSnapshot(with: nil) { img, err in
if let err = err {
print("Snapshot err: \(err)")
} else {
self.thumbnail = img
completionHandler?()
}
}
}
Also, something I'm noticing is that for some reason, the image is slightly bigger than the header of the tab card. It also happens in the progress view if the thumbnail isn't available. The images above show it too.
I have no clue why this is happening and I would love advice on this too.
struct TabCardView: View {
@StateObject var manager = TabManager.shared
@ObservedObject var tab: TabState
var namespace: Namespace.ID
@State var width: CGFloat = 0
var body: some View {
GeometryReader { geo in
VStack(spacing: 0) {
HStack(spacing: 1) {
Text(tab.title ?? tab.url.host() ?? "")
.font(.caption2)
.padding(.horizontal, 4)
.padding(.vertical, 10)
Button(action: {
manager.close(tab: tab)
}) {
Image(systemName: "multiply")
}
}
.frame(height: 40)
.frame(width: geo.size.width)
// .padding(.horizontal, 7)
.background(.tertiary)
.matchedGeometryEffect(id: tab.id.uuidString + "title", in: namespace)
ZStack {
if let thumbnail = tab.thumbnail {
Image(uiImage: thumbnail)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geo.size.width, height: 160, alignment: .top)
.clipped()
} else {
Color.black.brightness(0.8)
ProgressView()
}
}
.frame(width: geo.size.width, height: 160)
.matchedGeometryEffect(id: tab.id.uuidString + "container", in: namespace)
}
.frame(width: geo.size.width)
}
.frame(height: 200)
.clipShape(RoundedRectangle(cornerRadius: 16))
.shadow(radius: 2)
.padding(.all, 7)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(.blue, lineWidth: manager.previousTab?.id == tab.id ? 5 : 0)
)
.shadow(radius: 1)
}
}
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
I'm using NWBrowser to search for a server that I hosted. The browser does find my service but when it tries to connect to it, it gets stuck in the preparing phase in NWConnection.stateUpdateHandler. When I hardcode the local IP address of my computer (where the server is hosted) into NWConnection it works perfectly fine and is able to connect.
When it gets stuck in the preparing phase, it gives me the warnings and error messages in the image below. You can also see that the service name is correct and it is found.
I have tried _http._tcp and _ssh._tcp types and neither work.
This is what my code looks like:
func findServerAndConnect(port: UInt16) {
print("Searching for server...")
let browser = NWBrowser(for: .bonjour(type: "_ssh._tcp", domain: "local."), using: .tcp)
browser.browseResultsChangedHandler = { results, _ in
print("Found results: \(results)")
for result in results {
if case let NWEndpoint.service(name, type_, domain, interface) = result.endpoint {
if name == "PocketPadServer" {
print("Found service: \(name) of type \(type_) in domain \(domain) on interface \(interface)")
// Construct the full service name, including type and domain
let fullServiceName = "\(name).\(type_).\(domain)"
print("Full service name: \(fullServiceName), \(result.endpoint)")
self.connect(to: result.endpoint, port: port)
browser.cancel()
break
}
}
}
}
browser.start(queue: .main)
}
func connect(to endpoint: NWEndpoint, port: UInt16) {
print("Connecting to \(endpoint) on port \(port)...")
// endpoint = NWEndpoint(
let tcpParams = NWProtocolTCP.Options()
tcpParams.enableFastOpen = true
tcpParams.keepaliveIdle = 2
let params = NWParameters(tls: nil, tcp: tcpParams)
params.includePeerToPeer = true
// connection = NWConnection(host: NWEndpoint.Host("xx.xxx.xxx.xxx"), port: NWEndpoint.Port(3000), using: params)
connection = NWConnection(to: endpoint, using: params)
connection?.pathUpdateHandler = { path in
print("Connection path update: \(path)")
if path.status == .satisfied {
print("Connection path is satisfied")
} else {
print("Connection path is not satisfied: \(path.status)")
}
}
connection?.stateUpdateHandler = { newState in
DispatchQueue.main.async {
switch newState {
case .ready:
print("Connected to server")
self.pairing = true
self.receiveMessage()
case .failed(let error):
print("Connection failed: \(error)")
self.isConnected = false
case .waiting(let error):
print("Waiting for connection... \(error)")
self.isConnected = false
case .cancelled:
print("Connection cancelled")
self.isConnected = false
case .preparing:
print("Preparing connection...")
self.isConnected = false
default:
print("Connection state changed: \(newState)")
break
}
}
}
connection?.start(queue: .main)
}