Auto New Windows

📘

Define a hierarchy for your website so that pages in a higher level will open in a new window within your app versus the current view. The top navigation bar will show a "< Back" button to allow easy navigation back to the same place on the lower level page.

Overview

Many widely used apps ranging from news apps to banking apps provide a hierarchical or multi-level navigation experience for users, allowing them to view specific page(s) and easily return to the same place on the prior page by way of a "< Back" button in the top navigation bar.

For example a news app may have various categories such as "Local News", "International", "Business", "Sports", "Lifestyle" defined as level 2. When a user clicks a category will see news articles in that category which they can open and browse. At any time they can press "< Back" in the top nav bar to return to the front page.

GoNative allows you to configure this user experience easily by assigning individual pages or groups of pages to a Level by creating rules. When clicking a link to a page that has been assigned a higher level the link will open in a new window within the app. The top navigation bar will show a "< Back" button on the left to allow easy navigation to the lower level page even if the user has navigated elsewhere in that current level. The top navigation bar will show the page name in the center but this can be changed using the Dynamic Titles configuration.

See below for an example.

Auto New Windows Example

You may define the navigation hierarchy for your app at build time within your app configuration or alternatively at run time from your website via the JavaScript Bridge.

App Configuration

Whenever a user navigates to a URL with a higher level specified, the page will load in a new window (Android Activity or iOS ViewController). Rules / regex matches are prioritized top to bottom. If no match is found for a link, the link will open in the current level.

An example appConfig for BooyaFitness.com is provided below:

"navigationLevels": {
  "active": true,
  "levels": [
    {
      "regex": "https://www.booyafitness.com/?",
      "level": 1
    },
    {
      "regex": "https://www.booyafitness.com/workouts/browse/?",
      "level": 1
    },
    {
      "regex": "https://www.booyafitness.com/partners/browse/?",
      "level": 1
    },
    {
      "regex": "https://www.booyafitness.com/pricing/?",
      "level": 1
    },
    {
      "regex": "https://www.booyafitness.com/dashboard/?",
      "level": 1
    },
    {
      "regex": "https://www.booyafitness.com/edit/?",
      "level": 1
    },
    {
      "regex": "https://www.booyafitness.com/workouts/.+",
      "level": 2
    },
    {
      "regex": "https://www.booyafitness.com/partners/.+",
      "level": 2
    },
    {
      "regex": "https://www.booyafitness.com/videos/.+",
      "level": 3
    },
    {
      "regex": "https://www.booyafitness.com/terms",
      "level": 4
    },
    {
      "regex": "https://www.booyafitness.com/privacy",
      "level": 4
    },
    {
      "regex": "https://www.booyafitness.com/about",
      "level": 4
    },
    {
      "regex": "https://www.booyafitness.com/contact",
      "level": 4
    }
  ]
}

🚧

Single-Page-App

Auto new windows will load the new page in a new webview, and requires a full page load. For example, if your site is a single-page-app driven by AJAX, then you may need to force a full page load using something like: window.location.href = 'https://my-ajax-site/path";

JavaScript Bridge

Auto new windows can be set dynamically from your website using the GoNative JavaScript Bridge. A default auto new windows setting can be defined in the app builder that is then overwritten dynamically as required. Or alternatively, the configuration can be left blank in the app builder and the auto new windows configuration set by your website.

️GoNative JavaScript Bridge

To configure "Auto New Windows" settings define your navigation levels structure as a JSON object and run the following command:

var autoNewWindowsRules = {
    active: true,
    persist: true,
    levels: [{
      regex: '.*gonative.*',
      level: 2
    }, {
      regex: '.*',
      level: 1
    }]
}

Setting persist: true will save the navigation levels for use the next time the app is launched, otherwise, the changes will only take effect for the current app session.

️GoNative JavaScript Bridge

To revert to the appConfig.json definition built into your app, run the following command:

gonative.navigationLevels.set({persist: true});

Auto New Windows Demo App

iOS

Android

/* Auto New Windows Configuration */
[
  {
    "regex": "https://gonativeio.github.io/gonative-demos/auto-new-windows-demo.html/?",
    "level": 1
  },
  {
    "regex": "https://gonativeio.github.io/gonative-demos/contact.html/?",
    "level": 2
  },
  {
    "regex": "https://gonativeio.github.io/gonative-demos/about.html/?",
    "level": 3
  }
]
/* Set Auto New Windows */
var json = JSON.stringify({
    active: true,
    levels: [{
      regex: "https://gonativeio.github.io/gonative-demos/auto-new-windows-demo.html/?",
      level: 1
    }, {
      regex: "https://gonativeio.github.io/gonative-demos/contact.html/?",
      level: 1
    }, {
      regex: "https://gonativeio.github.io/gonative-demos/about.html/?",
      level: 2
    }]
});

window.location.href = 'gonative://navigationLevels/set?persist=true&data=' + encodeURIComponent(json);
/* Revert Auto New Windows */
if (navigator.userAgent.indexOf('gonative') > -1) {
  window.location.href = 'gonative://navigationLevels/set?persist=true';
}