OS26 SwiftUI WebView - Go Forward/Back?

Trying to implement my own forward/back buttons for the new SwiftUI WebView and reading the documentation I’m totally lost.

What’s the recommended way of implementing forward/back behavior with this component?

Answered by DTS Engineer in 847032022

Hi. Here's an example (borrowed from one of engineering's test apps) showing how you can implement back/forward buttons on a SwiftUI WebView:


/* first define the back/forward menu view */

private struct ToolbarBackForwardMenuView: View {
    struct LabelConfiguration {
        let text: String
        let systemImage: String
        let key: KeyEquivalent
    }

    let list: [WebPage.BackForwardList.Item]
    let label: LabelConfiguration
    let navigateToItem: (WebPage.BackForwardList.Item) -> Void

    var body: some View {
        Menu {
            ForEach(list) { item in
                Button(item.title ?? item.url.absoluteString) {
                    navigateToItem(item)
                }
            }
        } label: {
            Label(label.text, systemImage: label.systemImage)
                .labelStyle(.iconOnly)
        } primaryAction: {
            navigateToItem(list.first!)
        }
        .menuIndicator(.hidden)
        .disabled(list.isEmpty)
        .keyboardShortcut(label.key)
    }
}


/* then add a toolbar to your web view with back/forward buttons*/

WebView(viewModel.page)

....other stuff here ...

.toolbar {
	ToolbarItemGroup(placement: Self.navigationToolbarItemPlacement) {
		ToolbarBackForwardMenuView(
			list: viewModel.page.backForwardList.backList.reversed(),
			label: .init(text: "Backward", systemImage: "chevron.backward", key: "[")
		) {
			viewModel.page.load($0)
		}

		#if os(iOS)
		Spacer()
		#endif

		ToolbarBackForwardMenuView(
			list: viewModel.page.backForwardList.forwardList,
			label: .init(text: "Forward", systemImage: "chevron.forward", key: "]")
		) {
			viewModel.page.load($0)
		}

	}
	
	ToolbarItemGroup(placement: .principal) {
		PrincipalToolbarGroup()
	}
}

Hi. Here's an example (borrowed from one of engineering's test apps) showing how you can implement back/forward buttons on a SwiftUI WebView:


/* first define the back/forward menu view */

private struct ToolbarBackForwardMenuView: View {
    struct LabelConfiguration {
        let text: String
        let systemImage: String
        let key: KeyEquivalent
    }

    let list: [WebPage.BackForwardList.Item]
    let label: LabelConfiguration
    let navigateToItem: (WebPage.BackForwardList.Item) -> Void

    var body: some View {
        Menu {
            ForEach(list) { item in
                Button(item.title ?? item.url.absoluteString) {
                    navigateToItem(item)
                }
            }
        } label: {
            Label(label.text, systemImage: label.systemImage)
                .labelStyle(.iconOnly)
        } primaryAction: {
            navigateToItem(list.first!)
        }
        .menuIndicator(.hidden)
        .disabled(list.isEmpty)
        .keyboardShortcut(label.key)
    }
}


/* then add a toolbar to your web view with back/forward buttons*/

WebView(viewModel.page)

....other stuff here ...

.toolbar {
	ToolbarItemGroup(placement: Self.navigationToolbarItemPlacement) {
		ToolbarBackForwardMenuView(
			list: viewModel.page.backForwardList.backList.reversed(),
			label: .init(text: "Backward", systemImage: "chevron.backward", key: "[")
		) {
			viewModel.page.load($0)
		}

		#if os(iOS)
		Spacer()
		#endif

		ToolbarBackForwardMenuView(
			list: viewModel.page.backForwardList.forwardList,
			label: .init(text: "Forward", systemImage: "chevron.forward", key: "]")
		) {
			viewModel.page.load($0)
		}

	}
	
	ToolbarItemGroup(placement: .principal) {
		PrincipalToolbarGroup()
	}
}
OS26 SwiftUI WebView - Go Forward/Back?
 
 
Q