History

The History action set allows you to use the JavaScript History API to modify the top-level browser URL without navigating. Use the History action set to update the top-level browser URL to match your app.

Setup

Create an app and import the History module from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.

import createApp from '@shopify/app-bridge';
import {History} from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

const history = History.create(app);

Push a new history entry containing the relative app path

The path is relative to the app origin and must be prefixed with a slash. Adding a history entry does not redirect the app:

// Pushes {appOrigin}/settings to the history
history.dispatch(History.Action.PUSH, '/settings');

Replace the current history entry with the relative app path

The path is relative to the app origin and must be prefixed with a slash. Replacing the history entry does not redirect the app:

// Replaces the current history url with {appOrigin}/settings
history.dispatch(History.Action.REPLACE, '/settings');

Subscribe to actions

You can subscribe to actions dispatched through the specific history action set:

history.subscribe(History.Action.REPLACE, (payload: History.Payload) => {
  // Do something with the history replace action
  console.log(`Updated the history entry to path: ${payload.path}`);
});

history.subscribe(History.Action.PUSH, (payload: History.Payload) => {
  // Do something with the history push action
  console.log(`Added a history entry with the path: ${payload.path}`);
});

Subscribe to all history actions

You can subscribe to all history actions, regardless of which action sets trigger the actions:

app.subscribe(History.ActionType.REPLACE, (payload: History.Payload) => {
  // Do something with the history replace action
  console.log(`Updated the history entry to path: ${payload.path}`);
});

app.subscribe(History.ActionType.PUSH, (payload: History.Payload) => {
  // Do something with the history push action
  console.log(`Added a history entry with the path: ${payload.path}`);
});