From a8cc6965a4db959746ff6fd4cd5cdaa89408d370 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Wed, 21 Jan 2026 17:44:37 +0200
Subject: [PATCH 01/14] feat: offline - fetch most read articles

---
 .../pages/[service]/offline/OfflinePage.tsx   | 11 +++++-
 .../pages/[service]/offline/index.page.tsx    | 38 +++++++++++++++----
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
index b87e4062f1b..db0eb2df884 100644
--- a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
@@ -3,8 +3,15 @@ import Helmet from 'react-helmet';
 import { ServiceContext } from '#contexts/ServiceContext';
 import ErrorMain from '#app/legacy/components/ErrorMain';
 import { useOfflinePageFlag } from '#app/hooks/useOfflinePageFlag';
+import { MostReadData } from '#app/components/MostRead/types';
 
-const OfflinePage = () => {
+export type Props = {
+  pageData: {
+    mostReadData: MostReadData;
+  };
+};
+
+const OfflinePage = ({ pageData }: Props) => {
   const { service, dir, script } = use(ServiceContext);
 
   // Track offline page visit (sets flag in localStorage, PWA only)
@@ -18,6 +25,8 @@ const OfflinePage = () => {
     'Refresh the page when your connection is restored',
   ];
 
+  console.log({ pageData });
+
   return (
     <>
       <Helmet htmlAttributes={{ dir, lang: service }}>
diff --git a/ws-nextjs-app/pages/[service]/offline/index.page.tsx b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
index fd7d627394e..22a03f300d0 100644
--- a/ws-nextjs-app/pages/[service]/offline/index.page.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
@@ -1,15 +1,19 @@
 import dynamic from 'next/dynamic';
 import { GetServerSideProps } from 'next';
-import { OFFLINE_PAGE } from '#app/routes/utils/pageTypes';
+import { OFFLINE_PAGE, MOST_READ_PAGE } from '#app/routes/utils/pageTypes';
 import PageDataParams from '#app/models/types/pageDataParams';
 import deriveVariant from '#nextjs/utilities/deriveVariant';
-import extractHeaders from '#server/utilities/extractHeaders';
 import logResponseTime from '#server/utilities/logResponseTime';
+import getPageData from '#nextjs/utilities/pageRequests/getPageData';
 
 const OfflinePage = dynamic(() => import('./OfflinePage'));
 
 export const getServerSideProps: GetServerSideProps = async context => {
-  const { service, variant: variantFromUrl } = context.query as PageDataParams;
+  const {
+    service,
+    variant: variantFromUrl,
+    renderer_env: rendererEnv,
+  } = context.query as PageDataParams;
   const variant = deriveVariant(variantFromUrl);
 
   logResponseTime({ path: context.resolvedUrl }, context.res, () => null);
@@ -19,15 +23,33 @@ export const getServerSideProps: GetServerSideProps = async context => {
     'public, max-age=300, stale-while-revalidate=600, stale-if-error=3600',
   );
 
+  let mostReadData = null;
+
+  try {
+    const { data } = await getPageData({
+      pageType: MOST_READ_PAGE,
+      id: `/${service}/popular/read`,
+      resolvedUrl: `/${service}/popular/read`,
+      service,
+      variant: variant || undefined,
+      rendererEnv,
+    });
+
+    mostReadData = data?.pageData ?? null;
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to fetch most read data:', err);
+  }
+
   return {
     props: {
-      service,
-      variant,
+      pageData: {
+        mostReadData,
+      },
       pageType: OFFLINE_PAGE,
+      service,
       status: 200,
-      timeOnServer: Date.now(),
-      pathname: `/${service}/offline`,
-      ...extractHeaders(context.req.headers),
+      variant: variant || null,
     },
   };
 };

From 715c1693b18f00339ccdd13386748e4f7a78aee5 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Thu, 22 Jan 2026 10:38:43 +0200
Subject: [PATCH 02/14] feat: render most read on offline page

---
 .../pages/[service]/offline/OfflinePage.tsx   | 60 +++++++++++++------
 .../pages/[service]/offline/index.page.tsx    |  2 +-
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
index db0eb2df884..ac839b52a16 100644
--- a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
@@ -3,18 +3,22 @@ import Helmet from 'react-helmet';
 import { ServiceContext } from '#contexts/ServiceContext';
 import ErrorMain from '#app/legacy/components/ErrorMain';
 import { useOfflinePageFlag } from '#app/hooks/useOfflinePageFlag';
+import MostRead from '#app/components/MostRead/Canonical';
 import { MostReadData } from '#app/components/MostRead/types';
+import Heading from '#app/components/Heading';
+import Paragraph from '#app/components/Paragraph';
 
-export type Props = {
-  pageData: {
-    mostReadData: MostReadData;
-  };
-};
+interface PageData {
+  mostReadData?: MostReadData | null;
+}
+
+interface OfflinePageProps {
+  pageData?: PageData | null;
+}
 
-const OfflinePage = ({ pageData }: Props) => {
+const OfflinePage = ({ pageData }: OfflinePageProps) => {
   const { service, dir, script } = use(ServiceContext);
 
-  // Track offline page visit (sets flag in localStorage, PWA only)
   useOfflinePageFlag();
 
   const title = 'You are offline';
@@ -25,7 +29,7 @@ const OfflinePage = ({ pageData }: Props) => {
     'Refresh the page when your connection is restored',
   ];
 
-  console.log({ pageData });
+  const mostReadData = pageData?.mostReadData;
 
   return (
     <>
@@ -33,16 +37,36 @@ const OfflinePage = ({ pageData }: Props) => {
         <title>{title}</title>
         <meta name="robots" content="noindex,nofollow" />
       </Helmet>
-      <ErrorMain
-        statusCode={null}
-        title={title}
-        message={message}
-        solutions={solutions}
-        callToActionLinkText=""
-        callToActionLinkUrl=""
-        script={script}
-        service={service}
-      />
+
+      {mostReadData?.items?.length ? (
+        <main style={{ margin: '0 auto', maxWidth: '63rem', padding: '1rem' }}>
+          <Heading level={1} style={{ margin: '1rem 0' }}>
+            {title}
+          </Heading>
+          <Paragraph size="bodyCopy" style={{ margin: '1rem 0' }}>
+            {message}
+          </Paragraph>
+          <Heading level={3} style={{ margin: '1rem 0' }}>
+            Most read articles
+          </Heading>
+          <MostRead
+            data={mostReadData}
+            columnLayout="twoColumn"
+            size="default"
+          />
+        </main>
+      ) : (
+        <ErrorMain
+          statusCode={null}
+          title={title}
+          message={message}
+          solutions={solutions}
+          callToActionLinkText=""
+          callToActionLinkUrl=""
+          script={script}
+          service={service}
+        />
+      )}
     </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/offline/index.page.tsx b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
index 22a03f300d0..9d98cf54fe5 100644
--- a/ws-nextjs-app/pages/[service]/offline/index.page.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
@@ -32,7 +32,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
       resolvedUrl: `/${service}/popular/read`,
       service,
       variant: variant || undefined,
-      rendererEnv,
+      rendererEnv: rendererEnv || 'live',
     });
 
     mostReadData = data?.pageData ?? null;

From 8612487471f1aaa11eb4ccce2666dce52885c03f Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Thu, 22 Jan 2026 10:56:49 +0200
Subject: [PATCH 03/14] chore: revert deleted attributes

---
 ws-nextjs-app/pages/[service]/offline/index.page.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ws-nextjs-app/pages/[service]/offline/index.page.tsx b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
index 9d98cf54fe5..ee154a523cb 100644
--- a/ws-nextjs-app/pages/[service]/offline/index.page.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
@@ -5,6 +5,7 @@ import PageDataParams from '#app/models/types/pageDataParams';
 import deriveVariant from '#nextjs/utilities/deriveVariant';
 import logResponseTime from '#server/utilities/logResponseTime';
 import getPageData from '#nextjs/utilities/pageRequests/getPageData';
+import extractHeaders from '#src/server/utilities/extractHeaders';
 
 const OfflinePage = dynamic(() => import('./OfflinePage'));
 
@@ -50,6 +51,9 @@ export const getServerSideProps: GetServerSideProps = async context => {
       service,
       status: 200,
       variant: variant || null,
+      timeOnServer: Date.now(),
+      pathname: `/${service}/offline`,
+      ...extractHeaders(context.req.headers),
     },
   };
 };

From 64d71ae88068aab8c103440d57c99f0315d75162 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Wed, 25 Feb 2026 16:49:32 +0200
Subject: [PATCH 04/14] wip: initial caching logic

---
 public/sw.js                                  | 178 +++++++++++++++++-
 src/app/components/MostRead/index.tsx         |   2 +-
 src/app/components/MostRead/types.ts          |  36 ++--
 .../getMostReadOfflineData/index.tsx          |  41 ++++
 .../routes/utils/fetchDataFromBFF/index.ts    |   1 +
 .../pages/[service]/offline/OfflinePage.tsx   |  16 +-
 .../pages/[service]/offline/index.page.tsx    |   4 +-
 7 files changed, 250 insertions(+), 28 deletions(-)
 create mode 100644 src/app/lib/utilities/getMostReadOfflineData/index.tsx

diff --git a/public/sw.js b/public/sw.js
index b847b2ca1a2..39d146cd184 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -1,3 +1,5 @@
+// TEMP
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable no-useless-return */
 /* eslint-disable import/prefer-default-export */
 /* eslint-disable no-unused-vars */
@@ -10,15 +12,88 @@ const cacheName = 'simorghCache_v4';
 const pwaClients = new Map();
 let isPWADeviceOffline = false;
 
+// --- IndexedDB helpers ---
+const DB_NAME = 'simorghOfflineDB';
+const STORE_NAME = 'cachedArticles';
+const MAX_ARTICLE_AGE_MS = 72 * 60 * 60 * 1000; // 72 hours
+const REFRESH_INTERVAL_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+const openDB = () =>
+  new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 1);
+    req.onupgradeneeded = e => {
+      const db = e.target.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: 'url' });
+      }
+      if (!db.objectStoreNames.contains('meta')) {
+        db.createObjectStore('meta', { keyPath: 'key' });
+      }
+    };
+    req.onsuccess = e => resolve(e.target.result);
+    req.onerror = e => reject(e.target.error);
+  });
+
+const dbGet = async (store, key) => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(store, 'readonly');
+    const req = tx.objectStore(store).get(key);
+    req.onsuccess = e => resolve(e.target.result);
+    req.onerror = e => reject(e.target.error);
+  });
+};
+
+const dbPut = async (store, value) => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(store, 'readwrite');
+    const req = tx.objectStore(store).put(value);
+    req.onsuccess = () => resolve();
+    req.onerror = e => reject(e.target.error);
+  });
+};
+
+const dbGetAll = async store => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(store, 'readonly');
+    const req = tx.objectStore(store).getAll();
+    req.onsuccess = e => resolve(e.target.result);
+    req.onerror = e => reject(e.target.error);
+  });
+};
+
+const dbDelete = async (store, key) => {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(store, 'readwrite');
+    const req = tx.objectStore(store).delete(key);
+    req.onsuccess = () => resolve();
+    req.onerror = e => reject(e.target.error);
+  });
+};
+
 // --------------------
 // Helper Functions
 // --------------------
 
