Merge pull request #723 from vector-im/implement-609

Read config.json on app start

src/platform/web/LegacyPlatform.js

@@ -19,6 +19,6 @@ import {hkdf} from "../../utils/crypto/hkdf";
 
 import {Platform as ModernPlatform} from "./Platform.js";
 
-export function Platform(container, assetPaths, config, options = null) {
-    return new ModernPlatform(container, assetPaths, config, options, {aesjs, hkdf});
+export function Platform({ container, assetPaths, config, configURL, options = null }) {
+    return new ModernPlatform({ container, assetPaths, config, configURL, options, cryptoExtras: { aesjs, hkdf }});
 }

src/platform/web/Platform.js

@@ -126,10 +126,11 @@ function adaptUIOnVisualViewportResize(container) {
 }
 
 export class Platform {
-    constructor(container, assetPaths, config, options = null, cryptoExtras = null) {
+    constructor({ container, assetPaths, config, configURL, options = null, cryptoExtras = null }) {
         this._container = container;
         this._assetPaths = assetPaths;
         this._config = config;
+        this._configURL = configURL;
         this.settingsStorage = new SettingsStorage("hydrogen_setting_v1_");
         this.clock = new Clock();
         this.encoding = new Encoding();
@@ -142,7 +143,7 @@ export class Platform {
             this._serviceWorkerHandler = new ServiceWorkerHandler();
             this._serviceWorkerHandler.registerAndStart(assetPaths.serviceWorker);
         }
-        this.notificationService = new NotificationService(this._serviceWorkerHandler, config.push);
+        this.notificationService = undefined;
         // Only try to use crypto when olm is provided
         if(this._assetPaths.olm) {
             this.crypto = new Crypto(cryptoExtras);
@@ -165,6 +166,20 @@ export class Platform {
         this._workerPromise = undefined;
     }
 
+    async init() {
+        if (!this._config) {
+            if (!this._configURL) {
+                throw new Error("Neither config nor configURL was provided!");
+            }
+            const {body}= await this.request(this._configURL, {method: "GET", format: "json", cache: true}).response();
+            this._config = body;
+        }
+        this._notificationService = new NotificationService(
+            this._serviceWorkerHandler,
+            this._config.push
+        );
+    }
+
     _createLogger(isDevelopment) {
         // Make sure that loginToken does not end up in the logs
         const transformer = (item) => {

src/platform/web/index.html

@@ -17,17 +17,17 @@
         <script id="main" type="module">
             import {main} from "./main";
             import {Platform} from "./Platform";
-            import configJSON from "./assets/config.json?raw";
+            import configURL from "./assets/config.json?url";
             import assetPaths from "./sdk/paths/vite";
             if (import.meta.env.PROD) {
                 assetPaths.serviceWorker = "sw.js";
             }
-            const platform = new Platform(
-                document.body,
+            const platform = new Platform({
+                container: document.body,
                 assetPaths,
-                JSON.parse(configJSON),
-                {development: import.meta.env.DEV}
-            );
+                configURL, 
+                options: {development: import.meta.env.DEV}
+            });
             main(platform);
         </script>
     </body>

src/platform/web/main.js

@@ -32,6 +32,7 @@ export async function main(platform) {
         // const recorder = new RecordRequester(createFetchRequest(clock.createTimeout));
         // const request = recorder.request;
         // window.getBrawlFetchLog = () => recorder.log();
+        await platform.init();
         const navigation = createNavigation();
         platform.setNavigation(navigation);
         const urlRouter = createRouter({navigation, history: platform.history});

src/platform/web/sw.js

@@ -92,8 +92,12 @@ function isCacheableThumbnail(url) {
 
 const baseURL = new URL(self.registration.scope);
 let pendingFetchAbortController = new AbortController();
+
 async function handleRequest(request) {
     try {
+        if (request.url.includes("config.json")) {
+            return handleConfigRequest(request);
+        }
         const url = new URL(request.url);
         // rewrite / to /index.html so it hits the cache
         if (url.origin === baseURL.origin && url.pathname === baseURL.pathname) {
@@ -119,6 +123,27 @@ async function handleRequest(request) {
     }
 }
 
+async function handleConfigRequest(request) {
+    let response = await readCache(request);
+    const networkResponsePromise = fetchAndUpdateConfig(request);
+    if (response) {
+        return response;
+    } else {
+        return await networkResponsePromise;
+    }
+}
+
+async function fetchAndUpdateConfig(request) {
+    const response = await fetch(request, {
+        signal: pendingFetchAbortController.signal,
+        headers: {
+            "Cache-Control": "no-cache",
+        },
+    });
+    updateCache(request, response.clone());
+    return response;
+}
+
 async function updateCache(request, response) {
     // don't write error responses to the cache
     if (response.status >= 400) {

vite.common-config.js

@@ -31,6 +31,7 @@ const commonOptions = {
         assetsInlineLimit: 0,
         polyfillModulePreload: false,
     },
+    assetsInclude: ['**/config.json'],
     define: {
         DEFINE_VERSION: JSON.stringify(version),
         DEFINE_GLOBAL_HASH: JSON.stringify(null),

vite.config.js

@@ -14,6 +14,11 @@ export default defineConfig(({mode}) => {
             outDir: "../../../target",
             minify: true,
             sourcemap: true,
+            rollupOptions: {
+                output: {
+                    assetFileNames: (asset) => asset.name.includes("config.json") ? "assets/[name][extname]": "assets/[name].[hash][extname]",
+                },
+            },
         },
         plugins: [
             themeBuilder({