Skip to content

Commit c66a448

Browse files
alestiagoalestiago
authored
refactor: stop using deprecated serviceWorkerVersion (#29)
* fix: stop using deprecated serviceWorkerVersion * fix: escape mustache * chore: remove artificial delay * refactor: PR suggestions
1 parent 4e6a02d commit c66a448

File tree

2 files changed

+125
-145
lines changed

2 files changed

+125
-145
lines changed

‎__brick__/web/flutter_bootstrap.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
{{=<% %>=}}{{flutter_js}}<%={{ }}=%>
2+
{{=<% %>=}}{{flutter_build_config}}<%={{ }}=%>
3+
4+
const progressBar = document.querySelector('#progress-bar');
5+
const progressText = document.querySelector('#progress-text');
6+
const progressIndicator = document.querySelector('#progress-indicator');
7+
8+
async function readAssets() {
9+
// NOTE: AssetManifest.json will be deprecated in favour of AssetManifest.bin:
10+
// https://github.com/VeryGoodOpenSource/flutter_web_preloader/issues/28
11+
const response = await fetch('assets/AssetManifest.json');
12+
const manifest = await response.json();
13+
const assets = Object.values(manifest)
14+
.map((list) => list.map((url) => 'assets/' + url))
15+
.reduce((arr, curr) => [...arr, ...curr], []);
16+
return assets;
17+
}
18+
19+
async function beginPreloading() {
20+
const assets = await readAssets();
21+
22+
let totalAssets = assets.length;
23+
if (totalAssets === 0) {
24+
// No assets to load, so we can skip the loading process entirely.
25+
return;
26+
}
27+
28+
let loadedAssets = 0;
29+
const batchSize = {{batch_size}};
30+
31+
progressIndicator.style.width = '0%';
32+
progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`;
33+
34+
async function reportProgress() {
35+
loadedAssets++;
36+
37+
const value = Math.floor((loadedAssets / totalAssets) * 100) + '%';
38+
progressIndicator.style.width = value;
39+
40+
progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`;
41+
}
42+
43+
async function load(url) {
44+
return new Promise((resolve, reject) => {
45+
const req = new XMLHttpRequest();
46+
47+
req.onload = function() {
48+
if (req.status >= 200 && req.status < 300) {
49+
resolve(req.response);
50+
} else {
51+
reject(new Error(`Failed to load: ${req.status} ${req.statusText}`));
52+
}
53+
};
54+
55+
req.onerror = function() {
56+
reject(new Error('Network error'));
57+
};
58+
59+
req.open('GET', url);
60+
req.send();
61+
});
62+
}
63+
64+
async function loadBatch(urls) {
65+
const loadPromises = urls.map(url => load(url).then(reportProgress()));
66+
try {
67+
return await Promise.all(loadPromises);
68+
} catch (error) {
69+
console.error('Error loading one or more asset:', error);
70+
}
71+
}
72+
73+
for (let i = 0; i < assets.length; i += batchSize) {
74+
const batch = assets.slice(i, i + batchSize);
75+
await loadBatch(batch);
76+
}
77+
}
78+
79+
_flutter.loader.load({
80+
serviceWorkerSettings: {
81+
serviceWorkerVersion: {{=<% %>=}}{{flutter_service_worker_version}}<%={{ }}=%>,
82+
},
83+
onEntrypointLoaded: async function(engineInitializer) {
84+
await Promise.all([
85+
beginPreloading(),
86+
engineInitializer.initializeEngine(),
87+
]).then(([_, appRunner]) => appRunner.runApp());
88+
}
89+
});

‎__brick__/web/index.html‎

