Обновление flutter web index.html создает пустую страницу

Я пытаюсь обновить свой flutter web index.html, чтобы удалить это предупреждение об устаревании, но при запуске приложения в режиме разработки появляется пустая страница:

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.

Вот мой исходный 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>

Вот index.html, предложенный 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.info('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>

Создайте новый проект флаттера, используя версию: 3.22.2, проверьте файл web/index.html, а затем обновите его index.html.

— 25.06.2024 04:56

flutter firebase-cloud-messaging

25.06.2024 03:14

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...