Showing a Bundled Help Guide in Your SwiftUI App

A common way to provide a help guide in an iOS or Mac app is to create a local website for the guide and bundle it with your app. If you want to show a bundled help guide in your iOS or Mac app, you have to do the following:

• Add the guide to your Xcode project
• Find the guide in the app bundle
• Show the guide in a web view

Add the Guide to Your Xcode Project

To add the guide to your Xcode project, either choose File > Add Files to ProjectName in Xcode or drag the folder containing the help guide to Xcode’s project navigator, which is on the left side of the project window.

Make sure the folder is part of the app target’s Copy Bundle Resources build phase. The folder must be in this build phase for Xcode to copy it to the app bundle’s Resources folder when you build the project. The folder must be in the app bundle’s Resources for you to load and show the help guide in your app.

Take the following steps to access the Copy Bundle Resources build phase in Xcode:

1. Select your project from the left side of the project window to open the project editor.
2. Select the app target from the target list on the left side of the project editor.
3. Click the Build Phases button at the top of the project editor.
4. Click the disclosure triangle next to the Copy Bundle Resources build phase to see what is in the build phase.

If the folder isn’t in the Copy Bundle Resources build phase, click the Add button below the list of items in the build phase to add the folder. If there is no Copy Bundle Resources build phase for the target, click the Add button above the list of build phases and choose New Copy Bundle Resources build phase.

Finding the Guide in the App Bundle

Call the function url to find the folder in the app bundle that contains the help guide. Supply nil as the extension.

Call the function appendingPathComponent to add the guide’s start page to the URL so the web view shows the start page when you open the guide. The following code returns the URL for a file named index.html in a Guide folder in the app bundle:

func loadGuide() -> URL {
  let bundle = Bundle.main
  if let guideUrl = bundle.url(forResource: "Guide", withExtension: nil) {
    return guideUrl.appendingPathComponent("index.html", conformingTo: .html)
  }
}

Showing the Guide in a Web View

Import the WebKit framework. You must import WebKit to create a SwiftUI WebView.

import WebKit

Add a WebView to the SwiftUI view body and supply the URL for the help guide, which in this example is the URL the loadGuide function returns.

struct GuideView: View {
  @State var url: URL
  
  var body: some View {
    WebView(url: url)
      .onAppear {
        url = loadGuide()
      }
  }
}

You can add a Help toolbar item to your app’s user interface to show the guide. In a Mac app you can add a menu item to the Help menu, and show the guide when someone chooses the menu item.