Use cache-busted manifest

Author: FyreByrd

.gitignore

@@ -27,7 +27,7 @@ static/borders
 static/clips
 static/videos
 static/*.partial.html
-static/manifest.json
+static/manifest*.json
 static/assets
 static/contents
 static/songs

convert/convertManifest.ts

@@ -1,6 +1,7 @@
-import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
 import path from 'path';
 import { Task, TaskOutput } from './Task';
+import { createHash } from 'crypto';
 
 export interface ManifestTaskOutput extends TaskOutput {
     taskName: 'ConvertManifest';
@@ -10,11 +11,12 @@ export interface ManifestTaskOutput extends TaskOutput {
  */
 export function convertManifest(dataDir: string, verbose: number) {
     const srcFile = path.join(dataDir, 'manifest.json');
-    const dstFile = path.join('static', 'manifest.json');
-    if (existsSync(srcFile)) {
+    let contents = '';
+    const existing = existsSync(srcFile);
+    if (existing) {
         const fileContents = readFileSync(srcFile).toString();
         const lines = fileContents.split('\n');
-        const updatedFileContents = lines
+        contents = lines
             .map((line) => {
                 if (line.includes('start_url')) {
                     const path = process.env.BUILD_BASE_PATH ? process.env.BUILD_BASE_PATH : '.';
@@ -27,8 +29,6 @@ export function convertManifest(dataDir: string, verbose: number) {
                 return line;
             })
             .join('\n');
-        writeFileSync(dstFile, updatedFileContents);
-        if (verbose) console.log(`converted ${srcFile} to ${dstFile}`);
     } else {
         // If no manifest exists, we need to at least have a minimum manifest to build.
         const manifest = {
@@ -38,8 +38,22 @@ export function convertManifest(dataDir: string, verbose: number) {
             background_color: '#000000',
             theme_color: '#000000'
         };
-        writeFileSync(dstFile, JSON.stringify(manifest));
+        contents = JSON.stringify(manifest);
     }
+
+    const hash = createHash('md5');
+    hash.update(contents);
+    const digest = hash.digest('base64url');
+
+    const name = `manifest.${digest}.json`;
+
+    const dstFile = path.join('static', name);
+
+    writeFileSync(dstFile, contents);
+    if (verbose && existing) console.log(`converted ${srcFile} to ${dstFile}`);
+
+    mkdirSync(path.join('src', 'generatedAssets'), { recursive: true });
+    writeFileSync(path.join('src/generatedAssets', 'manifestUrl.json'), JSON.stringify({ url: name }));
 }
 export class ConvertManifest extends Task {
     public triggerFiles: string[] = ['manifest.json'];

package.json

@@ -17,7 +17,7 @@
         "convert": "ts-node convert/index.ts",
         "convert:watch": "ts-node convert/index.ts --watch",
         "sandbox": "ts-node data-sandbox/index.ts",
-        "clean": "rimraf .svelte-kit build src/lib/data/config.js src/lib/data/catalog.js src/lib/data/firebase-config.js src/lib/data/contents.js static/about.partial.html static/assets static/badges static/clips static/collections static/images static/fonts static/styles static/illustrations static/watermarks static/audio static/timings static/videos static/backgrounds static/icons static/borders static/plans static/quiz static/contents static/manifest.json static/data.sqlite static/wasm static/reversal && echo 🔔 Reminder: The project cannot be built until the conversion scripts are run again.",
+        "clean": "rimraf .svelte-kit build src/generatedAssets /lib/data/config.js src/lib/data/catalog.js src/lib/data/firebase-config.js src/lib/data/contents.js static/about.partial.html static/assets static/badges static/clips static/collections static/images static/fonts static/styles static/illustrations static/watermarks static/audio static/timings static/videos static/backgrounds static/icons static/borders static/plans static/quiz static/contents static/manifest*.json static/data.sqlite static/wasm static/reversal && echo 🔔 Reminder: The project cannot be built until the conversion scripts are run again.",
         "clean:data": "rimraf --glob data/*",
         "clean:all": "npm run clean && npm run clean:data",
         "test": "vitest",

src/app.html

@@ -2,7 +2,6 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
         <link rel="stylesheet" type="text/css" href="%sveltekit.assets%/spinner.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
         %sveltekit.head%

src/routes/+layout.svelte

@@ -109,6 +109,7 @@
     <!-- app.html (with cache-busting) -->
     <link rel="icon" href="{faviconHref}" />
     <link rel="apple-touch-icon" href="{appleIconHref}" />
+    <link rel="manifest" href="{manifestHref.url}" />
     <!-- +layout.svelte -->
     <meta name="theme-color" content={$s['ui.bar.action']?.['background-color']} />
     <link rel="stylesheet" href="{base}/styles/{config.programType.toLowerCase()}-app.css" />