bbc · shayneahchoon · Nov 11, 2025 · Nov 11, 2025 · Nov 12, 2025 · Nov 12, 2025
diff --git a/src/app/hooks/useNetworkStatusTracker/index.test.tsx b/src/app/hooks/useNetworkStatusTracker/index.test.tsx
@@ -1,7 +1,7 @@
 import { renderHook, act } from '@testing-library/react';
 import { renderHook as renderSSRHook } from '@testing-library/react-hooks/server';
+import { EffectiveNetworkType } from '#app/models/types/global';
 import useNetworkStatus from './index';
-import { EffectiveNetworkType } from './type';
 
 describe('useNetworkStatus', () => {
   const originalNavigator = window.navigator;

diff --git a/src/app/hooks/useNetworkStatusTracker/index.tsx b/src/app/hooks/useNetworkStatusTracker/index.tsx
@@ -1,21 +1,13 @@
 import { useState, useEffect } from 'react';
 import getEffectiveNetworkType from '#app/lib/utilities/getEffectiveNetworkType';
-import { EffectiveNetworkType, NetworkStatus } from './type';
+import { NetworkStatus } from './type';
 
 /**
  * A hook to monitor and provide real-time network connectivity status.
  * Tracks whether the user is online or offline and includes the effective network type.
  * @returns {NetworkStatus} An object containing isOnline (boolean), source ('browser'), and networkType (EffectiveNetworkType).
  */
 
-interface NavigatorWithConnection extends Navigator {
-  connection?: {
-    effectiveType?: EffectiveNetworkType;
-    addEventListener?: (type: string, listener: () => void) => void;
-    removeEventListener?: (type: string, listener: () => void) => void;
-  };
-}
-
 const useNetworkStatusTracker = (): NetworkStatus => {
   const [networkStatus, setNetworkStatus] = useState<NetworkStatus>(() => {
     const isOnline =
@@ -58,7 +50,7 @@ const useNetworkStatusTracker = (): NetworkStatus => {
     window.addEventListener('online', handleOnline);
     window.addEventListener('offline', handleOffline);
 
-    const { connection } = navigator as NavigatorWithConnection;
+    const { connection } = navigator;
 
     if (connection?.addEventListener) {
       connection.addEventListener('change', handleConnectionChange);

diff --git a/src/app/hooks/useNetworkStatusTracker/type.tsx b/src/app/hooks/useNetworkStatusTracker/type.tsx
@@ -1,10 +1,4 @@
-export type EffectiveNetworkType =
-  | 'slow-2g'
-  | '2g'
-  | '3g'
-  | '4g'
-  | '5g'
-  | 'unknown';
+import { EffectiveNetworkType } from '#app/models/types/global';
 
 export type NetworkStatus = {
   isOnline: boolean;

diff --git a/src/app/lib/utilities/getEffectiveNetworkType.ts b/src/app/lib/utilities/getEffectiveNetworkType.ts
@@ -1,4 +1,4 @@
-import { EffectiveNetworkType } from '../../hooks/useNetworkStatusTracker/type';
+import { EffectiveNetworkType } from '#app/models/types/global';
 
 const getEffectiveNetworkType = (): EffectiveNetworkType => {
   if (typeof window === 'undefined' || !navigator) {

diff --git a/src/app/models/types/global.ts b/src/app/models/types/global.ts
@@ -134,3 +134,11 @@ export type ServicesVariantsProps = {
   service: Services;
   variant?: Variants;
 };
+
+export type EffectiveNetworkType =
+  | 'slow-2g'
+  | '2g'
+  | '3g'
+  | '4g'
+  | '5g'
+  | 'unknown';
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -1,7 +1,15 @@
 import { ReverbClient } from '#models/types/eventTracking';
 import { BumpType, Player } from '#app/components/MediaLoader/types';
+import { EffectiveNetworkType } from '#app/models/types/global';
 
 declare global {
+  interface Navigator {
+    connection?: {
+      effectiveType?: EffectiveNetworkType;
+      addEventListener?: (type: string, listener: () => void) => void;
+      removeEventListener?: (type: string, listener: () => void) => void;
+    };
+  }
   interface Window {
     bbcpage:
       | {

diff --git a/src/server/Document/Renderers/CanonicalRenderer.tsx b/src/server/Document/Renderers/CanonicalRenderer.tsx
@@ -4,6 +4,7 @@ import IfAboveIE9 from '#app/legacy/components/IfAboveIE9Comment';
 import NO_JS_CLASSNAME from '#app/lib/noJs.const';
 import { getProcessEnvAppVariables } from '#app/lib/utilities/getEnvConfig';
 import serialiseForScript from '#app/lib/utilities/serialiseForScript';
+import CanonicalToLiteRedirect from '#src/server/utilities/CanonicalToLiteRedirect';
 import addOperaMiniClassScript from '#app/lib/utilities/addOperaMiniClassScript';
 import { BaseRendererProps } from './types';
 import ReverbTemplate from './ReverbTemplate';
@@ -98,6 +99,7 @@ export default function CanonicalRenderer({
   return (
     <html lang="en-GB" className={NO_JS_CLASSNAME} {...htmlAttrs}>
       <head>
+        <CanonicalToLiteRedirect />
         <ReverbTemplate nonce={nonce} />
         {isApp && <meta name="robots" content="noindex" />}
         {title}

diff --git a/src/server/Document/__snapshots__/component.test.jsx.snap b/src/server/Document/__snapshots__/component.test.jsx.snap
@@ -104,6 +104,31 @@ exports[`Document Component should render APP version correctly 1`] = `
       href="modern.igbo.js"
       rel="modulepreload"
     />
+    <script>
+
+        window.addEventListener('load', () =&gt; {
+          (function redirectScript(window) {
+  var _window$navigator;
+  var pathname = window.location.pathname;
+  var allowList = ['/pidgin/articles/czrzwn80zjmo'];
+  if (window !== null && window !== void 0 && (_window$navigator = window.navigator) !== null && _window$navigator !== void 0 && (_window$navigator = _window$navigator.connection) !== null && _window$navigator !== void 0 && _window$navigator.effectiveType && allowList.includes(pathname)) {
+    var toLitePath = "".concat(pathname, ".lite");
+    var ect = window.navigator.connection.effectiveType;
+    var normalisedEct = ect.toLocaleLowerCase();
+    switch (normalisedEct) {
+      case 'slow-2g':
+      case '2g':
+      case '3g':
+        window.location.replace(toLitePath);
+        break;
+      default:
+        break;
+    }
+  }
+})(window)
+        })
+
+    </script>
     <script>
 
             window.__reverb = {};
@@ -320,6 +345,31 @@ exports[`Document Component should render correctly 1`] = `
       href="modern.igbo.js"
       rel="modulepreload"
     />
+    <script>
+
+        window.addEventListener('load', () =&gt; {
+          (function redirectScript(window) {
+  var _window$navigator;
+  var pathname = window.location.pathname;
+  var allowList = ['/pidgin/articles/czrzwn80zjmo'];
+  if (window !== null && window !== void 0 && (_window$navigator = window.navigator) !== null && _window$navigator !== void 0 && (_window$navigator = _window$navigator.connection) !== null && _window$navigator !== void 0 && _window$navigator.effectiveType && allowList.includes(pathname)) {
+    var toLitePath = "".concat(pathname, ".lite");
+    var ect = window.navigator.connection.effectiveType;
+    var normalisedEct = ect.toLocaleLowerCase();
+    switch (normalisedEct) {
+      case 'slow-2g':
+      case '2g':
+      case '3g':
+        window.location.replace(toLitePath);
+        break;
+      default:
+        break;
+    }
+  }
+})(window)
+        })
+
+    </script>
     <script>
 
             window.__reverb = {};

diff --git a/src/server/utilities/CanonicalToLiteRedirect/index.test.tsx b/src/server/utilities/CanonicalToLiteRedirect/index.test.tsx
@@ -0,0 +1,50 @@
+import { redirectScript } from '.';
+
+describe('LiteRedirect', () => {
+  it.each([
+    {
+      effectiveType: 'randomValue',
+      expectedRedirect: false,
+    },
+    {
+      effectiveType: 'slow-2g',
+      expectedRedirect: true,
+    },
+    {
+      effectiveType: '2g',
+      expectedRedirect: true,
+    },
+    {
+      effectiveType: '3g',
+      expectedRedirect: true,
+    },
+    {
+      effectiveType: '4g',
+      expectedRedirect: false,
+    },
+  ])(
+    `When the client is on $effectiveType then expect redirect should be $expectRedirect`,
+    ({ effectiveType, expectedRedirect }) => {
+      const mockWindow = {
+        navigator: {
+          connection: {
+            effectiveType,
+          },
+        },
+        location: {
+          replace: jest.fn(),
+          href: 'https://www.somepath.com/',
+          pathname: '/pidgin/articles/czrzwn80zjmo',
+        },
+      } as unknown as Window;
+
+      redirectScript(mockWindow);
+      const replaceCallStack = (mockWindow.location.replace as jest.Mock).mock
+        .calls[0]?.[0];
+
+      const hasRedirected = Boolean(replaceCallStack);
+
+      expect(hasRedirected).toBe(expectedRedirect);
+    },
+  );
+});
diff --git a/src/server/utilities/CanonicalToLiteRedirect/index.tsx b/src/server/utilities/CanonicalToLiteRedirect/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export const redirectScript = (window: Window) => {
+  const { pathname } = window.location;
+
+  const allowList = ['/pidgin/articles/czrzwn80zjmo'];
+  if (
+    window?.navigator?.connection?.effectiveType &&
+    allowList.includes(pathname)
+  ) {
+    const toLitePath = `${pathname}.lite`;
+    const ect = window.navigator.connection.effectiveType;
+    const normalisedEct = ect.toLocaleLowerCase();
+    switch (normalisedEct) {
+      case 'slow-2g':
+      case '2g':
+      case '3g':
+        window.location.replace(toLitePath);
+        break;
+      default:
+        break;
+    }
+  }
+};
+
+// THIS COMPONENT IS ONLY TO BE USED WITH CANONICAL REDNERERS
+// DO NOT USE IT WITH LITE AND AMP RENDERERS
+export default () => {
+  return (
+    <script>
+      {`
+        window.addEventListener('load', () => {
+          (${redirectScript.toString()})(window)
+        })
+      `}
+    </script>
+  );
+};
diff --git a/ws-nextjs-app/pages/_document.page.tsx b/ws-nextjs-app/pages/_document.page.tsx
@@ -37,6 +37,7 @@ import getPathExtension from '#app/utilities/getPathExtension';
 import ReverbTemplate from '#src/server/Document/Renderers/ReverbTemplate';
 import { PageTypes } from '#app/models/types/global';
 import ComponentTracking from '#src/server/Document/Renderers/ComponentTracking';
+import CanonicalToLiteRedirect from '#src/server/utilities/CanonicalToLiteRedirect';
 import addOperaMiniClassScript from '#app/lib/utilities/addOperaMiniClassScript';
 import removeSensitiveHeaders from '../utilities/removeSensitiveHeaders';
 import derivePageType from '../utilities/derivePageType';
@@ -190,6 +191,7 @@ export default class AppDocument extends Document<DocProps> {
         return (
           <Html lang="en-GB" {...htmlAttrs} className={NO_JS_CLASSNAME}>
             <Head>
+              <CanonicalToLiteRedirect />
               <ReverbTemplate />
               <script
                 type="text/javascript"