iOS Contextual Navigation Toolbar

📘

Unlike Android devices iPhones and iPads do not have a built-in back button, which can make navigating your website from within your app challenging. This feature provides a native navigation toolbar that shows on the bottom of the device screen dependent on navigation history. By default the toolbar will include a Back button but it can be customized to also show with Forward and Refresh buttons.

By default, the Contextual Navigation Toolbar will be displayed whenever there is a page in the webview history that can be returned to. This functionality makes it easier for users to navigate your app in a similar manner to your website.

Back Button Back, Refresh, and Forward buttons

By default, the Contextual Navigation Toolbar will show a back button with a text label "< Back". You may edit the navigation configuration object in appConfig.json to:

  • Add a Forward button
  • Add a Refresh button
  • Change the toolbar visibility settings to
    • Only show when there is a page in history (default)
    • Always show regardless of history: "visibility": "always"
  • Change the toolbar visibility to only show on specific pages
    • If a regex is included with the back button, then the toolbar will only show when a URL matching this regex is loaded.
    • If an array of regexes is included with the toolbar items, then the visibility of the toolbar will be based on the first matched regex's "enabled" value.
/* Default Toolbar */
"toolbarNavigation": {
      "items": [
        {
          "system": "back"
        }
      ]
    }
/* Back, Forward, Refresh*/
"navigation": {
    "toolbarNavigation": {
        "items": [{
                "system": "back"
            },
            {
                "system": "forward"
            },
            {
                "system": "refresh"
            }
        ]
    }
}
/* Back, Forward, Refresh with text labels*/
"navigation": {
  "toolbarNavigation": {
    "items": [
      {
        "system": "back",
        "title": "背部"
      },
      {
        "system": "forward",
        "title": "向前"
      },
      {
        "system": "refresh",
        "title": "새로고침"
      }
    ]
  }
}
/* Default - Only show when Back history is available */
"toolbarNavigation": {
      "items": [
        {
          "system": "back"
        }
      ]
    }

/* Only show for a particular regex of Back button */
/* For example, the toolbar settings below will only show the toolbar on 
     gonative webpages. */
"toolbarNavigation": {
      "items": [
        {
          "system": "back",
          "urlRegex": ["https://gonative.io/.*"]
        },
        {
          "system": "forward"
        }
      ],
      "regexes": [
        {
            "regex": ".*",
          "enabled": false
        }
      ]
    }

/* Visibility based on the first matched regex in a list of regex */
/* Example: For the URLs matching the first regex (FAQ page),
     the toolbar will be hidden (because "enabled": false), while for the URLs
   matching the second regex (all GoNative webpages), the toolbar will be 
   visible and so on.
*/
"toolbarNavigation": {
      "items": [
        {
          "system": "back",
          "urlRegex": ["https://gonative.io/pricing.*"]
        },
        {
          "system": "forward"
        }
      ],
      "regexes": [
        {
          "regex": "https://gonative.io/faq.*",
          "enabled": false
        },
        {
          "regex": "https://gonative.io/.*",
          "enabled": true
        },
        {
            "regex": ".*",
          "enabled": false
        }
      ]
    }

/* Always show toolbar */
"toolbarNavigation": {
      "visibility": "always",
      "items": [
        {
          "system": "back"
        }
      ]
    }

📘

Android

This is an iOS-specific feature and is not supported on Android