+const loggerEnabled = true;
+const generatedTimestamp = new Date().toISOString();
+
+const logger = (...args) => {
+  if (!loggerEnabled) return;
+  // eslint-disable-next-line no-console
+  console.log(`[SW ${version}]`, ...args);
+};
+
 const getServiceFromUrl = url => new URL(url).pathname.split('/')[1];
 const getOfflinePageUrl = service => `/${service}/offline`;
 
 const cacheResource = async (cache, url) => {
+  logger('cacheResource', { url });
   try {
+    // TODO: temp CORS
     const response = await fetch(url);
     if (response.ok) await cache.put(url, response.clone());
     return response;
@@ -51,6 +126,90 @@ const cacheOfflinePageAndResources = async service => {
   await Promise.allSettled(resources.map(url => cacheResource(cache, url)));
 };
 
+// TODO: merge with cacheOfflinePageAndResources?
+const getMostReadArticlesFromOfflinePage = async service => {
+  const offlinePageUrl = new URL(
+    getOfflinePageUrl(service),
+    self.location.origin,
+  ).href;
+
+  const resp = await fetch(offlinePageUrl);
+  if (!resp.ok) return [];
+
+  const html = await resp.text();
+
+  const match = html.match(
+    /<script[^>]*id="most-read-data"[^>]*>(.+?)<\/script>/s,
+  );
+
+  if (!match) return [];
+
+  try {
+    return JSON.parse(match[1]);
+  } catch {
+    return [];
+  }
+};
+
+const cacheArticles = async service => {
+  // Rate-limit: only run once per 24h
+  const lastSync = await dbGet('meta', 'lastArticleSync');
+  const now = Date.now();
+  logger('📌 cacheArticles called', { lastSync });
+
+  // TODO: Temporarily commenting it out
+  // if (lastSync && now - lastSync.value < REFRESH_INTERVAL_MS) return;
+
+  const mostRead = await getMostReadArticlesFromOfflinePage(service);
+  logger(`👀 fetched:`, { mostRead });
+
+  const mostReadArticles = mostRead?.items;
+  if (!mostReadArticles.length) return;
+
+  const cache = await caches.open(cacheName);
+  const mostReadUrls = new Set(mostReadArticles.map(a => a.href));
+
+  console.log({ mostReadUrls });
+
+  // Delete stale articles not in most-read and older than 72h
+  const cachedArticleMeta = await dbGetAll(STORE_NAME);
+  // eslint-disable-next-line no-restricted-syntax
+  for (const entry of cachedArticleMeta) {
+    const isTooOld = now - entry.cachedAt > MAX_ARTICLE_AGE_MS;
+    const isNotMostRead = !mostReadUrls.has(entry.href);
+    if (isTooOld && isNotMostRead) {
+      // eslint-disable-next-line no-await-in-loop
+      await cache.delete(entry.href);
+      // eslint-disable-next-line no-await-in-loop
+      await dbDelete(STORE_NAME, entry.href);
+    }
+  }
+
+  // Cache new or updated articles
+  for (const article of mostReadArticles) {
+    logger('article', { article });
+
+    // eslint-disable-next-line no-await-in-loop
+    const existing = await dbGet(STORE_NAME, article.href);
+    const needsUpdate =
+      !existing || // not cached yet
+      (article.lastUpdated && existing.lastUpdated !== article.lastUpdated); // stale
+
+    if (needsUpdate) {
+      // eslint-disable-next-line no-await-in-loop
+      await cacheResource(cache, article.href);
+      // eslint-disable-next-line no-await-in-loop
+      await dbPut(STORE_NAME, {
+        url: article.href,
+        lastUpdated: article.lastUpdated,
+        cachedAt: now,
+      });
+    }
+  }
+
+  await dbPut('meta', { key: 'lastArticleSync', value: now });
+};
+
 const CACHEABLE_FILES = [
   // Reverb
   'https://mybbc-analytics.files.bbci.co.uk/reverb-client-js/reverb-3.11.0.js',
@@ -87,6 +246,8 @@ self.addEventListener('activate', event => {
 
 // -------Message Event-------------
 self.addEventListener('message', async event => {
+  logger(`${generatedTimestamp} Message event`);
+
   if (event.data?.type === 'PWA_STATUS') {
     const clientId = event.source.id;
     const { isPWA } = event.data;
@@ -95,6 +256,7 @@ self.addEventListener('message', async event => {
       pwaClients.set(clientId, true);
       const service = getServiceFromUrl(event.source.url);
       await cacheOfflinePageAndResources(service);
+      await cacheArticles(service);
     }
   }
 });
@@ -143,6 +305,7 @@ const fetchEventHandler = async event => {
     );
   } else if (isNavigationMode) {
     const { url } = event.request;
+    logger('isNavigationMode', { url });
     event.respondWith(
       (async () => {
         const client = await self.clients.get(event.clientId);
@@ -150,22 +313,29 @@ const fetchEventHandler = async event => {
         const cache = await caches.open(cacheName);
 
         const getOfflineFallback = async () => {
+          logger('getOfflineFallback', { url });
           if (isPWA) {
             const service = getServiceFromUrl(url);
+
+            // Check if this IS a cached article (not the offline page)
+            const cachedArticle = await cache.match(url);
+            if (cachedArticle) {
+              logger('🎉 cachedArticle', { url });
+              isPWADeviceOffline = true;
+              return cachedArticle;
+            }
+
+            // Fallback to offline page
             const offlineUrl = new URL(
               getOfflinePageUrl(service),
               self.location.origin,
             ).href;
-
             const cachedOffline = await cache.match(offlineUrl);
-
             if (cachedOffline) {
               isPWADeviceOffline = true;
               return cachedOffline;
             }
           }
-
-          // Fallback to browser default behavior
           return Response.error();
         };
 
diff --git a/src/app/components/MostRead/index.tsx b/src/app/components/MostRead/index.tsx
index 637ef4944ad..aac26163605 100644
--- a/src/app/components/MostRead/index.tsx
+++ b/src/app/components/MostRead/index.tsx
@@ -128,7 +128,7 @@ const MostRead = ({
   }
 
   // If not in local environment, use the BFF, otherwise use fixture data
-  const isBff = !isLocal();
+  const isBff = false;
 
   const endpoint = getMostReadEndpoint({
     service,
diff --git a/src/app/components/MostRead/types.ts b/src/app/components/MostRead/types.ts
index 25d244e0567..10abeb7b681 100644
--- a/src/app/components/MostRead/types.ts
+++ b/src/app/components/MostRead/types.ts
@@ -76,25 +76,27 @@ export interface OptimoMostReadRecord {
   };
 }
 
+export type MostReadDataItem = {
+  id: string;
+  rank: number;
+  href: string;
+  title: string;
+  timestamp: number | string;
+  images?: {
+    defaultPromoImage: OptimoBlock[];
+  };
+  indexImage?: {
+    width: number;
+    height: number;
+    altText: string;
+    originCode: string;
+    locator: string;
+  };
+};
+
 export interface MostReadData {
   generated?: string;
   lastRecordTimeStamp: string;
   firstRecordTimeStamp?: string;
-  items: {
-    id: string;
-    rank: number;
-    href: string;
-    title: string;
-    timestamp: number | string;
-    images?: {
-      defaultPromoImage: OptimoBlock[];
-    };
-    indexImage?: {
-      width: number;
-      height: number;
-      altText: string;
-      originCode: string;
-      locator: string;
-    };
-  }[];
+  items: MostReadDataItem[];
 }
diff --git a/src/app/lib/utilities/getMostReadOfflineData/index.tsx b/src/app/lib/utilities/getMostReadOfflineData/index.tsx
new file mode 100644
index 00000000000..add17fd94ab
--- /dev/null
+++ b/src/app/lib/utilities/getMostReadOfflineData/index.tsx
@@ -0,0 +1,41 @@
+import { MostReadData } from '#app/components/MostRead/types';
+import getOriginContext from '#app/contexts/RequestContext/getOriginContext';
+import isLive from '../isLive';
+
+type MostReadDataItem = MostReadData['items'][number];
+
+type MostReadOfflineData = Pick<
+  MostReadData,
+  'generated' | 'lastRecordTimeStamp' | 'firstRecordTimeStamp'
+> & {
+  items: Pick<MostReadDataItem, 'href' | 'title' | 'timestamp'>[];
+};
+
+const buildArticleUrl = (href: string): string => {
+  const { origin } = getOriginContext(null);
+  const url = new URL(href);
+
+  // TODO: To be confirmed the exact query params
+  url.searchParams.set('mode', 'offline');
+
+  if (!isLive()) {
+    url.host = new URL(origin).host;
+    url.protocol = new URL(origin).protocol;
+    url.searchParams.set('renderer_env', 'live');
+  }
+
+  return url.toString();
+};
+
+const getMostReadOfflineData = (data: MostReadData): MostReadOfflineData => ({
+  generated: data.generated,
+  lastRecordTimeStamp: data.lastRecordTimeStamp,
+  firstRecordTimeStamp: data.firstRecordTimeStamp,
+  items: data.items.map(({ href, title, timestamp }) => ({
+    href: buildArticleUrl(href),
+    title,
+    timestamp,
+  })),
+});
+
+export default getMostReadOfflineData;
diff --git a/src/app/routes/utils/fetchDataFromBFF/index.ts b/src/app/routes/utils/fetchDataFromBFF/index.ts
index 61f4af93712..a6dcbe88f04 100644
--- a/src/app/routes/utils/fetchDataFromBFF/index.ts
+++ b/src/app/routes/utils/fetchDataFromBFF/index.ts
@@ -36,6 +36,7 @@ export default async ({
   const isLocal = !environment || environment === 'local';
   const optHeaders = isLocal ? undefined : { 'ctx-service-env': environment };
 
+  // TODO
   const fetchUrl = constructPageFetchUrl({
     pathname,
     pageType,
diff --git a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
index ac839b52a16..403acac2ada 100644
--- a/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/OfflinePage.tsx
@@ -7,6 +7,8 @@ import MostRead from '#app/components/MostRead/Canonical';
 import { MostReadData } from '#app/components/MostRead/types';
 import Heading from '#app/components/Heading';
 import Paragraph from '#app/components/Paragraph';
+import serialiseForScript from '#app/lib/utilities/serialiseForScript';
+import getMostReadOfflineData from '#app/lib/utilities/getMostReadOfflineData';
 
 interface PageData {
   mostReadData?: MostReadData | null;
@@ -30,15 +32,23 @@ const OfflinePage = ({ pageData }: OfflinePageProps) => {
   ];
 
   const mostReadData = pageData?.mostReadData;
+  const mostReadOfflineData = mostReadData
+    ? getMostReadOfflineData(mostReadData)
+    : null;
 
   return (
     <>
       <Helmet htmlAttributes={{ dir, lang: service }}>
         <title>{title}</title>
         <meta name="robots" content="noindex,nofollow" />
+        {mostReadData && (
+          <script id="most-read-data" type="application/json">
+            {serialiseForScript(mostReadOfflineData)}
+          </script>
+        )}
       </Helmet>
 
-      {mostReadData?.items?.length ? (
+      {mostReadOfflineData?.items?.length ? (
         <main style={{ margin: '0 auto', maxWidth: '63rem', padding: '1rem' }}>
           <Heading level={1} style={{ margin: '1rem 0' }}>
             {title}
@@ -46,11 +56,11 @@ const OfflinePage = ({ pageData }: OfflinePageProps) => {
           <Paragraph size="bodyCopy" style={{ margin: '1rem 0' }}>
             {message}
           </Paragraph>
-          <Heading level={3} style={{ margin: '1rem 0' }}>
+          <Heading level={3} style={{ margin: '1rem 0 1.5rem' }}>
             Most read articles
           </Heading>
           <MostRead
-            data={mostReadData}
+            data={mostReadOfflineData as MostReadData} // TODO - fix TS
             columnLayout="twoColumn"
             size="default"
           />
diff --git a/ws-nextjs-app/pages/[service]/offline/index.page.tsx b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
index 65a3955fc1e..4ad6b050ad5 100644
--- a/ws-nextjs-app/pages/[service]/offline/index.page.tsx
+++ b/ws-nextjs-app/pages/[service]/offline/index.page.tsx
@@ -44,9 +44,6 @@ export const getServerSideProps: GetServerSideProps = async context => {
 
   return {
     props: {
-      pageData: {
-        mostReadData,
-      },
       pageType: OFFLINE_PAGE,
       service,
       status: 200,
@@ -55,6 +52,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
       pathname: `/${service}/offline`,
       ...extractHeaders(context.req.headers),
       pageData: {
+        mostReadData,
         metadata: {
           type: OFFLINE_PAGE,
         },

From d1262a7501a275dc45407c3ee03ba898c27d4218 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Thu, 26 Feb 2026 18:04:55 +0200
Subject: [PATCH 05/14] feat: cache article resources

---
 public/sw.js                          | 60 ++++++++++++++-------------
 src/app/components/MostRead/index.tsx |  1 -
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index 39d146cd184..bc52429cb0a 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -102,16 +102,10 @@ const cacheResource = async (cache, url) => {
   }
 };
 
-const cacheOfflinePageAndResources = async service => {
-  const cache = await caches.open(cacheName);
-  const offlinePageUrl = new URL(
-    getOfflinePageUrl(service),
-    self.location.origin,
-  ).href;
-
-  if (await cache.match(offlinePageUrl)) return;
+const cachePageAndResources = async (cache, url) => {
+  if (await cache.match(url)) return;
 
-  const resp = await cacheResource(cache, offlinePageUrl);
+  const resp = await cacheResource(cache, url);
   if (!resp || !resp.ok) return;
 
   const html = await resp.text();
@@ -123,36 +117,45 @@ const cacheOfflinePageAndResources = async service => {
   );
 
   const resources = [...scriptSrcs, ...linkHrefs].filter(Boolean);
-  await Promise.allSettled(resources.map(url => cacheResource(cache, url)));
+  await Promise.allSettled(resources.map(r => cacheResource(cache, r)));
+};
+
+const cacheOfflinePageAndResources = async service => {
+  const cache = await caches.open(cacheName);
+  const offlinePageUrl = new URL(
+    getOfflinePageUrl(service),
+    self.location.origin,
+  ).href;
+
+  await cachePageAndResources(cache, offlinePageUrl);
 };
 
-// TODO: merge with cacheOfflinePageAndResources?
-const getMostReadArticlesFromOfflinePage = async service => {
+const getMostReadDataFromOfflinePage = async service => {
   const offlinePageUrl = new URL(
     getOfflinePageUrl(service),
     self.location.origin,
   ).href;
 
-  const resp = await fetch(offlinePageUrl);
-  if (!resp.ok) return [];
+  const cache = await caches.open(cacheName);
+  const cachedResponse = await cache.match(offlinePageUrl);
+  if (!cachedResponse) return null;
 
-  const html = await resp.text();
+  const html = await cachedResponse.text();
 
   const match = html.match(
     /<script[^>]*id="most-read-data"[^>]*>(.+?)<\/script>/s,
   );
-
-  if (!match) return [];
+  if (!match) return null;
 
   try {
     return JSON.parse(match[1]);
   } catch {
-    return [];
+    return null;
   }
 };
 
+// Main Article caching logic
 const cacheArticles = async service => {
-  // Rate-limit: only run once per 24h
   const lastSync = await dbGet('meta', 'lastArticleSync');
   const now = Date.now();
   logger('📌 cacheArticles called', { lastSync });
@@ -160,20 +163,17 @@ const cacheArticles = async service => {
   // TODO: Temporarily commenting it out
   // if (lastSync && now - lastSync.value < REFRESH_INTERVAL_MS) return;
 
-  const mostRead = await getMostReadArticlesFromOfflinePage(service);
+  const mostRead = await getMostReadDataFromOfflinePage(service);
   logger(`👀 fetched:`, { mostRead });
 
   const mostReadArticles = mostRead?.items;
-  if (!mostReadArticles.length) return;
+  if (!mostReadArticles?.length) return;
 
   const cache = await caches.open(cacheName);
   const mostReadUrls = new Set(mostReadArticles.map(a => a.href));
 
-  console.log({ mostReadUrls });
-
   // Delete stale articles not in most-read and older than 72h
   const cachedArticleMeta = await dbGetAll(STORE_NAME);
-  // eslint-disable-next-line no-restricted-syntax
   for (const entry of cachedArticleMeta) {
     const isTooOld = now - entry.cachedAt > MAX_ARTICLE_AGE_MS;
     const isNotMostRead = !mostReadUrls.has(entry.href);
@@ -185,23 +185,24 @@ const cacheArticles = async service => {
     }
   }
 
-  // Cache new or updated articles
+  // Cache new or updated articles including their scripts and stylesheets
   for (const article of mostReadArticles) {
     logger('article', { article });
 
     // eslint-disable-next-line no-await-in-loop
     const existing = await dbGet(STORE_NAME, article.href);
     const needsUpdate =
-      !existing || // not cached yet
-      (article.lastUpdated && existing.lastUpdated !== article.lastUpdated); // stale
+      !existing ||
+      (article.timestamp && existing.timestamp !== article.timestamp);
 
     if (needsUpdate) {
+      const articleUrl = new URL(article.href, self.location.origin).href;
       // eslint-disable-next-line no-await-in-loop
-      await cacheResource(cache, article.href);
+      await cachePageAndResources(cache, articleUrl);
       // eslint-disable-next-line no-await-in-loop
       await dbPut(STORE_NAME, {
         url: article.href,
-        lastUpdated: article.lastUpdated,
+        timestamp: article.timestamp,
         cachedAt: now,
       });
     }
@@ -312,6 +313,7 @@ const fetchEventHandler = async event => {
         const isPWA = client && pwaClients.get(client.id);
         const cache = await caches.open(cacheName);
 
+        // TODO: We should also check if article is not outdated here
         const getOfflineFallback = async () => {
           logger('getOfflineFallback', { url });
           if (isPWA) {
diff --git a/src/app/components/MostRead/index.tsx b/src/app/components/MostRead/index.tsx
index aac26163605..2e58cf2634c 100644
--- a/src/app/components/MostRead/index.tsx
+++ b/src/app/components/MostRead/index.tsx
@@ -11,7 +11,6 @@ import { ColumnLayout, Size, MostReadData } from './types';
 import MostReadSection from './Section';
 import MostReadSectionLabel from './Label';
 import { WHITE } from '../ThemeProvider/palette';
-import isLocal from '../../lib/utilities/isLocal';
 import {
   STORY_PAGE,
   CORRESPONDENT_STORY_PAGE,

From 7fd3de94aeec087d2ef3972a9d93f2eebfcd0a4b Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Fri, 27 Feb 2026 15:08:07 +0200
Subject: [PATCH 06/14] fix: revert isLocal

---
 src/app/components/MostRead/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/components/MostRead/index.tsx b/src/app/components/MostRead/index.tsx
index a9ac4a5ed19..0e0b33ba0e0 100644
--- a/src/app/components/MostRead/index.tsx
+++ b/src/app/components/MostRead/index.tsx
@@ -11,6 +11,7 @@ import { ColumnLayout, Size, MostReadData } from './types';
 import MostReadSection from './Section';
 import MostReadSectionLabel from './Label';
 import { WHITE } from '../ThemeProvider/palette';
+import isLocal from '../../lib/utilities/isLocal';
 import {
   STORY_PAGE,
   CORRESPONDENT_STORY_PAGE,
@@ -123,7 +124,7 @@ const MostRead = ({
   }
 
   // If not in local environment, use the BFF, otherwise use fixture data
-  const isBff = false;
+  const isBff = !isLocal();
 
   const endpoint = getMostReadEndpoint({
     service,

From 7bb327bcdaf2276065c12787e25b9f0a9f13e754 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Fri, 27 Feb 2026 17:09:58 +0200
Subject: [PATCH 07/14] feat: detect if offline mode

---
 src/app/components/Image/index.tsx            |  35 +++++-
 src/app/contexts/RequestContext/index.tsx     |   5 +
 src/app/lib/utilities/isOfflineMode/index.tsx |  14 +++
 src/app/pages/ArticlePage/ArticlePage.tsx     | 109 ++++++++++--------
 ws-nextjs-app/pages/_app.page.tsx             |   6 +
 5 files changed, 119 insertions(+), 50 deletions(-)
 create mode 100644 src/app/lib/utilities/isOfflineMode/index.tsx

diff --git a/src/app/components/Image/index.tsx b/src/app/components/Image/index.tsx
index 8c7d0d0a32b..7b029cfa476 100644
--- a/src/app/components/Image/index.tsx
+++ b/src/app/components/Image/index.tsx
@@ -55,11 +55,11 @@ const Image = ({
   hasCaption,
   isPortraitOrientation,
 }: PropsWithChildren<ImageProps>) => {
-  const { pageType, isLite, isAmp } = use(RequestContext);
+  const { pageType, isLite, isAmp, isOfflineMode } = use(RequestContext);
   const [isLoaded, setIsLoaded] = useState(false);
   if (isLite) return null;
 
-  const showPlaceholder = placeholder && !isLoaded;
+  const showPlaceholder = placeholder && (!isLoaded || isOfflineMode);
   const hasDimensions = width && height;
   const hasFixedAspectRatio = !!aspectRatio || !!hasDimensions;
   const [aspectRatioX, aspectRatioY] = aspectRatio ||
@@ -88,6 +88,37 @@ const Image = ({
   };
   const imgSrcSet = getImgSrcSet();
   const imgSizes = getImgSizes();
+
+  // TODO: TBC how the images should be shown
+  if (isOfflineMode) {
+    return (
+      <div
+        className={className}
+        css={theme => [
+          styles.wrapper,
+          hasFixedAspectRatio
+            ? styles.wrapperFixedAspectRatio
+            : styles.wrapperResponsiveRatio,
+          isPortraitOrientation && styles.portraitOrientation,
+          placeholder && [
+            styles.placeholder,
+            {
+              backgroundColor: darkPlaceholder
+                ? theme.palette.SHADOW
+                : theme.palette.LUNAR,
+            },
+          ],
+        ]}
+        style={{
+          paddingBottom: hasFixedAspectRatio ? legacyBrowserAspectRatio : 0,
+          ...(!hasCaption && { overflow: 'hidden' }),
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+
   return (
     <>
       {preload && (
diff --git a/src/app/contexts/RequestContext/index.tsx b/src/app/contexts/RequestContext/index.tsx
index b40d1908c49..29abb701681 100644
--- a/src/app/contexts/RequestContext/index.tsx
+++ b/src/app/contexts/RequestContext/index.tsx
@@ -42,6 +42,7 @@ export type RequestContextProps = {
   country?: string | null;
   nonce?: string | null;
   cspHeader: string | null;
+  isOfflineMode?: boolean;
 };
 
 export const RequestContext = createContext<RequestContextProps>(
@@ -69,6 +70,7 @@ type RequestProviderProps = {
   country?: string | null;
   nonce?: string | null;
   cspHeader?: string | null;
+  isOfflineMode?: boolean;
 };
 
 export const RequestContextProvider = ({
@@ -93,6 +95,7 @@ export const RequestContextProvider = ({
   timeOnServer = null,
   variant = null,
   isUK = null,
+  isOfflineMode = false,
 }: PropsWithChildren<RequestProviderProps>) => {
   let { origin } = getOriginContext(bbcOrigin);
   const env: Environments = getEnv(origin);
@@ -146,6 +149,7 @@ export const RequestContextProvider = ({
       country,
       nonce,
       cspHeader,
+      isOfflineMode,
     }),
     [
       derivedPageType,
@@ -171,6 +175,7 @@ export const RequestContextProvider = ({
       country,
       cspHeader,
       nonce,
+      isOfflineMode,
     ],
   );
 
diff --git a/src/app/lib/utilities/isOfflineMode/index.tsx b/src/app/lib/utilities/isOfflineMode/index.tsx
new file mode 100644
index 00000000000..3ea939ea00c
--- /dev/null
+++ b/src/app/lib/utilities/isOfflineMode/index.tsx
@@ -0,0 +1,14 @@
+import getOriginContext from '#app/contexts/RequestContext/getOriginContext';
+
+const isOfflineMode = (url: string): boolean => {
+  const { origin } = getOriginContext(null);
+
+  try {
+    const mode = new URL(url, origin).searchParams.get('mode');
+    return mode === 'offline';
+  } catch {
+    return false;
+  }
+};
+
+export default isOfflineMode;
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 517b137cffc..ca565158f6a 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -46,6 +46,7 @@ import ArticleLinksBlock from '#app/components/ArticleLinksBlock';
 import Recommendations from '#app/components/Recommendations';
 import ReadTimeArticle from '#app/components/ReadTime';
 import PWAPromotionalBanner from '#app/components/PWAPromotionalBanner';
+import Heading from '#app/components/Heading';
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
@@ -175,7 +176,7 @@ const getContinueReadingButton =
 
 const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const [showAllContent, setShowAllContent] = useState(false);
-  const { isApp, isAmp, isLite } = use(RequestContext);
+  const { isApp, isAmp, isLite, isOfflineMode } = use(RequestContext);
 
   const {
     articleAuthor,
@@ -275,6 +276,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     !isAmp &&
       !isLite &&
       !isApp &&
+      !isOfflineMode &&
       hasContinueReadingBlock &&
       continueReadingButtonToggle,
   );
@@ -348,62 +350,73 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
 
   return (
     <div css={styles.pageWrapper}>
-      {/* EXPERIMENT: PWA Promotional Banner */}
-      {shouldRenderPWAPromotionalBanner && <PWAPromotionalBanner />}
-      <ATIAnalytics atiData={atiData} />
-      <ChartbeatAnalytics
-        sectionName={pageData?.relatedContent?.section?.name}
-        title={headline}
-        authors={authors}
-      />
-      <ComscoreAnalytics />
-      <NielsenAnalytics />
-      <ArticleMetadata
-        articleId={getArticleId(pageData)}
-        title={headline}
-        author={articleAuthor}
-        twitterHandle={articleAuthorTwitterHandle}
-        firstPublished={firstPublished}
-        lastPublished={lastPublished}
-        section={getArticleSection(pageData)}
-        aboutTags={aboutTags}
-        mentionsTags={getMentions(pageData)}
-        lang={getLang(pageData)}
-        description={description}
-        imageLocator={promoImage}
-        imageAltText={promoImageAltText}
-        hasAmpPage={!isTC2Asset}
-      />
-      <LinkedData
-        showAuthor
-        bylineLinkedData={bylineLinkedData}
-        type={
-          !isPGL
-            ? categoryName(isTrustProjectParticipant, taggings, formats)
-            : 'Article'
-        }
-        seoTitle={headline}
-        headline={headline}
-        description={description}
-        datePublished={firstPublished}
-        dateModified={lastPublished}
-        aboutTags={aboutTags}
-        imageLocator={promoImage}
-      />
-      {allowAdvertising && (
-        <AdContainer slotType="leaderboard" adcampaign={adcampaign} />
+      {!isOfflineMode && (
+        <>
+          {/* EXPERIMENT: PWA Promotional Banner */}
+          {shouldRenderPWAPromotionalBanner && <PWAPromotionalBanner />}
+          <ATIAnalytics atiData={atiData} />
+          <ChartbeatAnalytics
+            sectionName={pageData?.relatedContent?.section?.name}
+            title={headline}
+            authors={authors}
+          />
+          <ComscoreAnalytics />
+          <NielsenAnalytics />
+          <ArticleMetadata
+            articleId={getArticleId(pageData)}
+            title={headline}
+            author={articleAuthor}
+            twitterHandle={articleAuthorTwitterHandle}
+            firstPublished={firstPublished}
+            lastPublished={lastPublished}
+            section={getArticleSection(pageData)}
+            aboutTags={aboutTags}
+            mentionsTags={getMentions(pageData)}
+            lang={getLang(pageData)}
+            description={description}
+            imageLocator={promoImage}
+            imageAltText={promoImageAltText}
+            hasAmpPage={!isTC2Asset}
+          />
+          <LinkedData
+            showAuthor
+            bylineLinkedData={bylineLinkedData}
+            type={
+              !isPGL
+                ? categoryName(isTrustProjectParticipant, taggings, formats)
+                : 'Article'
+            }
+            seoTitle={headline}
+            headline={headline}
+            description={description}
+            datePublished={firstPublished}
+            dateModified={lastPublished}
+            aboutTags={aboutTags}
+            imageLocator={promoImage}
+          />
+          {allowAdvertising && (
+            <AdContainer slotType="leaderboard" adcampaign={adcampaign} />
+          )}
+          <ElectionBanner aboutTags={aboutTags} taggings={taggings} />
+        </>
       )}
-      <ElectionBanner aboutTags={aboutTags} taggings={taggings} />
       <div css={styles.grid}>
         <div css={!isPGL ? styles.primaryColumn : styles.pglColumn}>
           <main css={styles.mainContent} role="main">
+            {isOfflineMode && (
+              <Heading level={4} style={{ margin: '1rem 0' }}>
+                ⚠️ This is the offline mode.⚠️
+              </Heading>
+            )}
             <Blocks
               blocks={articleBlocks}
               componentsToRender={componentsToRender}
             />
-            <OptimizelyPageMetrics trackPageComplete />
+            {!isOfflineMode && <OptimizelyPageMetrics trackPageComplete />}
           </main>
-          <OptimizelyPageMetrics trackPageView trackPageDepth trackVisit />
+          {!isOfflineMode && (
+            <OptimizelyPageMetrics trackPageView trackPageDepth trackVisit />
+          )}
           {showTopics && (
             <RelatedTopics
               css={[
diff --git a/ws-nextjs-app/pages/_app.page.tsx b/ws-nextjs-app/pages/_app.page.tsx
index d35a0e1f739..3688ffa74da 100644
--- a/ws-nextjs-app/pages/_app.page.tsx
+++ b/ws-nextjs-app/pages/_app.page.tsx
@@ -31,6 +31,7 @@ import { AccountProvider } from '#app/contexts/AccountContext';
 import getIdctaConfig from '#app/lib/idcta/getIdctaConfig';
 import { IdctaConfig } from '#app/models/types/account';
 import fetchConfig from '#app/lib/utilities/fetchConfig';
+import isOffline from '#app/lib/utilities/isOfflineMode';
 
 interface Props {
   pageProps: {
@@ -62,6 +63,7 @@ interface Props {
     isUK?: boolean;
     country?: string | null;
     idctaConfig: IdctaConfig | null;
+    isOfflineMode: boolean;
   };
 }
 
@@ -72,6 +74,7 @@ export default class CustomApp extends App<Props> {
     const { asPath = '' } = ctx;
 
     const { isApp, isAmp, isLite } = getPathExtension(asPath);
+    const isOfflineMode = isOffline(asPath);
 
     const { service, variant } = parseRoute(asPath) as {
       service: Services;
@@ -118,6 +121,7 @@ export default class CustomApp extends App<Props> {
         isApp,
         isAmp,
         isLite,
+        isOfflineMode,
         isNextJs: true,
         serverSideExperiments,
         toggles,
@@ -154,6 +158,7 @@ export default class CustomApp extends App<Props> {
       country,
       idctaConfig = null,
       navItems,
+      isOfflineMode,
     } = pageProps;
 
     const { metadata: { atiAnalytics = undefined } = {} } = pageData ?? {};
@@ -178,6 +183,7 @@ export default class CustomApp extends App<Props> {
             isAmp={isAmp}
             isApp={isApp}
             isLite={isLite}
+            isOfflineMode={isOfflineMode}
             pageType={pageType}
             service={service}
             statusCode={status}

From 79ab18caad8b20a87712f0c71c33d7e819bd7af8 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Fri, 27 Feb 2026 17:23:55 +0200
Subject: [PATCH 08/14] wip: isOfflineMode flag

---
 src/app/components/PageLayoutWrapper/index.tsx | 5 +++--
 src/app/pages/ArticlePage/ArticlePage.tsx      | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/components/PageLayoutWrapper/index.tsx b/src/app/components/PageLayoutWrapper/index.tsx
index c40384d7f81..d3b69ac15ea 100644
--- a/src/app/components/PageLayoutWrapper/index.tsx
+++ b/src/app/components/PageLayoutWrapper/index.tsx
@@ -50,12 +50,13 @@ const PageLayoutWrapper = ({
   navItems,
 }: PropsWithChildren<Props>) => {
   const { service } = use(ServiceContext);
-  const { isLite, isAmp, nonce, cspHeader } = use(RequestContext);
+  const { isLite, isAmp, nonce, cspHeader, isOfflineMode } =
+    use(RequestContext);
 
   const isErrorPage = ![200].includes(status) || !status;
   const pageType = pageData?.metadata?.type;
   const reportingPageType = pageType?.replace(/ /g, '');
-  const isOfflinePage = pageType === OFFLINE_PAGE;
+  const isOfflinePage = pageType === OFFLINE_PAGE || isOfflineMode;
   let wordCount: wordCountType = 0;
 
   if (pageType === 'article') {
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index ca565158f6a..b4a54e20f53 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -348,6 +348,9 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const shouldRenderPWAPromotionalBanner =
     !isTopBarOJsEnabled || !pageData?.secondaryColumn?.topStories?.length;
 
+  // eslint-disable-next-line no-console
+  console.log(`📌 ArticlePage`, { isOfflineMode });
+
   return (
     <div css={styles.pageWrapper}>
       {!isOfflineMode && (

From 98cbf29f4e1c7582cd9a75af5c761ad965b5dea7 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Mon, 2 Mar 2026 10:39:34 +0200
Subject: [PATCH 09/14] feat: add feature toggle

---
 src/app/lib/config/toggles/localConfig.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/lib/config/toggles/localConfig.js b/src/app/lib/config/toggles/localConfig.js
index 28dc12f62e4..c56bea6161e 100644
--- a/src/app/lib/config/toggles/localConfig.js
+++ b/src/app/lib/config/toggles/localConfig.js
@@ -50,6 +50,10 @@ export default {
   nielsenAnalytics: {
     enabled: true,
   },
+  offlineArticle: {
+    enabled: true,
+    value: 'mundo|hindi|arabic',
+  },
   onDemandRadioSchedule: {
     enabled: true,
   },

From e3c16c13b5cf392cfc509a91fb2525a46352732a Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Mon, 2 Mar 2026 15:26:48 +0200
Subject: [PATCH 10/14] feat: add offlineArticle feature toggle

---
 public/sw.js                             |  9 +++++++--
 src/app/hooks/useSendPWAStatus/index.tsx | 18 ++++++++++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index bc52429cb0a..a25140b372e 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -251,13 +251,18 @@ self.addEventListener('message', async event => {
 
   if (event.data?.type === 'PWA_STATUS') {
     const clientId = event.source.id;
-    const { isPWA } = event.data;
+    const { isPWA, isOfflineArticleEnabled } = event.data;
 
     if (isPWA) {
       pwaClients.set(clientId, true);
       const service = getServiceFromUrl(event.source.url);
       await cacheOfflinePageAndResources(service);
-      await cacheArticles(service);
+
+      logger({ isOfflineArticleEnabled });
+
+      if (isOfflineArticleEnabled) {
+        await cacheArticles(service);
+      }
     }
   }
 });
diff --git a/src/app/hooks/useSendPWAStatus/index.tsx b/src/app/hooks/useSendPWAStatus/index.tsx
index 540d889ed25..43e0a0fc87c 100644
--- a/src/app/hooks/useSendPWAStatus/index.tsx
+++ b/src/app/hooks/useSendPWAStatus/index.tsx
@@ -1,8 +1,18 @@
-import { useEffect } from 'react';
+import { use, useEffect } from 'react';
+import useToggle from '#app/hooks/useToggle';
+import isLocal from '#app/lib/utilities/isLocal';
+import { ServiceContext } from '#contexts/ServiceContext';
 
 const useSendPWAStatus = (isPWA: boolean) => {
+  const { service } = use(ServiceContext);
+  const { enabled, value } = useToggle('offlineArticle');
+
+  const isOfflineArticleEnabled =
+    enabled &&
+    (isLocal() ? value?.toString().split('|').includes(service) : true);
+
   useEffect(() => {
-    // Service workers not available - exit .
+    // Service workers not available - exit.
     if (typeof window === 'undefined' || !navigator.serviceWorker) {
       return;
     }
@@ -14,13 +24,13 @@ const useSendPWAStatus = (isPWA: boolean) => {
         sw.controller.postMessage({
           type: 'PWA_STATUS',
           isPWA,
+          isOfflineArticleEnabled,
         });
       }
     };
 
     const sw = navigator.serviceWorker;
 
-    // if SW ready
     if (sw.ready && typeof sw.ready.then === 'function') {
       sw.ready.then(sendPWAStatus);
     }
@@ -32,7 +42,7 @@ const useSendPWAStatus = (isPWA: boolean) => {
     return () => {
       sw.removeEventListener('controllerchange', sendPWAStatus);
     };
-  }, [isPWA]);
+  }, [isPWA, isOfflineArticleEnabled]);
 };
 
 export default useSendPWAStatus;

From fa4426dddf350fc2e1b1dcaaea358bb7e070f5b0 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Mon, 2 Mar 2026 17:46:11 +0200
Subject: [PATCH 11/14] feat: improve feature toggle

---
 public/sw.js                             | 53 ++++++++++++++++--------
 src/app/hooks/useSendPWAStatus/index.tsx |  7 +++-
 2 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index a25140b372e..95bdaef7778 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -247,18 +247,20 @@ self.addEventListener('activate', event => {
 
 // -------Message Event-------------
 self.addEventListener('message', async event => {
-  logger(`${generatedTimestamp} Message event`);
-
   if (event.data?.type === 'PWA_STATUS') {
-    const clientId = event.source.id;
-    const { isPWA, isOfflineArticleEnabled } = event.data;
+    const { isPWA, offlineArticle } = event.data;
+    const { isEnabled: isOfflineArticleEnabled, service } =
+      offlineArticle ?? {};
 
     if (isPWA) {
-      pwaClients.set(clientId, true);
-      const service = getServiceFromUrl(event.source.url);
-      await cacheOfflinePageAndResources(service);
+      pwaClients.set(event.source.id, true);
+
+      await dbPut('meta', {
+        key: `offlineArticleEnabled_${service}`,
+        value: !!isOfflineArticleEnabled,
+      });
 
-      logger({ isOfflineArticleEnabled });
+      await cacheOfflinePageAndResources(service);
 
       if (isOfflineArticleEnabled) {
         await cacheArticles(service);
@@ -318,21 +320,37 @@ const fetchEventHandler = async event => {
         const isPWA = client && pwaClients.get(client.id);
         const cache = await caches.open(cacheName);
 
-        // TODO: We should also check if article is not outdated here
         const getOfflineFallback = async () => {
-          logger('getOfflineFallback', { url });
           if (isPWA) {
             const service = getServiceFromUrl(url);
 
-            // Check if this IS a cached article (not the offline page)
-            const cachedArticle = await cache.match(url);
-            if (cachedArticle) {
-              logger('🎉 cachedArticle', { url });
-              isPWADeviceOffline = true;
-              return cachedArticle;
+            const offlineArticleMeta = await dbGet(
+              'meta',
+              `offlineArticleEnabled_${service}`,
+            );
+            const isOfflineArticleEnabled = offlineArticleMeta?.value ?? false;
+
+            if (isOfflineArticleEnabled) {
+              const cachedArticle = await cache.match(url);
+
+              if (cachedArticle) {
+                // Check article is not outdated before serving
+                const articleMeta = await dbGet(STORE_NAME, url);
+                const isOutdated =
+                  !articleMeta ||
+                  Date.now() - articleMeta.cachedAt > MAX_ARTICLE_AGE_MS;
+
+                if (!isOutdated) {
+                  logger('🎉 cachedArticle', { url });
+                  isPWADeviceOffline = true;
+                  return cachedArticle;
+                }
+
+                logger('⚠️ cachedArticle is outdated, skipping', { url });
+              }
             }
 
-            // Fallback to offline page
+            // Offline page fallback is always available regardless of toggle
             const offlineUrl = new URL(
               getOfflinePageUrl(service),
               self.location.origin,
@@ -343,6 +361,7 @@ const fetchEventHandler = async event => {
               return cachedOffline;
             }
           }
+          // If offline page/article not available, return error response
           return Response.error();
         };
 
diff --git a/src/app/hooks/useSendPWAStatus/index.tsx b/src/app/hooks/useSendPWAStatus/index.tsx
index 43e0a0fc87c..6c512f85325 100644
--- a/src/app/hooks/useSendPWAStatus/index.tsx
+++ b/src/app/hooks/useSendPWAStatus/index.tsx
@@ -24,7 +24,10 @@ const useSendPWAStatus = (isPWA: boolean) => {
         sw.controller.postMessage({
           type: 'PWA_STATUS',
           isPWA,
-          isOfflineArticleEnabled,
+          offlineArticle: {
+            isEnabled: isOfflineArticleEnabled,
+            service,
+          },
         });
       }
     };
@@ -42,7 +45,7 @@ const useSendPWAStatus = (isPWA: boolean) => {
     return () => {
       sw.removeEventListener('controllerchange', sendPWAStatus);
     };
-  }, [isPWA, isOfflineArticleEnabled]);
+  }, [isPWA, isOfflineArticleEnabled, service]);
 };
 
 export default useSendPWAStatus;

From 05416efd8a127607b0e53eb986cebd0312212bc2 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Mon, 2 Mar 2026 18:00:02 +0200
Subject: [PATCH 12/14] feat: improve cacheArticles

---
 public/sw.js | 48 +++++++++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index 95bdaef7778..2d6b654c6a1 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -154,7 +154,6 @@ const getMostReadDataFromOfflinePage = async service => {
   }
 };
 
-// Main Article caching logic
 const cacheArticles = async service => {
   const lastSync = await dbGet('meta', 'lastArticleSync');
   const now = Date.now();
@@ -164,6 +163,7 @@ const cacheArticles = async service => {
   // if (lastSync && now - lastSync.value < REFRESH_INTERVAL_MS) return;
 
   const mostRead = await getMostReadDataFromOfflinePage(service);
+
   logger(`👀 fetched:`, { mostRead });
 
   const mostReadArticles = mostRead?.items;
@@ -174,39 +174,43 @@ const cacheArticles = async service => {
 
   // Delete stale articles not in most-read and older than 72h
   const cachedArticleMeta = await dbGetAll(STORE_NAME);
-  for (const entry of cachedArticleMeta) {
+  const staleEntries = cachedArticleMeta.filter(entry => {
     const isTooOld = now - entry.cachedAt > MAX_ARTICLE_AGE_MS;
     const isNotMostRead = !mostReadUrls.has(entry.href);
-    if (isTooOld && isNotMostRead) {
-      // eslint-disable-next-line no-await-in-loop
-      await cache.delete(entry.href);
-      // eslint-disable-next-line no-await-in-loop
-      await dbDelete(STORE_NAME, entry.href);
-    }
-  }
+    return isTooOld && isNotMostRead;
+  });
+
+  await Promise.allSettled(
+    staleEntries.flatMap(entry => [
+      cache.delete(entry.href),
+      dbDelete(STORE_NAME, entry.href),
+    ]),
+  );
 
   // Cache new or updated articles including their scripts and stylesheets
-  for (const article of mostReadArticles) {
-    logger('article', { article });
+  const existingMeta = await Promise.all(
+    mostReadArticles.map(article => dbGet(STORE_NAME, article.href)),
+  );
+
+  await Promise.allSettled(
+    mostReadArticles.map(async (article, i) => {
+      const existing = existingMeta[i];
+      const needsUpdate =
+        !existing ||
+        (article.timestamp && existing.timestamp !== article.timestamp);
 
-    // eslint-disable-next-line no-await-in-loop
-    const existing = await dbGet(STORE_NAME, article.href);
-    const needsUpdate =
-      !existing ||
-      (article.timestamp && existing.timestamp !== article.timestamp);
+      if (!needsUpdate) return;
 
-    if (needsUpdate) {
+      // We need absolute path for cache.match
       const articleUrl = new URL(article.href, self.location.origin).href;
-      // eslint-disable-next-line no-await-in-loop
       await cachePageAndResources(cache, articleUrl);
-      // eslint-disable-next-line no-await-in-loop
       await dbPut(STORE_NAME, {
         url: article.href,
         timestamp: article.timestamp,
         cachedAt: now,
       });
-    }
-  }
+    }),
+  );
 
   await dbPut('meta', { key: 'lastArticleSync', value: now });
 };
@@ -252,6 +256,8 @@ self.addEventListener('message', async event => {
     const { isEnabled: isOfflineArticleEnabled, service } =
       offlineArticle ?? {};
 
+    logger('📌 Message', { isOfflineArticleEnabled, service });
+
     if (isPWA) {
       pwaClients.set(event.source.id, true);
 

From 167a260ff3bd8f9b74413ec06c393274c5b49bd1 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Tue, 3 Mar 2026 08:21:39 +0200
Subject: [PATCH 13/14] feat: improve article and offline page refetch logic

---
 public/sw.js | 44 +++++++++++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index 2d6b654c6a1..b01a9477db3 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -1,4 +1,3 @@
-// TEMP
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-useless-return */
 /* eslint-disable import/prefer-default-export */
@@ -93,7 +92,6 @@ const getOfflinePageUrl = service => `/${service}/offline`;
 const cacheResource = async (cache, url) => {
   logger('cacheResource', { url });
   try {
-    // TODO: temp CORS
     const response = await fetch(url);
     if (response.ok) await cache.put(url, response.clone());
     return response;
@@ -102,8 +100,8 @@ const cacheResource = async (cache, url) => {
   }
 };
 
-const cachePageAndResources = async (cache, url) => {
-  if (await cache.match(url)) return;
+const cachePageAndResources = async (cache, url, forceRefresh = false) => {
+  if (!forceRefresh && (await cache.match(url))) return;
 
   const resp = await cacheResource(cache, url);
   if (!resp || !resp.ok) return;
@@ -120,14 +118,14 @@ const cachePageAndResources = async (cache, url) => {
   await Promise.allSettled(resources.map(r => cacheResource(cache, r)));
 };
 
-const cacheOfflinePageAndResources = async service => {
+const cacheOfflinePageAndResources = async (service, forceRefresh = false) => {
   const cache = await caches.open(cacheName);
   const offlinePageUrl = new URL(
     getOfflinePageUrl(service),
     self.location.origin,
   ).href;
 
-  await cachePageAndResources(cache, offlinePageUrl);
+  await cachePageAndResources(cache, offlinePageUrl, forceRefresh);
 };
 
 const getMostReadDataFromOfflinePage = async service => {
@@ -159,8 +157,7 @@ const cacheArticles = async service => {
   const now = Date.now();
   logger('📌 cacheArticles called', { lastSync });
 
-  // TODO: Temporarily commenting it out
-  // if (lastSync && now - lastSync.value < REFRESH_INTERVAL_MS) return;
+  if (lastSync && now - lastSync.value < REFRESH_INTERVAL_MS) return;
 
   const mostRead = await getMostReadDataFromOfflinePage(service);
 
@@ -195,15 +192,18 @@ const cacheArticles = async service => {
   await Promise.allSettled(
     mostReadArticles.map(async (article, i) => {
       const existing = existingMeta[i];
-      const needsUpdate =
-        !existing ||
-        (article.timestamp && existing.timestamp !== article.timestamp);
 
-      if (!needsUpdate) return;
+      const isMissing = !existing;
+      const isOutdated =
+        !!existing &&
+        article.timestamp &&
+        existing.timestamp !== article.timestamp;
+
+      if (!isMissing && !isOutdated) return;
 
-      // We need absolute path for cache.match
       const articleUrl = new URL(article.href, self.location.origin).href;
-      await cachePageAndResources(cache, articleUrl);
+      // Force refresh only when we know it's outdated, not when simply missing
+      await cachePageAndResources(cache, articleUrl, isOutdated);
       await dbPut(STORE_NAME, {
         url: article.href,
         timestamp: article.timestamp,
@@ -266,10 +266,20 @@ self.addEventListener('message', async event => {
         value: !!isOfflineArticleEnabled,
       });
 
-      await cacheOfflinePageAndResources(service);
-
       if (isOfflineArticleEnabled) {
-        await cacheArticles(service);
+        const lastSync = await dbGet('meta', 'lastArticleSync');
+        const isOutdated =
+          !lastSync || Date.now() - lastSync.value >= REFRESH_INTERVAL_MS;
+
+        // Always cache offline page first — cacheArticles depends on it
+        await cacheOfflinePageAndResources(service, isOutdated);
+
+        if (isOutdated) {
+          await cacheArticles(service);
+        }
+      } else {
+        // Still cache the offline page itself regardless of article toggle
+        await cacheOfflinePageAndResources(service);
       }
     }
   }

From 68b067226ffda48140fb203e910b2f7a94aaa384 Mon Sep 17 00:00:00 2001
From: Elvinas Valenas <elvinas.valenas.ext@bbc.co.uk>
Date: Thu, 5 Mar 2026 11:27:25 +0200
Subject: [PATCH 14/14] chore: remove comment

---
 src/app/routes/utils/fetchDataFromBFF/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/routes/utils/fetchDataFromBFF/index.ts b/src/app/routes/utils/fetchDataFromBFF/index.ts
index a6dcbe88f04..61f4af93712 100644
--- a/src/app/routes/utils/fetchDataFromBFF/index.ts
+++ b/src/app/routes/utils/fetchDataFromBFF/index.ts
@@ -36,7 +36,6 @@ export default async ({
   const isLocal = !environment || environment === 'local';
   const optHeaders = isLocal ? undefined : { 'ctx-service-env': environment };
 
-  // TODO
   const fetchUrl = constructPageFetchUrl({
     pathname,
     pageType,