时间戳

首页 > 解决方案 > Flutter Web：初始化firebase应用程序时需要刷新

firebase - Flutter Web：初始化firebase应用程序时需要刷新

问题描述

这是一个我已经处理了一段时间的问题，我不太确定如何确定。

目前，我编写了一个 Flutter Web App 并将其部署到生产环境中。它需要 Firebase，并且通常当用户第一次初始化应用程序时，它会卡在空白屏幕上，需要刷新网站才能加载。

但是，直到用户在很长一段时间后没有启动新会话，或者用户在新设备上启动新会话之前，它才会再次出现问题？

这与内存缓存有什么关系吗？

这与应用程序启动时如何初始化 Firebase 有什么关系？

它很难修复，因为它是一个不容易持续复制的错误。

Index.html 脚本：

<!DOCTYPE html>
<html lang="en">

<head>
  <base href="/">
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192"  href="icons/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
  <link rel="manifest" href="icons/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
  <title>App</title>

  <!-- Google Auth -->
  <meta name="google-signin-client_id" content="***">

  <!-- Apple Auth -->
  <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

  <meta name="appleid-signin-client-id" content="***">
  <meta name="appleid-signin-scope" content="email">
  <meta name="appleid-signin-redirect-uri" content="***">
  <meta name="appleid-signin-use-popup" content="true"> <!-- or false defaults to false -->

  <script defer src="main.dart.js" type="application/javascript"></script>
</head>

<body id="app-container">

<!-- FIREBASE PRODUCTS -->
<!-- https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="/__/firebase/7.22.1/firebase-app.js"></script>
  <script src="/__/firebase/7.22.1/firebase-auth.js"></script>
  <script src="/__/firebase/7.22.1/firebase-firestore.js"></script>
  <script src="/__/firebase/7.22.1/firebase-storage.js"></script>
  <script src="/__/firebase/7.22.1/firebase-analytics.js"></script>
  <script src="/__/firebase/7.22.1/firebase-functions.js"></script>

<!--   Local Use Dependencies-->
<!--  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>-->
<!--  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>-->
<!--  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>-->
<!--  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-storage.js"></script>-->
<!--  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-functions.js"></script>-->

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

  <!-- FACEBOOK LOGIN -->

  <!--Facebook SDK config -->
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId            : '***',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v7.0'
      });
    };
  </script>

  <!-- Facebook JS CDN SDK -->
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

  <!-- for interop with dart through this plugin -->
  <script src="https://flutterfacebooklogin.s3.us-east-2.amazonaws.com/web_interop.js"></script>

</body>

</html>

Main.dart 文件：

void main() async {
  // Register all the models and services before the app starts
  await ThemeManager.initialise();
  await Firebase.initializeApp();

  WidgetsFlutterBinding.ensureInitialized();

  setupLocator();
  setupDialogUi();
  setupBottomSheetUI();
  setupSnackBarUi();
  setPathUrlStrategy();

  await Future.delayed(Duration(seconds: 2));
  await setupAuthListener();

  runApp(WebApp());
}

void setupSnackBarUi() {
  final service = locator<SnackbarService>();
  service.registerSnackbarConfig(
    SnackbarConfig(
      backgroundColor: Colors.redAccent,
      textColor: Colors.white,
      mainButtonTextColor: Colors.black,
    ),
  );
}

Future<void> setupAuthListener() async {
  ReactiveUserService _reactiveUserService = locator<ReactiveUserService>();
  UserDataService _userDataService = locator<UserDataService>();
  AuthService _authService = locator<AuthService>();
  FirebaseAuth.instance.authStateChanges().listen((event) async {
    if (event != null) {
      //print('main dart says logged in');
      _reactiveUserService.updateUserLoggedIn(!event.isAnonymous);
      if (_reactiveUserService.userLoggedIn) {
        User user = await _userDataService.getUserByID(event.uid);
        _reactiveUserService.updateUser(user);
      }
    } else {
      //print('main dart says not logged in');
      await _authService.signInAnonymously();
    }
  });
}

class WebApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeBuilder(
      lightTheme: regularTheme,
      darkTheme: darkTheme,
      builder: (context, regularTheme, darkTheme, themeMode) => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'App',
        theme: regularTheme,
        darkTheme: darkTheme,
        themeMode: themeMode,
        initialRoute: Routes.BaseViewRoute,
        onGenerateRoute: StackedRouter().onGenerateRoute,
        navigatorKey: StackedService.navigatorKey,
      ),
    );
  }
}

我在正确的轨道上试图解决这个问题吗？为了解决这个问题，我应该提供其他信息吗？

提前致谢

标签： firebaseflutter-web

解决方案

推荐阅读