flutter web index.html update produces a blank page

I am trying to update my flutter web index.html to remove this deprecation warning but it just produces a blank page when I run my app in dev mode:

Warning: In index.html:39: Local variable for "serviceWorkerVersion" is deprecated. Use "{{flutter_service_worker_version}}" template token instead.
Warning: In index.html:49: "FlutterLoader.loadEntrypoint" is deprecated. Use "FlutterLoader.load" instead.

Here is my original index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="blah">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="notmuch">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>test</title>
  <link rel="manifest" href="manifest.json">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/10.4.0/firebase-app-compat.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/10.4.0/firebase-messaging-compat.min.js"></script>

  <script>const firebaseConfig = {
    apiKey: "secret",
    authDomain: "secret",
    projectId: "secret",
    storageBucket: "secret",
    messagingSenderId: "secret",
    appId: "secret",
    measurementId: ""
  };

firebase.initializeApp(firebaseConfig);
</script>

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {

      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
          onEntrypointLoaded: function(engineInitializer) {
          
            navigator.serviceWorker.register("firebase-messaging-sw.js");

            var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
                      
            engineInitializer.initializeEngine().then(function(appRunner) {          
              appRunner.runApp();
            });
        }
      });
    })
  </script>
</body>
</html>

Here is the index.html as suggested by ChatGPT:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="blah">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="notmuch">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>test</title>
  <link rel="manifest" href="manifest.json">

  <!-- Firebase SDK -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/10.4.0/firebase-app-compat.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/10.4.0/firebase-messaging-compat.min.js"></script>

  <!-- Firebase Configuration -->
  <script>
    const firebaseConfig = {
      apiKey: "secret",
      authDomain: "secret",
      projectId: "secret",
      storageBucket: "secret",
      messagingSenderId: "secret",
      appId: "secret",
      measurementId: ""
    };
    firebase.initializeApp(firebaseConfig);
  </script>

  <!-- Service Worker Version -->
  <script>
    // Use the template token provided by Flutter.
    const serviceWorkerVersion = "{{flutter_service_worker_version}}";
  </script>

  <!-- Flutter Initialization Script -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Using the updated FlutterLoader.load method.
      _flutter.loader.load({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEngineCreated: function(engine) {
          // Register Firebase service worker here, before running the app.
          navigator.serviceWorker.register("firebase-messaging-sw.js")
            .then(function(registration) {
              console.log('Firebase service worker registered with scope:', registration.scope);
            }).catch(function(error) {
              console.error('Firebase service worker registration failed:', error);
            });

          // Continue with Flutter app initialization.
          engine.run();
        }
      });
    });
  </script>
</body>
</html>

Solution

Flutter introduced a new way to initialize web apps. You can see more info here.

Essentially, what you can do is keep everything in your head tag and copy it somewhere, except the service worker code.

Afterwards, delete the web folder and in the console type flutter create . --platforms web.

Place back your head scripts and other tags.