Lines changed: 36 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<!--
3+
<head>
4+
<!--
55
If you are serving your web app in a path other than the root, change the
66
href value below to reflect the base path you are serving from.
77
@@ -14,149 +14,40 @@
1414
This is a placeholder for base href that will be replaced by the value of
1515
the `--base-href` argument provided to `flutter build`.
1616
-->
17-
<base href="$FLUTTER_BASE_HREF">
18-
19-
<meta charset="UTF-8">
20-
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
21-
<meta name="description" content="{{{project_description}}}">
22-
23-
<!-- iOS meta tags & icons -->
24-
<meta name="apple-mobile-web-app-capable" content="yes">
25-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
26-
<meta name="apple-mobile-web-app-title" content="{{project_title}}">
27-
<link rel="apple-touch-icon" href="icons/Icon-192.png">
28-
29-
<!-- Favicon -->
30-
<link rel="icon" type="image/png" href="favicon.png"/>
31-
32-
<title>{{project_title}}</title>
33-
<link rel="manifest" href="manifest.json">
34-
<style type="text/css">
35-
body.loading-mode {
36-
display: flex;
37-
align-items: center;
38-
justify-content: center;
39-
}
40-
</style>
41-
42-
<script>
43-
// The value below is injected by flutter build, do not touch.
44-
var serviceWorkerVersion = null;
45-
</script>
46-
</head>
47-
<body class="loading-mode">
48-
<div id="progress-bar" style="border: 1px solid blue; width: 250px; height: 50px;">
49-
<div id="progress-indicator" style="background-color: blue; height: 100%; width: 0%;"></div>
50-
</div>
51-
<script>
52-
(function() {
53-
const progressBar = document.querySelector('#progress-bar');
54-
const progressIndicator = document.querySelector('#progress-indicator');
55-
56-
const additionalScripts = [
57-
// Add additional scripts here.
58-
];
59-
60-
function injectScript(url) {
61-
return new Promise(function(resolve) {
62-
let scriptTag = document.createElement('script');
63-
scriptTag.src = url;
64-
scriptTag.type = 'application/javascript';
65-
scriptTag.onload = function() {
66-
resolve();
67-
};
68-
69-
document.body.append(scriptTag);
70-
});
17+
<base href="$FLUTTER_BASE_HREF" />
18+
19+
<meta charset="UTF-8" />
20+
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
21+
<meta name="description" content="{{{project_description}}}" />
22+
23+
<!-- iOS meta tags & icons -->
24+
<meta name="apple-mobile-web-app-capable" content="yes" />
25+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
26+
<meta name="apple-mobile-web-app-title" content="{{project_title}}" />
27+
<link rel="apple-touch-icon" href="icons/Icon-192.png" />
28+
29+
<!-- Favicon -->
30+
<link rel="icon" type="image/png" href="favicon.png" />
31+
32+
<title>{{project_title}}</title>
33+
<link rel="manifest" href="manifest.json" />
34+
35+
<style type="text/css">
36+
body {
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
height: 100vh;
7141
}
72-
73-
function beginPreloading(manifestAssets) {
74-
var assets = [
75-
'flutter.js',
76-
'main.dart.js',
77-
{{#canvaskit}}
78-
'canvaskit/canvaskit.wasm',
79-
'canvaskit/canvaskit.js',
80-
{{/canvaskit}}
81-
...additionalScripts,
82-
...manifestAssets,
83-
];
84-
let totalAssets = assets.length + 1;
85-
let loaded = 0;
86-
87-
const batchSize = {{batch_size}};
88-
89-
async function reportProgress() {
90-
loaded++;
91-
const value = Math.floor((loaded / totalAssets) * 100) + '%';
92-
progressIndicator.style.width = value;
93-
94-
if (assets.length == 0) {
95-
dispatchAppLoad();
96-
} else {
97-
load(assets.shift());
98-
}
99-
}
100-
101-
function load(url) {
102-
const req = new XMLHttpRequest();
103-
req.onload = reportProgress;
104-
req.open('get', url);
105-
req.send();
106-
}
107-
108-
function startBatch() {
109-
const end = Math.min(batchSize, assets.length);
110-
for (let i = 0; i < end; i++) {
111-
load(assets.shift());
112-
}
113-
}
114-
115-
116-
var scriptLoaded = false;
117-
async function dispatchAppLoad() {
118-
if (scriptLoaded) {
119-
return;
120-
}
121-
scriptLoaded = true;
122-
123-
for (let i = 0; i < additionalScripts.length; i++) {
124-
await injectScript(additionalScripts[i]);
125-
}
126-
127-
await injectScript('flutter.js');
128-
129-
// Download main.dart.js
130-
_flutter.loader.loadEntrypoint({
131-
serviceWorker: {
132-
serviceWorkerVersion: serviceWorkerVersion,
133-
},
134-
onEntrypointLoaded: function(engineInitializer) {
135-
engineInitializer.initializeEngine().then(async function(appRunner) {
136-
window.addEventListener("flutter-first-frame", function () {
137-
progressBar.remove();
138-
document.body.classList.remove('loading-mode');
139-
});
140-
141-
appRunner.runApp();
142-
});
143-
}
144-
});
145-
}
146-
147-
startBatch();
148-
}
149-
150-
window.addEventListener('load', async function(ev) {
151-
const response = await fetch('assets/AssetManifest.json');
152-
const manifest = await response.json();
153-
const assets = Object.values(manifest)
154-
.map((list) => list.map((url) => 'assets/' + url))
155-
.reduce((arr, curr) => [...arr, ...curr], []);
156-
157-
beginPreloading(assets);
158-
});
159-
})();
160-
</script>
42+
</style>
43+
</head>
44+
<body>
45+
<div>
46+
<div id="progress-bar" style="border: 1px solid blue; width: 250px; height: 50px;">
47+
<div id="progress-indicator" style="background-color: blue; height: 100%; width: 0%;"></div>
48+
</div>
49+
<div id="progress-text" width="100%" style="padding-top: 0.5rem; text-align: center;">Initializing</div>
50+
</div>
51+
<script src="flutter_bootstrap.js" async></script>
16152
</body>
16253
</html>

0 commit comments

Comments
 (0)