Skip to content

Commit bd9d306

Browse files
committed
chore(web): fix serviceWorkerVersion deprecation and migrate to new bootstrap API
Remove legacy manual script loading logic in index.html and adopt the modern flutter_bootstrap.js approach recommended for Flutter 3.22+.
1 parent 7e29b46 commit bd9d306

File tree

1 file changed

+25
-88
lines changed

1 file changed

+25
-88
lines changed

example/web/index.html

Lines changed: 25 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<!DOCTYPE html>
1+
<!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,91 +14,28 @@
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="A new Flutter project.">
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="example">
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>example</title>
33-
<link rel="manifest" href="manifest.json">
34-
</head>
35-
<body>
36-
<!-- This script installs service_worker.js to provide PWA functionality to
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="A new Flutter project." />
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="example" />
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>example</title>
33+
<link rel="manifest" href="manifest.json" />
34+
</head>
35+
<body>
36+
<!-- This script installs service_worker.js to provide PWA functionality to
3737
application. For more information, see:
3838
https://developers.google.com/web/fundamentals/primers/service-workers -->
39-
<script>
40-
var serviceWorkerVersion = '{{flutter_service_worker_version}}';
41-
var scriptLoaded = false;
42-
function loadMainDartJs() {
43-
if (scriptLoaded) {
44-
return;
45-
}
46-
scriptLoaded = true;
47-
var scriptTag = document.createElement('script');
48-
scriptTag.src = 'main.dart.js';
49-
scriptTag.type = 'application/javascript';
50-
document.body.append(scriptTag);
51-
}
52-
53-
if ('serviceWorker' in navigator) {
54-
// Service workers are supported. Use them.
55-
window.addEventListener('load', function () {
56-
// Wait for registration to finish before dropping the <script> tag.
57-
// Otherwise, the browser will load the script multiple times,
58-
// potentially different versions.
59-
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
60-
navigator.serviceWorker.register(serviceWorkerUrl)
61-
.then((reg) => {
62-
function waitForActivation(serviceWorker) {
63-
serviceWorker.addEventListener('statechange', () => {
64-
if (serviceWorker.state == 'activated') {
65-
console.log('Installed new service worker.');
66-
loadMainDartJs();
67-
}
68-
});
69-
}
70-
if (!reg.active && (reg.installing || reg.waiting)) {
71-
// No active web worker and we have installed or are installing
72-
// one for the first time. Simply wait for it to activate.
73-
waitForActivation(reg.installing || reg.waiting);
74-
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
75-
// When the app updates the serviceWorkerVersion changes, so we
76-
// need to ask the service worker to update.
77-
console.log('New service worker available.');
78-
reg.update();
79-
waitForActivation(reg.installing);
80-
} else {
81-
// Existing service worker is still good.
82-
console.log('Loading app from service worker.');
83-
loadMainDartJs();
84-
}
85-
});
86-
87-
// If service worker doesn't succeed in a reasonable amount of time,
88-
// fallback to plaint <script> tag.
89-
setTimeout(() => {
90-
if (!scriptLoaded) {
91-
console.warn(
92-
'Failed to load app from service worker. Falling back to plain <script> tag.',
93-
);
94-
loadMainDartJs();
95-
}
96-
}, 4000);
97-
});
98-
} else {
99-
// Service workers not supported. Just drop the <script> tag.
100-
loadMainDartJs();
101-
}
102-
</script>
103-
</body>
39+
<script src="flutter_bootstrap.js" async></script>
40+
</body>
10441
</html>

0 commit comments

Comments
 (0)