SPA Navigation

Navigating within a Single Page Application (SPA) built with frameworks including React, Angular or Vue.js functions differently compared to traditional websites. SPAs generally do not load a new page when a user clicks a link. Instead, they display the requested content from a cache or through an asynchronous network request. This "soft" page load is less costly than a "hard" page load and allows SPAs to offer a highly responsive user experience. This characteristic is a key reason for their extensive use in powering native apps built using the Median platform.

Median's NPM package provides functionality to implement the same "soft" page load responsive experience for native app navigation events, including:

• Native navigation button clicks (e.g., tapping a bottom tab bar button).
• Deep link app resume (e.g., opening a deep link from an email/SMS that launches your app from the background).
• Push notification app resume (e.g., tapping a notification banner with an embedded URL that opens in the app from the background).

JavaScript Navigation Listener

To ensure a soft load of the requested content and maintain a responsive experience for end users within your app, implement the jsNavigation listener within your SPA to listen to URL changes triggered by the native app.

↔️Median JavaScript Bridge

Implement the following listener which will be called by the app upon native navigation events:

JavaScript

Median.jsNavigation.url.addListener((url) -> {
  // navigate to the URL internally using your SPA routing logic
  // soft load the requested content or trigger a hard page load only if necessary
});

This listener allows your SPA to manage the navigation event using your routing library, avoiding an unnecessary hard load of the page. This results in an optimized and performant experience for your end users.

Example SPA Navigation Flow

1. Open Deep Link: The app is closed, and the user clicks a deep link in an email (e.g., https://median.app/abc/123).
2. Cold Start App Launch: The app launches from a cold start, loads the deep link URL directly, and the SPA is loaded as part of this initial hard page load.
3. Internal Navigation: The user clicks various links and navigates through the SPA, which asynchronously loads and displays new content without any hard page loads.
4. Background App and Open Deep Link: The user backgrounds the app, switches back to their email client, and clicks the deep link from step #1 again.
5. Warm Start and App Resume: The app launches from a warm start, and the jsNavigation listener is called with the deep link URL as the parameter.
6. Seamless Soft Navigation: The SPA seamlessly navigates to the content without requiring a full page load.

Without the listener in step #6 the app would perform a costly full page load, causing delays. In some scenarios the app might not perform a hard load at all if it incorrectly determines that the requested URL is already displayed based on the initial load in step #2.

By implementing the jsNavigation listener, you ensure a responsive and efficient navigation experience within your native apps and maximize the performance benefits possible through a SPA.