mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-24 00:36:17 -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 {
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) {

98
public/scripts/main.js
View file

@ -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) {

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

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

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

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