Use new service worker loading mechanism (#501)
diff --git a/web/index.html b/web/index.html
index 1d4923d..d25c67b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,6 +1,18 @@
<!DOCTYPE html>
<html>
<head>
+ <!--
+ If you are serving your web app in a path other than the root, change the
+ href value below to reflect the base path you are serving from.
+
+ The path provided below has to start and end with a slash "/" in order for
+ it to work correctly.
+
+ For more details:
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+ -->
+ <base href="/">
+
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A resource to help developers evaluate and use Flutter.">
@@ -27,12 +39,68 @@
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
+ var serviceWorkerVersion = null;
+ var scriptLoaded = false;
+ function loadMainDartJs() {
+ if (scriptLoaded) {
+ return;
+ }
+ scriptLoaded = true;
+ var scriptTag = document.createElement('script');
+ scriptTag.src = 'main.dart.js';
+ scriptTag.type = 'application/javascript';
+ document.body.append(scriptTag);
+ }
+
if ('serviceWorker' in navigator) {
+ // Service workers are supported. Use them.
window.addEventListener('load', function () {
- navigator.serviceWorker.register('flutter_service_worker.js');
+ // Wait for registration to finish before dropping the <script> tag.
+ // Otherwise, the browser will load the script multiple times,
+ // potentially different versions.
+ var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
+ navigator.serviceWorker.register(serviceWorkerUrl)
+ .then((reg) => {
+ function waitForActivation(serviceWorker) {
+ serviceWorker.addEventListener('statechange', () => {
+ if (serviceWorker.state == 'activated') {
+ console.log('Installed new service worker.');
+ loadMainDartJs();
+ }
+ });
+ }
+ if (!reg.active && (reg.installing || reg.waiting)) {
+ // No active web worker and we have installed or are installing
+ // one for the first time. Simply wait for it to activate.
+ waitForActivation(reg.installing ?? reg.waiting);
+ } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
+ // When the app updates the serviceWorkerVersion changes, so we
+ // need to ask the service worker to update.
+ console.log('New service worker available.');
+ reg.update();
+ waitForActivation(reg.installing);
+ } else {
+ // Existing service worker is still good.
+ console.log('Loading app from service worker.');
+ loadMainDartJs();
+ }
+ });
+
+ // If service worker doesn't succeed in a reasonable amount of time,
+ // fallback to plaint <script> tag.
+ setTimeout(() => {
+ if (!scriptLoaded) {
+ console.warn(
+ 'Failed to load app from service worker. Falling back to plain <script> tag.',
+ );
+ loadMainDartJs();
+ }
+ }, 4000);
});
+ } else {
+ // Service workers not supported. Just drop the <script> tag.
+ loadMainDartJs();
}
</script>
- <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
