WS-1400: Add client side redirect

src/app/components/LiteRedirect/index.test.tsx

@@ -0,0 +1,72 @@
+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);
+    },
+  );
+
+  it.each(['.amp', '.lite'])('should not redirect for %s', type => {
+    const mockWindow = {
+      navigator: {
+        connection: {
+          effectiveType: '5g',
+        },
+      },
+      location: {
+        replace: jest.fn(),
+        href: `https://www.somepath.com${type}`,
+      },
+    } 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(false);
+  });
+});

src/app/components/LiteRedirect/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+export const redirectScript = (window: Window) => {
+  const { pathname, href } = window.location;
+  const isLite = /\.lite$/.test(href);
+  const isAmp = /\.amp$/.test(href);
+
+  const allowList = ['/pidgin/articles/czrzwn80zjmo'];
+
+  if (
+    !isLite &&
+    !isAmp &&
+    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;
+    }
+  }
+};
+
+export default () => {
+  const innerHTML = `(
+    window.addEventListener('load', () => {
+      (${redirectScript.toString()})(window)
+    })
+  )`;
+
+  return (
+    <Helmet
+      script={[
+        {
+          type: 'text/javascript',
+          innerHTML,
+        },
+      ]}
+    />
+  );
+};

src/global.d.ts

@@ -2,6 +2,13 @@ import { ReverbClient } from '#models/types/eventTracking';
 import { BumpType, Player } from '#app/components/MediaLoader/types';
 
 declare global {
+  interface Navigator {
+    connection?: {
+      effectiveType?: string;
+      addEventListener?: (type: string, listener: () => void) => void;
+      removeEventListener?: (type: string, listener: () => void) => void;
+    };
+  }
   interface Window {
     bbcpage:
       | {

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 LiteRedirect from '#app/components/LiteRedirect';
 import { BaseRendererProps } from './types';
 import ReverbTemplate from './ReverbTemplate';
 import ComponentTracking from './ComponentTracking';
@@ -97,6 +98,7 @@ export default function CanonicalRenderer({
   return (
     <html lang="en-GB" className={NO_JS_CLASSNAME} {...htmlAttrs}>
       <head>
+        <LiteRedirect />
         <ReverbTemplate nonce={nonce} />
         {isApp && <meta name="robots" content="noindex" />}
         {title}

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 LiteRedirect from '#app/components/LiteRedirect';
 import removeSensitiveHeaders from '../utilities/removeSensitiveHeaders';
 import derivePageType from '../utilities/derivePageType';
 
@@ -189,6 +190,7 @@ export default class AppDocument extends Document<DocProps> {
         return (
           <Html lang="en-GB" {...htmlAttrs} className={NO_JS_CLASSNAME}>
             <Head>
+              <LiteRedirect />
               <ReverbTemplate />
               <script
                 type="text/javascript"