Application Customizer navigation checks

app-customizer-navigation-checks.ts

interface NavigationEventDetails extends Window {
  isNavigatedEventSubscribed: boolean;
  currentPage: string;
  currentHubSiteId: string;
  currentUICultureName: string;
}
declare const window: NavigationEventDetails;

export default class NavigationApplicationCustomizer extends BaseApplicationCustomizer<INavigationApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    this.render();

    return Promise.resolve();
  }
  
  @override
  public onDispose(): Promise<void> {
    this.context.application.navigatedEvent.remove(this, this.render);
    
    window.isNavigatedEventSubscribed = false;
    window.currentPage = '';
    window.currentHubSiteId = '';
    window.currentUICultureName = '';
    
    return Promise.resolve();
  }

  private render() {
    window.currentPage = window.location.href;
    window.currentHubSiteId = HubSiteService.getHubSiteId(); // Your custom logic to retrieve the hub site id
    window.currentUICultureName = this.context.pageContext.cultureInfo.currentUICultureName;

    if (!window.isNavigatedEventSubscribed) {
      this.context.application.navigatedEvent.add(this, this.navigationEventHandler);
      window.isNavigatedEventSubscribed = true;
    }
  }
  
  private navigationEventHandler(args: SPEventArgs): void {
    setTimeout(() => {
      if (window.currentHubSiteId !== HubSiteService.getHubSiteId()) {
        this.onDispose();
        this.onInit();
        return;
      }

      if (window.currentUICultureName !== this.context.pageContext.cultureInfo.currentUICultureName) {
        // Trigger a full page refresh to be sure to have to correct language loaded
        location.reload();
        return;
      }

      // Page URL check
      if (window.currentPage !== window.location.href) {
        window.currentPage = window.location.href;
      }
    }, 50);
  }
}