From 924c17323de214e209ddb22c16a8918aa0e62903 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Thu, 6 Jun 2024 00:53:28 +0200 Subject: [PATCH] Try to speed up LCP --- public/scripts/localization.js | 9 ++- public/scripts/main.js | 98 ++++++++++++++-------------- public/scripts/persistent-storage.js | 2 +- public/scripts/ui-main.js | 1 + 4 files changed, 58 insertions(+), 52 deletions(-) diff --git a/public/scripts/localization.js b/public/scripts/localization.js index d5eb313..473d21e 100644 --- a/public/scripts/localization.js +++ b/public/scripts/localization.js @@ -1,5 +1,5 @@ class Localization { - constructor() { + static async initiate() { Localization.$htmlRoot = document.querySelector('html'); Localization.defaultLocale = "en"; @@ -16,6 +16,8 @@ class Localization { Localization.initialLocale = storedLanguageCode && Localization.localeIsSupported(storedLanguageCode) ? storedLanguageCode : Localization.systemLocale; + + await Localization.setInitialTranslation(); } static localeIsSupported(locale) { @@ -47,8 +49,9 @@ class Localization { || Localization.defaultLocale; } - async setInitialTranslation() { - await Localization.setTranslation(Localization.initialLocale) + static async setInitialTranslation() { + await Localization.setTranslation(Localization.initialLocale); + console.log("Initial translation successful."); } static async setTranslation(locale) { diff --git a/public/scripts/main.js b/public/scripts/main.js index 8960ed2..6a10ced 100644 --- a/public/scripts/main.js +++ b/public/scripts/main.js @@ -1,15 +1,10 @@ class PairDrop { constructor() { - this.$headerNotificationBtn = $('notification'); - this.$headerEditPairedDevicesBtn = $('edit-paired-devices'); - this.$footerPairedDevicesBadge = $$('.discovery-wrapper .badge-room-secret'); - this.$headerInstallBtn = $('install'); - - this.deferredStyles = [ + this.stylesDeferred = [ "styles/styles-deferred.css" ]; - this.deferredScripts = [ + this.scriptsDeferred = [ "scripts/browser-tabs-connector.js", "scripts/util.js", "scripts/network.js", @@ -20,18 +15,6 @@ class PairDrop { "scripts/heic2any.min.js" ]; - this.registerServiceWorker(); - - Events.on('beforeinstallprompt', e => this.onPwaInstallable(e)); - - this.persistentStorage = new PersistentStorage(); - this.localization = new Localization(); - this.themeUI = new ThemeUI(); - this.backgroundCanvas = new BackgroundCanvas(); - this.headerUI = new HeaderUI(); - this.centerUI = new CenterUI(); - this.footerUI = new FooterUI(); - this.initialize() .then(_ => { console.log("Initialization completed."); @@ -39,44 +22,64 @@ class PairDrop { } async initialize() { - // Translate page before fading in - await this.localization.setInitialTranslation() - console.log("Initial translation successful."); + // Register Service Worker + console.log('Register Service Worker...'); + await this.registerServiceWorker(); - // Show "Loading..." until connected to WsServer - await this.footerUI.showLoading(); + Events.on('beforeinstallprompt', e => this.onPwaInstallable(e)); - // Evaluate css shifting UI elements and fade in UI elements - await this.evaluatePermissionsAndRoomSecrets(); - await this.headerUI.evaluateOverflowing(); - await this.headerUI.fadeIn(); - await this.footerUI._evaluateFooterBadges(); - await this.footerUI.fadeIn(); - await this.centerUI.fadeIn(); - await this.backgroundCanvas.fadeIn(); + this.$headerNotificationBtn = $('notification'); + this.$headerEditPairedDevicesBtn = $('edit-paired-devices'); + this.$footerPairedDevicesBadge = $$('.discovery-wrapper .badge-room-secret'); + this.$headerInstallBtn = $('install'); + + this.themeUI = new ThemeUI(); + this.backgroundCanvas = new BackgroundCanvas(); + this.headerUI = new HeaderUI(); + this.centerUI = new CenterUI(); + this.footerUI = new FooterUI(); + + // Translate page, initiate database, and evaluate what to show + await Promise.all([ + PersistentStorage.initiate(), + Localization.initiate(), + this.evaluatePermissionsAndRoomSecrets() + ]); + + // Evaluate css shifting UI elements and show loading placeholder + await Promise.all([ + this.headerUI.evaluateOverflowing(), + this.footerUI._evaluateFooterBadges(), + this.footerUI.showLoading() + ]); + + // Fade in UI elements + await Promise.all([ + this.headerUI.fadeIn(), + this.footerUI.fadeIn(), + this.centerUI.fadeIn(), + this.backgroundCanvas.fadeIn() + ]); + + // Evaluate url params as soon as client is connected to the websocket + console.log("Evaluate URL params as soon as websocket connection is established."); + Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true}); // Load deferred assets console.log("Load deferred assets..."); await this.loadDeferredAssets(); console.log("Loading of deferred assets completed."); + // Hydrate UI console.log("Hydrate UI..."); await this.hydrate(); console.log("UI hydrated."); - - // Evaluate url params as soon as ws is connected - console.log("Evaluate URL params as soon as websocket connection is established."); - Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true}); } - registerServiceWorker() { + async registerServiceWorker() { if ('serviceWorker' in navigator) { - navigator.serviceWorker - .register('service-worker.js') - .then(serviceWorker => { - console.log('Service Worker registered'); - window.serviceWorker = serviceWorker - }); + window.serviceWorker = await navigator.serviceWorker.register('service-worker.js'); + console.log('Service Worker registered.'); } } @@ -105,11 +108,10 @@ class PairDrop { } } - loadDeferredAssets() { - const stylePromises = this.deferredStyles.map(url => this.loadAndApplyStylesheet(url)); - const scriptPromises = this.deferredScripts.map(url => this.loadAndApplyScript(url)); - - return Promise.all([...stylePromises, ...scriptPromises]); + async loadDeferredAssets() { + const stylePromises = this.stylesDeferred.map(url => this.loadAndApplyStylesheet(url)); + const scriptPromises = this.scriptsDeferred.map(url => this.loadAndApplyScript(url)); + await Promise.all([...stylePromises, ...scriptPromises]); } loadStyleSheet(url) { diff --git a/public/scripts/persistent-storage.js b/public/scripts/persistent-storage.js index 72c30fb..255aaa5 100644 --- a/public/scripts/persistent-storage.js +++ b/public/scripts/persistent-storage.js @@ -1,5 +1,5 @@ class PersistentStorage { - constructor() { + static async initiate() { if (!('indexedDB' in window)) { PersistentStorage.logBrowserNotCapable(); return; diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js index c7a27e5..354cb19 100644 --- a/public/scripts/ui-main.js +++ b/public/scripts/ui-main.js @@ -214,6 +214,7 @@ class FooterUI { } async showLoading() { + // Show "Loading..." until connected to WsServer this.$displayName.setAttribute('placeholder', this.$displayName.dataset.placeholder); }