refactor: return onDemandEntries instead of mediaURLs (#6514)

* refactor: return onDemandEntries instead of mediaURLs

* lint

* fix test

src/serviceWorker/index.ts

@@ -18,14 +18,12 @@ self.skipWaiting()
 // This must be done before setting up workbox-precaching, so that it takes precedence.
 registerRoute(new DocumentRoute())
 
-// Splits entries into:
-// - mediaURLs: loaded on-demand
-// - precacheEntries
-const { mediaURLs, precacheEntries } = groupEntries(self.__WB_MANIFEST)
+const { onDemandEntries, precacheEntries } = groupEntries(self.__WB_MANIFEST)
+const onDemandURLs = onDemandEntries.map((entry) => (typeof entry === 'string' ? entry : entry.url))
 
 registerRoute(
   new Route(
-    ({ url }) => mediaURLs.includes('.' + url.pathname),
+    ({ url }) => onDemandURLs.includes('.' + url.pathname),
     new CacheFirst({
       cacheName: 'media',
       plugins: [new ExpirationPlugin({ maxEntries: 16 })],
@@ -33,5 +31,4 @@ registerRoute(
   )
 )
 
-// Precaches entries and registers a default route to serve them.
 precacheAndRoute(precacheEntries)

src/serviceWorker/utils.test.ts

 import { groupEntries } from './utils'
 
 describe('groupEntries', () => {
-  test('splits resources into mediaURLs and precacheEntries', () => {
+  test('splits resources into onDemandEntries and precacheEntries', () => {
     const resources = [
       './static/whitepaper.pdf',
       { url: './static/js/main.js', revision: 'abc123' },
@@ -12,7 +12,7 @@ describe('groupEntries', () => {
     const result = groupEntries(resources)
 
     expect(result).toEqual({
-      mediaURLs: ['./static/whitepaper.pdf', './static/media/image.jpg'],
+      onDemandEntries: ['./static/whitepaper.pdf', { url: './static/media/image.jpg', revision: 'ghi789' }],
       precacheEntries: [
         { url: './static/js/main.js', revision: 'abc123' },
         { url: './static/css/styles.css', revision: 'def456' },

src/serviceWorker/utils.ts

@@ -16,18 +16,16 @@ export function isDevelopment() {
   )
 }
 
-type GroupedEntries = { mediaURLs: string[]; precacheEntries: PrecacheEntry[] }
+type GroupedEntries = { onDemandEntries: (string | PrecacheEntry)[]; precacheEntries: PrecacheEntry[] }
 export function groupEntries(entries: (string | PrecacheEntry)[]): GroupedEntries {
   return entries.reduce<GroupedEntries>(
-    ({ mediaURLs, precacheEntries }, entry) => {
-      if (typeof entry === 'string') {
-        return { precacheEntries, mediaURLs: [...mediaURLs, entry] }
-      } else if (entry.url.includes('/media/')) {
-        return { precacheEntries, mediaURLs: [...mediaURLs, entry.url] }
+    ({ onDemandEntries, precacheEntries }, entry) => {
+      if (typeof entry === 'string' || entry.url.includes('/media/')) {
+        return { precacheEntries, onDemandEntries: [...onDemandEntries, entry] }
       } else {
-        return { precacheEntries: [...precacheEntries, entry], mediaURLs }
+        return { precacheEntries: [...precacheEntries, entry], onDemandEntries }
       }
     },
-    { mediaURLs: [], precacheEntries: [] }
+    { onDemandEntries: [], precacheEntries: [] }
   )
 }