From c24ba2dcd588affa406c4bc970d0c0d0cbe8452c Mon Sep 17 00:00:00 2001 From: Alejandro Santiago Date: Thu, 22 Aug 2024 11:40:06 +0100 Subject: [PATCH 1/4] fix: stop using deprecated serviceWorkerVersion --- __brick__/web/flutter_bootstrap.js | 92 +++++++++++++++ __brick__/web/index.html | 181 ++++++----------------------- 2 files changed, 128 insertions(+), 145 deletions(-) create mode 100644 __brick__/web/flutter_bootstrap.js diff --git a/__brick__/web/flutter_bootstrap.js b/__brick__/web/flutter_bootstrap.js new file mode 100644 index 0000000..92c4161 --- /dev/null +++ b/__brick__/web/flutter_bootstrap.js @@ -0,0 +1,92 @@ +{{flutter_js}} +{{flutter_build_config}} + +const progressBar = document.querySelector('#progress-bar'); +const progressText = document.querySelector('#progress-text'); +const progressIndicator = document.querySelector('#progress-indicator'); + +async function readAssets() { + // NOTE: AssetManifest.json will be deprecated in favour of AssetManifest.bin: + // https://github.com/VeryGoodOpenSource/flutter_web_preloader/issues/28 + const response = await fetch('assets/AssetManifest.json'); + const manifest = await response.json(); + const assets = Object.values(manifest) + .map((list) => list.map((url) => 'assets/' + url)) + .reduce((arr, curr) => [...arr, ...curr], []); + return assets; +} + +async function beginPreloading() { + const assets = await readAssets(); + + let totalAssets = assets.length; + if (totalAssets === 0) { + // No assets to load, so we can skip the loading process entirely. + return; + } + + let loadedAssets = 0; + const batchSize = {{batch_size}}; + + progressIndicator.style.width = '0%'; + progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`; + + async function reportProgress() { + loadedAssets++; + + // Artificial delay to make the progress bar more noticeable. + await new Promise((resolve) => setTimeout(resolve, 500)); + + const value = Math.floor((loadedAssets / totalAssets) * 100) + '%'; + progressIndicator.style.width = value; + + progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`; + } + + async function load(url) { + return new Promise((resolve, reject) => { + const req = new XMLHttpRequest(); + + req.onload = function() { + if (req.status >= 200 && req.status < 300) { + resolve(req.response); + } else { + reject(new Error(`Failed to load: ${req.status} ${req.statusText}`)); + } + }; + + req.onerror = function() { + reject(new Error('Network error')); + }; + + req.open('GET', url); + req.send(); + }); + } + + async function loadBatch(urls) { + const loadPromises = urls.map(url => load(url).then(async () => await reportProgress())); + try { + return await Promise.all(loadPromises); + } catch (error) { + console.error('Error loading one or more asset:', error); + } + } + + for (let i = 0; i < assets.length; i += batchSize) { + const batch = assets.slice(i, i + batchSize); + await loadBatch(batch); + } +} + +_flutter.loader.load({ + serviceWorkerSettings: { + serviceWorkerVersion: {{flutter_service_worker_version}}, + }, + onEntrypointLoaded: async function(engineInitializer) { + await Promise.all([ + beginPreloading(), + engineInitializer.initializeEngine(), + ]).then(([_, appRunner]) => appRunner.runApp()); + } +}); diff --git a/__brick__/web/index.html b/__brick__/web/index.html index 1413515..2ea2402 100644 --- a/__brick__/web/index.html +++ b/__brick__/web/index.html @@ -1,7 +1,7 @@ - - - - - - - - - - - - - - - - - - {{project_title}} - - - - - - -
-
-
- + + + +
+
+
+
+
Initializing
+
+ From ad7ae6df5a230e1a658aa4a85a17eba2633838b7 Mon Sep 17 00:00:00 2001 From: Alejandro Santiago Date: Thu, 22 Aug 2024 12:00:00 +0100 Subject: [PATCH 2/4] fix: escape mustache --- __brick__/web/flutter_bootstrap.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/__brick__/web/flutter_bootstrap.js b/__brick__/web/flutter_bootstrap.js index 92c4161..086db78 100644 --- a/__brick__/web/flutter_bootstrap.js +++ b/__brick__/web/flutter_bootstrap.js @@ -1,5 +1,5 @@ -{{flutter_js}} -{{flutter_build_config}} +{{=<% %>=}}{{flutter_js}}<%={{ }}=%> +{{=<% %>=}}{{flutter_build_config}}<%={{ }}=%> const progressBar = document.querySelector('#progress-bar'); const progressText = document.querySelector('#progress-text'); @@ -81,7 +81,7 @@ async function beginPreloading() { _flutter.loader.load({ serviceWorkerSettings: { - serviceWorkerVersion: {{flutter_service_worker_version}}, + serviceWorkerVersion: {{=<% %>=}}{{flutter_service_worker_version}}<%={{ }}=%>, }, onEntrypointLoaded: async function(engineInitializer) { await Promise.all([ From 90acdd0c6c7ef3181874b4d7dbbc40c51336e075 Mon Sep 17 00:00:00 2001 From: Alejandro Santiago Date: Thu, 22 Aug 2024 12:12:51 +0100 Subject: [PATCH 3/4] chore: remove artificial delay --- __brick__/web/flutter_bootstrap.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/__brick__/web/flutter_bootstrap.js b/__brick__/web/flutter_bootstrap.js index 086db78..5501cec 100644 --- a/__brick__/web/flutter_bootstrap.js +++ b/__brick__/web/flutter_bootstrap.js @@ -34,9 +34,6 @@ async function beginPreloading() { async function reportProgress() { loadedAssets++; - // Artificial delay to make the progress bar more noticeable. - await new Promise((resolve) => setTimeout(resolve, 500)); - const value = Math.floor((loadedAssets / totalAssets) * 100) + '%'; progressIndicator.style.width = value; From cc769bb7278230137b78a3e113d52f919e49eb34 Mon Sep 17 00:00:00 2001 From: Alejandro Santiago Date: Fri, 23 Aug 2024 11:35:44 +0100 Subject: [PATCH 4/4] refactor: PR suggestions --- __brick__/web/flutter_bootstrap.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/__brick__/web/flutter_bootstrap.js b/__brick__/web/flutter_bootstrap.js index 5501cec..f69eace 100644 --- a/__brick__/web/flutter_bootstrap.js +++ b/__brick__/web/flutter_bootstrap.js @@ -62,7 +62,7 @@ async function beginPreloading() { } async function loadBatch(urls) { - const loadPromises = urls.map(url => load(url).then(async () => await reportProgress())); + const loadPromises = urls.map(url => load(url).then(reportProgress())); try { return await Promise.all(loadPromises); } catch (error) {