mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-21 07:16:18 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Try to speed up LCP

Browse source
This commit is contained in:
schlagmichdoch 2024-06-06 00:53:28 +02:00
parent 488762bbce
commit 924c17323d
4 changed files with 58 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

9
public/scripts/localization.js
View file

@ -1,5 +1,5 @@
class Localization { class Localization {
constructor() { static async initiate() {
Localization.$htmlRoot = document.querySelector('html'); Localization.$htmlRoot = document.querySelector('html');
Localization.defaultLocale = "en"; Localization.defaultLocale = "en";
@ -16,6 +16,8 @@ class Localization {
Localization.initialLocale = storedLanguageCode && Localization.localeIsSupported(storedLanguageCode) Localization.initialLocale = storedLanguageCode && Localization.localeIsSupported(storedLanguageCode)
? storedLanguageCode ? storedLanguageCode
: Localization.systemLocale; : Localization.systemLocale;
await Localization.setInitialTranslation();
} }
static localeIsSupported(locale) { static localeIsSupported(locale) {
@ -47,8 +49,9 @@ class Localization {
|| Localization.defaultLocale; || Localization.defaultLocale;
} }
async setInitialTranslation() { static async setInitialTranslation() {
await Localization.setTranslation(Localization.initialLocale) await Localization.setTranslation(Localization.initialLocale);
console.log("Initial translation successful.");
} }
static async setTranslation(locale) { static async setTranslation(locale) {

98
public/scripts/main.js
View file

@ -1,15 +1,10 @@
class PairDrop { class PairDrop {
constructor() { constructor() {
this.$headerNotificationBtn = $('notification'); this.stylesDeferred = [
this.$headerEditPairedDevicesBtn = $('edit-paired-devices');
this.$footerPairedDevicesBadge = $$('.discovery-wrapper .badge-room-secret');
this.$headerInstallBtn = $('install');
this.deferredStyles = [
"styles/styles-deferred.css" "styles/styles-deferred.css"
]; ];
this.deferredScripts = [ this.scriptsDeferred = [
"scripts/browser-tabs-connector.js", "scripts/browser-tabs-connector.js",
"scripts/util.js", "scripts/util.js",
"scripts/network.js", "scripts/network.js",
@ -20,18 +15,6 @@ class PairDrop {
"scripts/heic2any.min.js" "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() this.initialize()
.then(_ => { .then(_ => {
console.log("Initialization completed."); console.log("Initialization completed.");
@ -39,44 +22,64 @@ class PairDrop {
} }
async initialize() { async initialize() {
// Translate page before fading in // Register Service Worker
await this.localization.setInitialTranslation() console.log('Register Service Worker...');
console.log("Initial translation successful."); await this.registerServiceWorker();
// Show "Loading..." until connected to WsServer Events.on('beforeinstallprompt', e => this.onPwaInstallable(e));
await this.footerUI.showLoading();
// Evaluate css shifting UI elements and fade in UI elements this.$headerNotificationBtn = $('notification');
await this.evaluatePermissionsAndRoomSecrets(); this.$headerEditPairedDevicesBtn = $('edit-paired-devices');
await this.headerUI.evaluateOverflowing(); this.$footerPairedDevicesBadge = $$('.discovery-wrapper .badge-room-secret');
await this.headerUI.fadeIn(); this.$headerInstallBtn = $('install');
await this.footerUI._evaluateFooterBadges();
await this.footerUI.fadeIn(); this.themeUI = new ThemeUI();
await this.centerUI.fadeIn(); this.backgroundCanvas = new BackgroundCanvas();
await this.backgroundCanvas.fadeIn(); 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 // Load deferred assets
console.log("Load deferred assets..."); console.log("Load deferred assets...");
await this.loadDeferredAssets(); await this.loadDeferredAssets();
console.log("Loading of deferred assets completed."); console.log("Loading of deferred assets completed.");
// Hydrate UI
console.log("Hydrate UI..."); console.log("Hydrate UI...");
await this.hydrate(); await this.hydrate();
console.log("UI hydrated."); 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) { if ('serviceWorker' in navigator) {
navigator.serviceWorker window.serviceWorker = await navigator.serviceWorker.register('service-worker.js');
.register('service-worker.js') console.log('Service Worker registered.');
.then(serviceWorker => {
console.log('Service Worker registered');
window.serviceWorker = serviceWorker
});
} }
} }
@ -105,11 +108,10 @@ class PairDrop {
} }
} }
loadDeferredAssets() { async loadDeferredAssets() {
const stylePromises = this.deferredStyles.map(url => this.loadAndApplyStylesheet(url)); const stylePromises = this.stylesDeferred.map(url => this.loadAndApplyStylesheet(url));
const scriptPromises = this.deferredScripts.map(url => this.loadAndApplyScript(url)); const scriptPromises = this.scriptsDeferred.map(url => this.loadAndApplyScript(url));
await Promise.all([...stylePromises, ...scriptPromises]);
return Promise.all([...stylePromises, ...scriptPromises]);
} }
loadStyleSheet(url) { loadStyleSheet(url) {

2
public/scripts/persistent-storage.js
View file

@ -1,5 +1,5 @@
class PersistentStorage { class PersistentStorage {
constructor() { static async initiate() {
if (!('indexedDB' in window)) { if (!('indexedDB' in window)) {
PersistentStorage.logBrowserNotCapable(); PersistentStorage.logBrowserNotCapable();
return; return;

1
public/scripts/ui-main.js
View file

@ -214,6 +214,7 @@ class FooterUI {
} }
async showLoading() { async showLoading() {
// Show "Loading..." until connected to WsServer
this.$displayName.setAttribute('placeholder', this.$displayName.dataset.placeholder); this.$displayName.setAttribute('placeholder', this.$displayName.dataset.placeholder);
} }